-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
fix: All Sentry.feedbackIntegration examples include the Sentry.init() statement for clarity #13247
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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. | ||
|
|
||
| <PlatformContent includePath="user-feedback/manual-injection" /> | ||
|
|
@@ -59,11 +61,16 @@ Sentry.setUser({ | |
| email: "[email protected]", | ||
| }); | ||
|
|
||
| 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 | ||
| <script> | ||
| feedbackIntegration({ | ||
| themeLight: { | ||
| foreground: "black", | ||
| }, | ||
| themeDark: { | ||
| foreground: "white", | ||
| }, | ||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| integrations: [ | ||
| Sentry.feedbackIntegration({ | ||
| themeLight: { | ||
| foreground: "#000", | ||
| }, | ||
| themeDark: { | ||
| foreground: "#fff", | ||
| }, | ||
| }), | ||
| ], | ||
| }); | ||
| </script> | ||
|
|
||
| <style> | ||
| #sentry-feedback { | ||
| --foreground: "red"; /* overrides both `white` and `black` colors */ | ||
| --foreground: "red"; /* overrides both `#fff` and `#000` above */ | ||
| } | ||
| </style> | ||
| ``` | ||
|
|
@@ -186,14 +208,19 @@ It’s possible to set the `id` configuration value to something other than the | |
|
|
||
| ```html | ||
| <script> | ||
| feedbackIntegration({ | ||
| id: "feedback-theme", // The default is 'sentry-feedback' | ||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| integrations: [ | ||
| Sentry.feedbackIntegration({ | ||
| id: "feedback-theme", // The default is 'sentry-feedback' | ||
| }), | ||
| ], | ||
| }); | ||
| </script> | ||
|
|
||
| <style> | ||
| /* Target the custom id */ | ||
| #feedback-theme { | ||
| /* Target the custom id */ | ||
| --foreground: "red"; | ||
| } | ||
| </style> | ||
|
|
@@ -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(); | ||
|
|
||
12 changes: 9 additions & 3 deletions
12
platform-includes/user-feedback/manual-injection/javascript.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
platform-includes/user-feedback/manual-injection/javascript.react.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
platform-includes/user-feedback/manual-injection/javascript.remix.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.