From 11442124de3beb18d7dcf76e4b736ea5d3cb7ce3 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 4 Apr 2025 10:31:56 -0700 Subject: [PATCH 1/2] fix: All Sentry.feedbackIntegration examples include the Sentry.init() statement for clarity --- .../user-feedback/configuration/index.mdx | 134 +++++++++++++----- .../manual-injection/javascript.mdx | 12 +- .../manual-injection/javascript.nextjs.mdx | 8 ++ .../manual-injection/javascript.react.mdx | 8 ++ .../manual-injection/javascript.remix.mdx | 8 ++ 5 files changed, 129 insertions(+), 41 deletions(-) diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index faac7fdea841d5..a3117d1bf87788 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, + }) + ], }); +// 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,11 +307,19 @@ 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, + }) + ], }); +// 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 e88b38df8afaf5..68205bd7085793 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.mdx @@ -1,9 +1,15 @@ ```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(); diff --git a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx index ba550240945dc0..13e1f7b8e6355f 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 diff --git a/platform-includes/user-feedback/manual-injection/javascript.react.mdx b/platform-includes/user-feedback/manual-injection/javascript.react.mdx index 72874082fc1dfd..d6cd4bcc0bd082 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 diff --git a/platform-includes/user-feedback/manual-injection/javascript.remix.mdx b/platform-includes/user-feedback/manual-injection/javascript.remix.mdx index c352ddf3050428..9244950619b441 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 From 0a40222e25b22dd27784b659fdde62cd24fb255b Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 4 Apr 2025 16:05:15 -0700 Subject: [PATCH 2/2] account for getFeedback() possibly returning undefined --- .../javascript/common/user-feedback/configuration/index.mdx | 4 ++-- .../user-feedback/manual-injection/javascript.mdx | 2 +- .../user-feedback/manual-injection/javascript.nextjs.mdx | 2 +- .../user-feedback/manual-injection/javascript.react.mdx | 2 +- .../user-feedback/manual-injection/javascript.remix.mdx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index a3117d1bf87788..65de3d1ca72aa3 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -264,7 +264,7 @@ Sentry.init({ // Get the instance returned by `feedbackIntegration()` const feedback = Sentry.getFeedback(); -feedback.attachTo(document.querySelector("#your-button"), { +feedback?.attachTo(document.querySelector("#your-button"), { formTitle: "Report a Bug!", }); ``` @@ -320,7 +320,7 @@ Sentry.init({ // Get the instance returned by `feedbackIntegration()` const feedback = Sentry.getFeedback(); -const form = await feedback.createForm(); +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 68205bd7085793..67a18d55378dd1 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.mdx @@ -11,7 +11,7 @@ Sentry.init({ 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 13e1f7b8e6355f..61b8174a5d0ac2 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx @@ -23,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 d6cd4bcc0bd082..53489d84060783 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.react.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.react.mdx @@ -23,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 9244950619b441..8a58e17120fca0 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.remix.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.remix.mdx @@ -23,7 +23,7 @@ function ToggleFeedbackButton() { widget.removeFromDom(); setWidget(null); } else { - setWidget(feedback.createWidget()); + setWidget(feedback?.createWidget()); } }} >