diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index faac7fdea841d..65de3d1ca72aa 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -28,6 +28,8 @@ The following options can be configured for the integration in `feedbackIntegrat ### Auto-Inject vs. Manual Injection +Whether you want to use auto-injection, or manually control things, the integration must first be passed via the `integrations` array into `Sentry.init()`. + 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. @@ -59,11 +61,16 @@ Sentry.setUser({ email: "foo@example.com", }); -feedbackIntegration({ - useSentryUser: { - name: "fullName", - email: "email", - }, +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + useSentryUser: { + name: "fullName", + email: "email", + }, + }), + ], }); ``` @@ -95,10 +102,15 @@ The following options can be configured for the integration in `feedbackIntegrat Example of customization: ```javascript -feedbackIntegration({ - buttonLabel: "Feedback", - submitButtonLabel: "Send Feedback", - formTitle: "Send Feedback", +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + buttonLabel: "Feedback", + submitButtonLabel: "Send Feedback", + formTitle: "Send Feedback", + }) + ], }); ``` @@ -124,13 +136,18 @@ The example below shows how to customize the background color for the light and Alternatively, you can also do the same thing by setting theme values in JavaScript: ```javascript -feedbackIntegration({ - themeLight: { - background: "#cccccc", - }, - themeDark: { - background: "#222222", - }, +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + themeLight: { + background: "#cccccc", + }, + themeDark: { + background: "#222222", + }, + }), + ], }); ``` @@ -163,19 +180,24 @@ CSS variables take priority over configuration values in `feedbackIntegration()` ```html ``` @@ -186,14 +208,19 @@ It’s possible to set the `id` configuration value to something other than the ```html @@ -206,11 +233,16 @@ Because it’s sometimes useful to know when a user started interacting with the The following options can be configured for the integration in `feedbackIntegration({})`: ```javascript -feedbackIntegration({ - onFormOpen: () => {}, - onFormClose: () => {}, - onSubmitSuccess: (data: FeedbackFormData) => {}, - onSubmitError: (error: Error) => {}, +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + onFormOpen: () => {}, + onFormClose: () => {}, + onSubmitSuccess: (data: FeedbackFormData) => {}, + onSubmitError: (error: Error) => {}, + }), + ], }); ``` @@ -219,17 +251,35 @@ feedbackIntegration({ 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). ```javascript -const feedback = feedbackIntegration({ - // Disable the injection of the default widget - autoInject: false, +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + }) + ], }); -feedback.attachTo(document.querySelector("#your-button"), { +// Get the instance returned by `feedbackIntegration()` +const feedback = Sentry.getFeedback(); + +feedback?.attachTo(document.querySelector("#your-button"), { formTitle: "Report a Bug!", }); ``` ```typescript {tabTitle: NextJs} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + }) + ], +}); + function AttachToFeedbackButton() { const [feedback, setFeedback] = useState(); // Read `getFeedback` on the client only, to avoid hydration errors during server rendering @@ -257,12 +307,20 @@ function AttachToFeedbackButton() { 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. ```javascript -const feedback = feedbackIntegration({ - // Disable the injection of the default widget - autoInject: false, +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + }) + ], }); -const form = await feedback.createForm(); +// Get the instance returned by `feedbackIntegration()` +const feedback = Sentry.getFeedback(); + +const form = await feedback?.createForm(); form.appendToDom(); form.open(); ``` diff --git a/platform-includes/user-feedback/manual-injection/javascript.mdx b/platform-includes/user-feedback/manual-injection/javascript.mdx index e88b38df8afaf..67a18d55378dd 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.mdx @@ -1,11 +1,17 @@ ```javascript -const feedback = feedbackIntegration({ - // Disable the injection of the default widget - autoInject: false, +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + })], }); +// Get the instance returned by `feedbackIntegration()` +const feedback = Sentry.getFeedback(); + // Create and render the button -const widget = feedback.createWidget(); +const widget = feedback?.createWidget(); // Later, when it's time to clean up: widget.removeFromDom(); diff --git a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx index ba550240945dc..61b8174a5d0ac 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx @@ -1,4 +1,12 @@ ```jsx {tabTitle: NextJS} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + })], +}); + function ToggleFeedbackButton() { const [feedback, setFeedback] = useState(); // Read `getFeedback` on the client only, to avoid hydration errors during server rendering @@ -15,7 +23,7 @@ function ToggleFeedbackButton() { widget.removeFromDom(); setWidget(null); } else { - setWidget(feedback.createWidget()); + setWidget(feedback?.createWidget()); } }} > diff --git a/platform-includes/user-feedback/manual-injection/javascript.react.mdx b/platform-includes/user-feedback/manual-injection/javascript.react.mdx index 72874082fc1df..53489d8406078 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.react.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.react.mdx @@ -1,4 +1,12 @@ ```jsx {tabTitle: React} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + })], +}); + function ToggleFeedbackButton() { const [feedback, setFeedback] = useState(); // Read `getFeedback` on the client only, to avoid hydration errors during server rendering @@ -15,7 +23,7 @@ function ToggleFeedbackButton() { widget.removeFromDom(); setWidget(null); } else { - setWidget(feedback.createWidget()); + setWidget(feedback?.createWidget()); } }} > diff --git a/platform-includes/user-feedback/manual-injection/javascript.remix.mdx b/platform-includes/user-feedback/manual-injection/javascript.remix.mdx index c352ddf305042..8a58e17120fca 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.remix.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.remix.mdx @@ -1,4 +1,12 @@ ```jsx {tabTitle: Remix} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.feedbackIntegration({ + // Disable the injection of the default widget + autoInject: false, + })], +}); + function ToggleFeedbackButton() { const [feedback, setFeedback] = useState(); // Read `getFeedback` on the client only, to avoid hydration errors during server rendering @@ -15,7 +23,7 @@ function ToggleFeedbackButton() { widget.removeFromDom(); setWidget(null); } else { - setWidget(feedback.createWidget()); + setWidget(feedback?.createWidget()); } }} >