-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
docs(feedback): Keep SDK v7 config docs #10009
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Bundle ReportChanges will increase total bundle size by 533 bytes ⬆️
|
## User Feedback Widget | ||
|
||
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](#bring-your-own-widget). The following image shows which elements are customizable. The configuration keys on the left side of the image correspond to [text customization](#text-customization) and the configuration keys on the right side of the image are for [theme customizations](#theme-customization). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
todo: we should mention that this version is deprecated (was beta, and v8 is the GA) and migration docs are available at https://github.com/getsentry/sentry-javascript/blob/develop/docs/migration/feedback.md
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for adding this! I just have some small language suggestions.
#### User Context | ||
|
||
If you have set a user context by calling [`Sentry.setUser`](/platforms/javascript/enriching-events/identify-user/) then those values will be used as defaults for the `name` and `email` fields. If those fields are hidden from the user, then the default values will still be sent along with the feedback message. | ||
If you have set a user context by calling <PlatformLink to="/enriching-events/identify-user/">`Sentry.setUser()`</PlatformLink> then those values will be used as defaults for the `name` and `email` fields. If those fields are hidden from the user, then the default values will still be sent along with the feedback message. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you have set a user context by calling <PlatformLink to="/enriching-events/identify-user/">`Sentry.setUser()`</PlatformLink> then those values will be used as defaults for the `name` and `email` fields. If those fields are hidden from the user, then the default values will still be sent along with the feedback message. | |
If you've set a user context by calling <PlatformLink to="/enriching-events/identify-user/">`Sentry.setUser()`</PlatformLink>, those values will be used as defaults for the `name` and `email` fields. If those fields are hidden from the user, the default values will still be sent along with the feedback message. |
--- | ||
title: Beta SDK | ||
sidebar_order: 6900 | ||
description: "Learn about the general User Feedback configuration fields for version 7 of the JavaScript SDK." |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
description: "Learn about the general User Feedback configuration fields for version 7 of the JavaScript SDK." | |
description: "Learn about general User Feedback configuration fields for version 7 of the JavaScript SDK." |
|
||
<Alert level="warning" title="Deprecation Warning"> | ||
|
||
User Feedback in version 7 of the SDK was released as a Beta integration. We recommend using <PlatformLink to="/user-feedback/configuration/">version 8 of the SDK</PlatformLink> instead. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
User Feedback in version 7 of the SDK was released as a Beta integration. We recommend using <PlatformLink to="/user-feedback/configuration/">version 8 of the SDK</PlatformLink> instead. | |
In version 7 of our JavaScript SDK, User Feedback was released as a Beta integration. We recommend updating your SDK to <PlatformLink to="/user-feedback/configuration/">version 8</PlatformLink>. |
|
||
## User Feedback Widget | ||
|
||
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](#bring-your-own-widget). The following image shows which elements are customizable. The configuration keys on the left side of the image correspond to [text customization](#text-customization) and the configuration keys on the right side of the image are for [theme customizations](#theme-customization). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](#bring-your-own-widget). The following image shows which elements are customizable. The configuration keys on the left side of the image correspond to [text customization](#text-customization) and the configuration keys on the right side of the image are for [theme customizations](#theme-customization). | |
The User Feedback Widget offers many customization options, and if the available options are insufficient, you can [use your own UI](#bring-your-own-widget). The following image shows which elements are customizable. The configuration keys on the left of the image correspond to [text customization](#text-customization), while the ones on the right side are for [theme customizations](#theme-customization). |
| `autoInject` | `boolean` | `true` | Injects the Feedback widget into the application when the integration is added. Set `autoInject: false` if you want to call `feedback.attachTo()` or `feedback.openDialog()` directly, or only want to show the widget on certain views. | | ||
| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form | | ||
| `colorScheme` | <code>"system" \| "light" \| "dark"</code> | `"system"` | The color theme to use. `"system"` will follow your OS color scheme. | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| `autoInject` | `boolean` | `true` | Injects the Feedback widget into the application when the integration is added. Set `autoInject: false` if you want to call `feedback.attachTo()` or `feedback.openDialog()` directly, or only want to show the widget on certain views. | | |
| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form | | |
| `colorScheme` | <code>"system" \| "light" \| "dark"</code> | `"system"` | The color theme to use. `"system"` will follow your OS color scheme. | | |
| `autoInject` | `boolean` | `true` | Injects the Feedback widget into the application when the integration is added. Set `autoInject: false` if you want to call `feedback.attachTo()` or `feedback.openDialog()` directly, or only want to show the widget on certain views. | | |
| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form. | | |
| `colorScheme` | <code>"system" \| "light" \| "dark"</code> | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. | |
Sometimes it’s important to know when a user started interacting with the feedback form, so you can add custom logging, or start/stop background timers on the page until the user is done. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sometimes it’s important to know when a user started interacting with the feedback form, so you can add custom logging, or start/stop background timers on the page until the user is done. | |
Because it’s sometimes useful to know when a user started interacting with the feedback form, we've made it possible for you to add custom logging, or start and stop background timers on the page that tell you when the user is done. | |
You can skip the default injected button and use your own button to trigger displaying the form. Call `feedback.attachTo()` to have the SDK attach a click listener to your own button. You can additionally supply the same customization options that the constructor accepts (like for text labels and colors). | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can skip the default injected button and use your own button to trigger displaying the form. Call `feedback.attachTo()` to have the SDK attach a click listener to your own button. You can additionally supply the same customization options that the constructor accepts (like for text labels and colors). | |
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). | |
- a JavaScript object with a required `message` property and additionally, optional `name` and `email` properties or a `FormData` instance with the same properties | ||
- an optional "options" object |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- a JavaScript object with a required `message` property and additionally, optional `name` and `email` properties or a `FormData` instance with the same properties | |
- an optional "options" object | |
- A JavaScript object with a required `message` property and also optional `name` and `email` properties, or a `FormData` instance with the same properties. | |
- An optional "options" object. |
); | ||
``` | ||
|
||
Here is a simple example: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is a simple example: | |
Here's a simple example: |
| ---------------- | ------------------------------------------------------------------------------------------------- | | ||
| `eventId` | Manually set the id of the event. | | ||
| `dsn` | Manually set dsn to report to. | | ||
| `user` | Manually set user data _[an object with keys listed below]_. | | ||
| `user.email` | User's email address. | | ||
| `user.name` | User's name. | | ||
| `lang` | _[automatic]_ – **override for Sentry’s language code** | | ||
| `title` | It looks like we’re having issues. | | ||
| `subtitle` | Our team has been notified. | | ||
| `subtitle2` | If you’d like to help, tell us what happened below. – **not visible on small screen resolutions** | | ||
| `labelName` | Name | | ||
| `labelEmail` | Email | | ||
| `labelComments` | What happened? | | ||
| `labelClose` | Close | | ||
| `labelSubmit` | Submit | | ||
| `errorGeneric` | An unknown error occurred while submitting your report. Please try again. | | ||
| `errorFormEntry` | Some fields were invalid. Please correct the errors and try again. | | ||
| `successMessage` | Your feedback has been sent. Thank you! | | ||
| `onLoad` | n/a - **an optional callback that will be invoked when the widget opens** | | ||
| `onClose` | n/a - **an optional callback that will be invoked when the widget closes** | | ||
|
||
The optional callback `onLoad` will be called when users see the widget. You can use this to run custom logic, for example to log an analytics event: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| ---------------- | ------------------------------------------------------------------------------------------------- | | |
| `eventId` | Manually set the id of the event. | | |
| `dsn` | Manually set dsn to report to. | | |
| `user` | Manually set user data _[an object with keys listed below]_. | | |
| `user.email` | User's email address. | | |
| `user.name` | User's name. | | |
| `lang` | _[automatic]_ – **override for Sentry’s language code** | | |
| `title` | It looks like we’re having issues. | | |
| `subtitle` | Our team has been notified. | | |
| `subtitle2` | If you’d like to help, tell us what happened below. – **not visible on small screen resolutions** | | |
| `labelName` | Name | | |
| `labelEmail` | Email | | |
| `labelComments` | What happened? | | |
| `labelClose` | Close | | |
| `labelSubmit` | Submit | | |
| `errorGeneric` | An unknown error occurred while submitting your report. Please try again. | | |
| `errorFormEntry` | Some fields were invalid. Please correct the errors and try again. | | |
| `successMessage` | Your feedback has been sent. Thank you! | | |
| `onLoad` | n/a - **an optional callback that will be invoked when the widget opens** | | |
| `onClose` | n/a - **an optional callback that will be invoked when the widget closes** | | |
The optional callback `onLoad` will be called when users see the widget. You can use this to run custom logic, for example to log an analytics event: | |
| ---------------- | ------------------------------------------------------------------------------------------------- | | |
| `eventId` | Manually set the id of the event. | | |
| `dsn` | Manually set dsn to report to. | | |
| `user` | Manually set user data _[an object with keys listed below]_. | | |
| `user.email` | User's email address. | | |
| `user.name` | User's name. | | |
| `lang` | _[automatic]_ – (**Override for Sentry’s language code.**) | | |
| `title` | It looks like we’re having issues. | | |
| `subtitle` | Our team has been notified. | | |
| `subtitle2` | If you’d like to help, tell us what happened below. – (**Not visible on small screen resolutions.**) | | |
| `labelName` | Name | | |
| `labelEmail` | Email | | |
| `labelComments` | What happened? | | |
| `labelClose` | Close | | |
| `labelSubmit` | Submit | | |
| `errorGeneric` | An unknown error occurred while submitting your report. Please try again. | | |
| `errorFormEntry` | Some fields were invalid. Please correct the errors and try again. | | |
| `successMessage` | Your feedback has been sent. Thank you! | | |
| `onLoad` | n/a - (**An optional callback that will be invoked when the widget opens.**) | | |
| `onClose` | n/a - (**An optional callback that will be invoked when the widget closes.**) | | |
The optional callback `onLoad` will be called when users see the widget. You can use this to run custom logic, for example to log an analytics event: |
@lizokm I applied all your code suggestions manually, and put them into both the v7 and v8 config pages because there's a bunch of copy+paste between them. |
This is restoring content that we had before, specific to the v7 JS SDK.
The only changes I made are to fix the links, using PlatformLink properly.
This was originally removed/replaced in #9961 as we launched v8