Skip to content

Commit ef62537

Browse files
ryan953ryan953
authored
fix: All Sentry.feedbackIntegration examples include the Sentry.init() statement for clarity (#13247)
* fix: All Sentry.feedbackIntegration examples include the Sentry.init() statement for clarity * account for getFeedback() possibly returning undefined
1 parent b42fc6b commit ef62537

File tree

5 files changed

+135
-47
lines changed

5 files changed

+135
-47
lines changed

‎docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+98-40
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ The following options can be configured for the integration in `feedbackIntegrat
2828

2929
### Auto-Inject vs. Manual Injection
3030

31+
Whether you want to use auto-injection, or manually control things, the integration must first be passed via the `integrations` array into `Sentry.init()`.
32+
3133
If you have `autoInject: true` a button will be inserted into the page that triggers the form to pop up so the user can enter their feedback. If instead you want to control when this injection happens, call the `feedback.createWidget()` method to get a reference to an `Actor` object, and then call `appendToDom()` to insert it into the page.
3234

3335
<PlatformContent includePath="user-feedback/manual-injection" />
@@ -59,11 +61,16 @@ Sentry.setUser({
5961
email: "foo@example.com",
6062
});
6163

62-
feedbackIntegration({
63-
useSentryUser: {
64-
name: "fullName",
65-
email: "email",
66-
},
64+
Sentry.init({
65+
dsn: "___PUBLIC_DSN___",
66+
integrations: [
67+
Sentry.feedbackIntegration({
68+
useSentryUser: {
69+
name: "fullName",
70+
email: "email",
71+
},
72+
}),
73+
],
6774
});
6875
```
6976

@@ -95,10 +102,15 @@ The following options can be configured for the integration in `feedbackIntegrat
95102
Example of customization:
96103

97104
```javascript
98-
feedbackIntegration({
99-
buttonLabel: "Feedback",
100-
submitButtonLabel: "Send Feedback",
101-
formTitle: "Send Feedback",
105+
Sentry.init({
106+
dsn: "___PUBLIC_DSN___",
107+
integrations: [
108+
Sentry.feedbackIntegration({
109+
buttonLabel: "Feedback",
110+
submitButtonLabel: "Send Feedback",
111+
formTitle: "Send Feedback",
112+
})
113+
],
102114
});
103115
```
104116

@@ -124,13 +136,18 @@ The example below shows how to customize the background color for the light and
124136
Alternatively, you can also do the same thing by setting theme values in JavaScript:
125137

126138
```javascript
127-
feedbackIntegration({
128-
themeLight: {
129-
background: "#cccccc",
130-
},
131-
themeDark: {
132-
background: "#222222",
133-
},
139+
Sentry.init({
140+
dsn: "___PUBLIC_DSN___",
141+
integrations: [
142+
Sentry.feedbackIntegration({
143+
themeLight: {
144+
background: "#cccccc",
145+
},
146+
themeDark: {
147+
background: "#222222",
148+
},
149+
}),
150+
],
134151
});
135152
```
136153

@@ -163,19 +180,24 @@ CSS variables take priority over configuration values in `feedbackIntegration()`
163180

164181
```html
165182
<script>
166-
feedbackIntegration({
167-
themeLight: {
168-
foreground: "black",
169-
},
170-
themeDark: {
171-
foreground: "white",
172-
},
183+
Sentry.init({
184+
dsn: "___PUBLIC_DSN___",
185+
integrations: [
186+
Sentry.feedbackIntegration({
187+
themeLight: {
188+
foreground: "#000",
189+
},
190+
themeDark: {
191+
foreground: "#fff",
192+
},
193+
}),
194+
],
173195
});
174196
</script>
175197

176198
<style>
177199
#sentry-feedback {
178-
--foreground: "red"; /* overrides both `white` and `black` colors */
200+
--foreground: "red"; /* overrides both `#fff` and `#000` above */
179201
}
180202
</style>
181203
```
@@ -186,14 +208,19 @@ It’s possible to set the `id` configuration value to something other than the
186208

187209
```html
188210
<script>
189-
feedbackIntegration({
190-
id: "feedback-theme", // The default is 'sentry-feedback'
211+
Sentry.init({
212+
dsn: "___PUBLIC_DSN___",
213+
integrations: [
214+
Sentry.feedbackIntegration({
215+
id: "feedback-theme", // The default is 'sentry-feedback'
216+
}),
217+
],
191218
});
192219
</script>
193220

194221
<style>
222+
/* Target the custom id */
195223
#feedback-theme {
196-
/* Target the custom id */
197224
--foreground: "red";
198225
}
199226
</style>
@@ -206,11 +233,16 @@ Because it’s sometimes useful to know when a user started interacting with the
206233
The following options can be configured for the integration in `feedbackIntegration({})`:
207234

208235
```javascript
209-
feedbackIntegration({
210-
onFormOpen: () => {},
211-
onFormClose: () => {},
212-
onSubmitSuccess: (data: FeedbackFormData) => {},
213-
onSubmitError: (error: Error) => {},
236+
Sentry.init({
237+
dsn: "___PUBLIC_DSN___",
238+
integrations: [
239+
Sentry.feedbackIntegration({
240+
onFormOpen: () => {},
241+
onFormClose: () => {},
242+
onSubmitSuccess: (data: FeedbackFormData) => {},
243+
onSubmitError: (error: Error) => {},
244+
}),
245+
],
214246
});
215247
```
216248

@@ -219,17 +251,35 @@ feedbackIntegration({
219251
You can use your own button instead of the default injected button to trigger the form being displayed, by calling `feedback.attachTo()` to have the SDK attach a click listener to your button. You can also supply the same customization options that the constructor accepts (for example, for text labels and colors).
220252

221253
```javascript
222-
const feedback = feedbackIntegration({
223-
// Disable the injection of the default widget
224-
autoInject: false,
254+
Sentry.init({
255+
dsn: "___PUBLIC_DSN___",
256+
integrations: [
257+
Sentry.feedbackIntegration({
258+
// Disable the injection of the default widget
259+
autoInject: false,
260+
})
261+
],
225262
});
226263

227-
feedback.attachTo(document.querySelector("#your-button"), {
264+
// Get the instance returned by `feedbackIntegration()`
265+
const feedback = Sentry.getFeedback();
266+
267+
feedback?.attachTo(document.querySelector("#your-button"), {
228268
formTitle: "Report a Bug!",
229269
});
230270
```
231271
232272
```typescript {tabTitle: NextJs}
273+
Sentry.init({
274+
dsn: "___PUBLIC_DSN___",
275+
integrations: [
276+
Sentry.feedbackIntegration({
277+
// Disable the injection of the default widget
278+
autoInject: false,
279+
})
280+
],
281+
});
282+
233283
function AttachToFeedbackButton() {
234284
const [feedback, setFeedback] = useState();
235285
// Read `getFeedback` on the client only, to avoid hydration errors during server rendering
@@ -257,12 +307,20 @@ function AttachToFeedbackButton() {
257307
Alternatively, you can call `feedback.createForm()` and have full control over when the form gets loaded, added to the dom, and finally shown to the user.
258308
259309
```javascript
260-
const feedback = feedbackIntegration({
261-
// Disable the injection of the default widget
262-
autoInject: false,
310+
Sentry.init({
311+
dsn: "___PUBLIC_DSN___",
312+
integrations: [
313+
Sentry.feedbackIntegration({
314+
// Disable the injection of the default widget
315+
autoInject: false,
316+
})
317+
],
263318
});
264319

265-
const form = await feedback.createForm();
320+
// Get the instance returned by `feedbackIntegration()`
321+
const feedback = Sentry.getFeedback();
322+
323+
const form = await feedback?.createForm();
266324
form.appendToDom();
267325
form.open();
268326
```

‎platform-includes/user-feedback/manual-injection/javascript.mdx

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
```javascript
2-
const feedback = feedbackIntegration({
3-
// Disable the injection of the default widget
4-
autoInject: false,
2+
Sentry.init({
3+
dsn: "___PUBLIC_DSN___",
4+
integrations: [Sentry.feedbackIntegration({
5+
// Disable the injection of the default widget
6+
autoInject: false,
7+
})],
58
});
69

10+
// Get the instance returned by `feedbackIntegration()`
11+
const feedback = Sentry.getFeedback();
12+
713
// Create and render the button
8-
const widget = feedback.createWidget();
14+
const widget = feedback?.createWidget();
915

1016
// Later, when it's time to clean up:
1117
widget.removeFromDom();

‎platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
```jsx {tabTitle: NextJS}
2+
Sentry.init({
3+
dsn: "___PUBLIC_DSN___",
4+
integrations: [Sentry.feedbackIntegration({
5+
// Disable the injection of the default widget
6+
autoInject: false,
7+
})],
8+
});
9+
210
function ToggleFeedbackButton() {
311
const [feedback, setFeedback] = useState();
412
// Read `getFeedback` on the client only, to avoid hydration errors during server rendering
@@ -15,7 +23,7 @@ function ToggleFeedbackButton() {
1523
widget.removeFromDom();
1624
setWidget(null);
1725
} else {
18-
setWidget(feedback.createWidget());
26+
setWidget(feedback?.createWidget());
1927
}
2028
}}
2129
>

‎platform-includes/user-feedback/manual-injection/javascript.react.mdx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
```jsx {tabTitle: React}
2+
Sentry.init({
3+
dsn: "___PUBLIC_DSN___",
4+
integrations: [Sentry.feedbackIntegration({
5+
// Disable the injection of the default widget
6+
autoInject: false,
7+
})],
8+
});
9+
210
function ToggleFeedbackButton() {
311
const [feedback, setFeedback] = useState();
412
// Read `getFeedback` on the client only, to avoid hydration errors during server rendering
@@ -15,7 +23,7 @@ function ToggleFeedbackButton() {
1523
widget.removeFromDom();
1624
setWidget(null);
1725
} else {
18-
setWidget(feedback.createWidget());
26+
setWidget(feedback?.createWidget());
1927
}
2028
}}
2129
>

‎platform-includes/user-feedback/manual-injection/javascript.remix.mdx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
```jsx {tabTitle: Remix}
2+
Sentry.init({
3+
dsn: "___PUBLIC_DSN___",
4+
integrations: [Sentry.feedbackIntegration({
5+
// Disable the injection of the default widget
6+
autoInject: false,
7+
})],
8+
});
9+
210
function ToggleFeedbackButton() {
311
const [feedback, setFeedback] = useState();
412
// Read `getFeedback` on the client only, to avoid hydration errors during server rendering
@@ -15,7 +23,7 @@ function ToggleFeedbackButton() {
1523
widget.removeFromDom();
1624
setWidget(null);
1725
} else {
18-
setWidget(feedback.createWidget());
26+
setWidget(feedback?.createWidget());
1927
}
2028
}}
2129
>

0 commit comments

Comments
 (0)