From 358c4d390a5d3615cf15345e0277858c43ebc526 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 23 May 2024 14:41:11 -0700 Subject: [PATCH 1/3] docs(feedback): Document the new tags field --- .../user-feedback/configuration/index.mdx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index 1df52a1038b92..86033da1ddc42 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -18,12 +18,13 @@ The following configuration options apply to version 8.0.0 and above of the Java The following options can be configured for the integration in `feedbackIntegration({})`: -| Key | Type | Default | Description | -| -------------- | ------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `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.createWidget()` directly, or only want to show the widget on certain views. | -| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form. | -| `colorScheme` | "system" \| "light" \| "dark" | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. | -| `id` | `string` | `sentry-feedback` | The `id` attribute of the `
` that contains the feedback widget. See [CSS Customization](#css-customization) for more. | +| Key | Type | Default | Description | +| -------------- | ----------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `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.createWidget()` directly, or only want to show the widget on certain views. | +| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form. | +| `colorScheme` | "system" \| "light" \| "dark" | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. | +| `id` | `string` | `sentry-feedback` | The `id` attribute of the `
` that contains the feedback widget. See [CSS Customization](#css-customization) for more. | +| `tags` | `Record` | `{}` | Tags to set on the feedback event. | ### Auto-Inject vs. Manual Injection @@ -46,6 +47,8 @@ Read more about how to [use your own UI](#bring-your-own-button) below. ### User and Form +The following options can be configured for the integration in `feedbackIntegration({})`: + | Key | Type | Default | Description | | ------------------ | ------------------------ | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | `showName` | `boolean` | `true` | Displays the name field on the feedback form. | @@ -209,14 +212,14 @@ feedbackIntegration({ 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. -Pass these callbacks when you initialize the Feedback integration: +The following options can be configured for the integration in `feedbackIntegration({})`: ```javascript feedbackIntegration({ onFormOpen: () => {}, onFormClose: () => {}, - onSubmitSuccess: () => {}, - onSubmitError: () => {}, + onSubmitSuccess: (data: FeedbackFormData) => {}, + onSubmitError: (error: Error) => {}, }); ``` @@ -238,11 +241,10 @@ feedback.attachTo(document.querySelector("#your-button"), { 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. Here is an example using JSX to define a button: ```typescript -import { BrowserClient, Feedback, getClient } from "@sentry/react"; +import { getFeedback } from "@sentry/react"; function MyFeedbackButton() { - const client = getClient(); - const feedback = client?.getIntegration(Feedback); + const feedback = getFeedback(); // Don't render custom feedback button if Feedback integration isn't installed if (!feedback) { From 573df0d1231344000ffd27a347dffac86a457f2e Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Thu, 23 May 2024 17:11:55 -0700 Subject: [PATCH 2/3] Update docs/platforms/javascript/common/user-feedback/configuration/index.mdx Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com> --- .../javascript/common/user-feedback/configuration/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index 86033da1ddc42..48e6f4f4d30aa 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -24,7 +24,7 @@ The following options can be configured for the integration in `feedbackIntegrat | `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form. | | `colorScheme` | "system" \| "light" \| "dark" | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. | | `id` | `string` | `sentry-feedback` | The `id` attribute of the `
` that contains the feedback widget. See [CSS Customization](#css-customization) for more. | -| `tags` | `Record` | `{}` | Tags to set on the feedback event. | +| `tags` | `Record` | `{}` | [Tags](/platforms/javascript/enriching-events/tags/) to set on the feedback event. | ### Auto-Inject vs. Manual Injection From b6e2f6a8e0c9df6748d10a99ed7b00c7ad815cc5 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 17 Jun 2024 13:44:14 -0700 Subject: [PATCH 3/3] use PlatformLink --- .../javascript/common/user-feedback/configuration/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index 48e6f4f4d30aa..bbfb5d02fe56e 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -24,7 +24,7 @@ The following options can be configured for the integration in `feedbackIntegrat | `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the form. | | `colorScheme` | "system" \| "light" \| "dark" | `"system"` | Shows the color theme choices. `"system"` will use your OS color scheme. | | `id` | `string` | `sentry-feedback` | The `id` attribute of the `
` that contains the feedback widget. See [CSS Customization](#css-customization) for more. | -| `tags` | `Record` | `{}` | [Tags](/platforms/javascript/enriching-events/tags/) to set on the feedback event. | +| `tags` | `Record` | `{}` | Tags to set on the feedback event. | ### Auto-Inject vs. Manual Injection