diff --git a/src/components/platformSidebar.tsx b/src/components/platformSidebar.tsx index f2fe49af631d8..da3f172b688df 100644 --- a/src/components/platformSidebar.tsx +++ b/src/components/platformSidebar.tsx @@ -74,6 +74,7 @@ export function SidebarContent({platform, guide, data}: ChildProps) { `/${pathRoot}/profiling/`, `/${pathRoot}/guides/`, `/${pathRoot}/crons/`, + `/${pathRoot}/user-feedback/`, ]} /> + ); } diff --git a/src/docs/contributing/approach/sdk-docs/write-enriching-events.mdx b/src/docs/contributing/approach/sdk-docs/write-enriching-events.mdx index c308677777580..828864f781dac 100644 --- a/src/docs/contributing/approach/sdk-docs/write-enriching-events.mdx +++ b/src/docs/contributing/approach/sdk-docs/write-enriching-events.mdx @@ -84,10 +84,10 @@ One nuance: This file is `user-feedback.mdx`. It explains how to use the embeddable JS widget or the API. - Update, as appropriate, the supported SDK list in the `PlatformSection supported` that precedes "User Feedback API". - Then add the code sample to the `src/platform-includes/enriching-events/user-feedback/sdk-api-example` directory + Then add the code sample to the `src/platform-includes/user-feedback/sdk-api-example` directory - For the .NET family, if the User Feedback API has a specific integration, add it to the `PlatformSection supported` that precedes the "Use the .NET SDK", and add the appropriate link. - Update, as appropriate, the SDKs that don't support the JS widget in the listed `PlatformSection notSupported` that precedes "Embeddeable JavaScript Widget". -- For the SDKs that use the JS widget, add the code sample to`/src/platform-includes/enriching-events/user-feedback/user-feedback-example-widget/` +- For the SDKs that use the JS widget, add the code sample to`/src/platform-includes/user-feedback/user-feedback-example-widget/` ### Scopes diff --git a/src/docs/product/alerts/notifications/index.mdx b/src/docs/product/alerts/notifications/index.mdx index 9bc1fa6771d33..46ac5ac34fb5e 100644 --- a/src/docs/product/alerts/notifications/index.mdx +++ b/src/docs/product/alerts/notifications/index.mdx @@ -29,7 +29,7 @@ Sentry sends workflow notifications to let you know about [issue state](/product - **Regressions**: A regression happens when the state of an issue changes from Resolved back to Unresolved. An email is sent to all project team members. - **Comments**: When a team member adds a new comment in the “Activity” tab of the detail page for the issue. - **Assignment**: When an issue is assigned or unassigned. -- **User Feedback**: When an issue has new user feedback. +- **User Feedback**: When an issue has new user feedback. - **Event Processing Problems**: When there's a problem with processing error events you've sent to Sentry. You receive workflow notifications when you subscribe to an issue in one of the following ways by: diff --git a/src/docs/product/issues/issue-details/index.mdx b/src/docs/product/issues/issue-details/index.mdx index 134189265e107..a9f29820aa0c7 100644 --- a/src/docs/product/issues/issue-details/index.mdx +++ b/src/docs/product/issues/issue-details/index.mdx @@ -91,7 +91,7 @@ If you’ve enabled [Session Replay](/product/session-replay/), you’ll see a r This page displays the "Details" tab when it first opens, but several other tabs are available depending on issue category: - **Activity** - A history of activity for the event where team members can share comments. -- **User Feedback** - Any feedback collected from users through the SDK's user feedback. +- **User Feedback** - Any feedback collected from users through the SDK's user feedback. - **Attachments** - Stored additional files, such as config, log or screenshot files that are related to the error event. - **Tags** - More detailed information about the tags across all the events included in the issue. - **All Events** - A list of all the error events included in the issue. diff --git a/src/docs/product/user-feedback/index.mdx b/src/docs/product/user-feedback/index.mdx index 33b29b8e6913c..9f36442412114 100644 --- a/src/docs/product/user-feedback/index.mdx +++ b/src/docs/product/user-feedback/index.mdx @@ -22,4 +22,4 @@ User feedback is only applicable for [error issues](/product/issues/issue-detail ## Set Up -There are two ways to collect user feedback in Sentry: via [a web API](https://docs.sentry.io/api/projects/submit-user-feedback/), or by using an embeddable widget or API in the SDK itself, which you can [configure](/platform-redirect/?next=/enriching-events/user-feedback/) to collect feedback when a user experiences an error. +There are two ways to collect user feedback in Sentry: via [a web API](https://docs.sentry.io/api/projects/submit-user-feedback/), or by using an embeddable widget or API in the SDK itself, which you can [configure](/platform-redirect/?next=/user-feedback/) to collect feedback when a user experiences an error. diff --git a/src/docs/product/user-feedback/setup.mdx b/src/docs/product/user-feedback/setup.mdx new file mode 100644 index 0000000000000..dec0fb94da09e --- /dev/null +++ b/src/docs/product/user-feedback/setup.mdx @@ -0,0 +1,54 @@ +--- +title: "Set Up" +sidebar_order: 12 +description: "Get started with Sentry's User Feedback, which allows you to collect feedback from your users." +--- + + + +With User Feedback, you can collect feedback from your users via two methods: a Feedback Widget that can be displayed anywhere in your web application and/or a Crash-Report Modal that appears when your users are experiencing crashes. + +To get instructions for how to set it up and start collecting feedback, click a link for one of the supported SDKs below. + +## Supported SDKs for User Feedback Widget + +The User Feedback widget can be used on all browser-based applications. This includes static websites, single-page-applications, and also server-side-rendered, including frameworks such as: +[Django](/platforms/python/integrations/django/), +[Spring](/platforms/java/guides/spring-boot/), +[ASP.NET](/platforms/dotnet/guides/aspnetcore/), +[Laravel](/platforms/php/guides/laravel/), +[Express](/platforms/node/guides/express/) and +[Rails](/platforms/ruby/guides/rails/). +If you don't use `npm` or `yarn`, you can use [our Loader `script` tag](/platforms/javascript/install/loader/) on your main HTML template. + +The Sentry SDK that injects the Feedback widget runs on the client's browser, and it’s built-in to `@sentry/browser` and our browser framework SDKs: + +- [Vanilla JavaScript](/platforms/javascript/user-feedback/) +- [Angular](/platforms/javascript/guides/angular/user-feedback/) +- [Astro](/platforms/javascript/guides/astro/user-feedback/) +- [Capacitor](/platforms/javascript/guides/capacitor/user-feedback/) +- [Electron](/platforms/javascript/guides/electron/user-feedback/) +- [Ember](/platforms/javascript/guides/ember/user-feedback/) +- [Gatsby](/platforms/javascript/guides/gatsby/user-feedback/) +- [Next.js](/platforms/javascript/guides/nextjs/user-feedback/) +- [React](/platforms/javascript/guides/react/user-feedback/) +- [Remix](/platforms/javascript/guides/remix/user-feedback/) +- [Svelte](/platforms/javascript/guides/svelte/user-feedback/) +- [SvelteKit](/platforms/javascript/guides/sveltekit/user-feedback/) +- [Vue](/platforms/javascript/guides/vue/user-feedback/) + +## Supported SDKs for Crash-Report Modal + +For non-browser-based applications, we provide an API to send Crash Reports. This allows you to connect your own user interface with Sentry's Crash-Reports. The following SDKs have support for the Crash-Report API: + +- [Android](/platforms/android/user-feedback/) +- [Apple](/platforms/apple/user-feedback/) +- [Dart](/platforms/dart/user-feedback/) +- [.NET](/platforms/dotnet/user-feedback/) +- [Flutter](/platforms/flutter/user-feedback/) +- [Java](/platforms/java/user-feedback/) +- [Kotlin](/platforms/kotlin-multiplatform/user-feedback/) +- [Node.JS](/platforms/node/user-feedback/) +- [React Native](/platforms/react-native/user-feedback/) +- [Unreal](/platforms/unreal/user-feedback/) +- [Unity](/platforms/unity/user-feedback/) diff --git a/src/docs/product/user-feedback/user-feedback-widget.png b/src/docs/product/user-feedback/user-feedback-widget.png new file mode 100644 index 0000000000000..b14df7bad8d7b Binary files /dev/null and b/src/docs/product/user-feedback/user-feedback-widget.png differ diff --git a/src/includes/feature-stage-beta-user-feedback.mdx b/src/includes/feature-stage-beta-user-feedback.mdx new file mode 100644 index 0000000000000..bd269a8fe24c3 --- /dev/null +++ b/src/includes/feature-stage-beta-user-feedback.mdx @@ -0,0 +1,5 @@ + + +Sentry released a new version of User Feedback that supports collecting feedback at any time from your users, without requiring an error event. It is currently in open beta and subject to change. + + diff --git a/src/platform-includes/getting-started-primer/apple.macos.mdx b/src/platform-includes/getting-started-primer/apple.macos.mdx index b4cb64f029f25..940ae79f13403 100644 --- a/src/platform-includes/getting-started-primer/apple.macos.mdx +++ b/src/platform-includes/getting-started-primer/apple.macos.mdx @@ -20,5 +20,5 @@ - [Release health](/product/releases/health/) tracks crash free users and sessions - [Attachments](/platforms/apple/enriching-events/attachments/) enrich your event by storing additional files, such as config or log files -- [User Feedback](/platforms/apple/enriching-events/user-feedback/) provides the ability to collect user information when an event occurs +- [User Feedback](/platforms/apple/user-feedback/) provides the ability to collect user information when an event occurs - [Source Context](/platforms/apple/data-management/debug-files/source-context/) shows snippets of code around the location of stack frames diff --git a/src/platform-includes/getting-started-primer/apple.watchos.mdx b/src/platform-includes/getting-started-primer/apple.watchos.mdx index eb8d2d9f26fa7..3378aafda5e9a 100644 --- a/src/platform-includes/getting-started-primer/apple.watchos.mdx +++ b/src/platform-includes/getting-started-primer/apple.watchos.mdx @@ -4,4 +4,4 @@ - Events [enriched](/platforms/apple/enriching-events/context/) with device data - Offline caching when a device is unable to connect; we send a report once we receive another event - [Attachments](/platforms/apple/enriching-events/attachments/) enrich your event by storing additional files, such as config or log files -- [User Feedback](/platforms/apple/enriching-events/user-feedback/) provides the ability to collect user information when an event occurs +- [User Feedback](/platforms/apple/user-feedback/) provides the ability to collect user information when an event occurs diff --git a/src/platform-includes/getting-started-primer/basic-features/apple.mdx b/src/platform-includes/getting-started-primer/basic-features/apple.mdx index 32666d510d831..944d4420a8fa2 100644 --- a/src/platform-includes/getting-started-primer/basic-features/apple.mdx +++ b/src/platform-includes/getting-started-primer/basic-features/apple.mdx @@ -34,6 +34,6 @@ User Interaction transactions for UI clicks - [Attachments](/platforms/apple/enriching-events/attachments/) enrich your event by storing additional files, such as config or log files -- [User Feedback](/platforms/apple/enriching-events/user-feedback/) provides the ability to collect user information when an event occurs +- [User Feedback](/platforms/apple/user-feedback/) provides the ability to collect user information when an event occurs - [Screenshot attachments for errors](/platforms/apple/guides/ios/enriching-events/screenshots/) - [Source Context](/platforms/apple/data-management/debug-files/source-context/) shows snippets of code around the location of stack frames diff --git a/src/platform-includes/getting-started-primer/dart.mdx b/src/platform-includes/getting-started-primer/dart.mdx index e2c1929d23282..6c6984b58d32d 100644 --- a/src/platform-includes/getting-started-primer/dart.mdx +++ b/src/platform-includes/getting-started-primer/dart.mdx @@ -11,7 +11,7 @@ Sentry's Dart SDK enables automatic reporting of errors, messages, and exception - by the [Logging Integration](/platforms/dart/integrations/logging) - by the [Dio Integration](/platforms/dart/integrations/dio/) - [Attachments](/platforms/dart/enriching-events/attachments/) enrich your event by storing additional files, such as config or log files. -- [User Feedback](/platforms/dart/enriching-events/user-feedback/) provides the ability to collect user information when an event occurs. +- [User Feedback](/platforms/dart/user-feedback/) provides the ability to collect user information when an event occurs. - [Performance Monitoring](/product/performance/) creates transactions for: - [HTTP requests](/platforms/dart/integrations/http-integration/#performance-monitoring-for-http-requests) - [Dio HTTP library](/platforms/dart/integrations/dio/#performance-monitoring-for-http-requests) diff --git a/src/platform-includes/getting-started-primer/dotnet.mdx b/src/platform-includes/getting-started-primer/dotnet.mdx index 2217c7a1bfa8d..6afa2736c254b 100644 --- a/src/platform-includes/getting-started-primer/dotnet.mdx +++ b/src/platform-includes/getting-started-primer/dotnet.mdx @@ -11,10 +11,8 @@ This SDK is compatible with th - [Release health](/product/releases/health/) tracks crash free users and sessions - Attachments enrich your event by storing additional files, such as config or log files -- - User Feedback - provides the ability to collect user information when an event - occurs +- User Feedback provides the ability + to collect user information when an event occurs - [Performance Monitoring](/product/performance/) creates transactions to track the performance of your application - Automatically captures errors including: unhandled exceptions and unobserved task exceptions - Events enriched with device data diff --git a/src/platform-includes/getting-started-primer/flutter.mdx b/src/platform-includes/getting-started-primer/flutter.mdx index 7d7c937066f7e..2ad267288653f 100644 --- a/src/platform-includes/getting-started-primer/flutter.mdx +++ b/src/platform-includes/getting-started-primer/flutter.mdx @@ -24,7 +24,7 @@ Features: - by the [User Interaction Instrumentation](/platforms/flutter/integrations/user-interaction-instrumentation/) - [Release health](/product/releases/health/) tracks crash free users and sessions - [Attachments](/platforms/flutter/enriching-events/attachments/) enrich your event by storing additional files, such as config or log files. -- [User Feedback](/platforms/flutter/enriching-events/user-feedback/) provides the ability to collect user information when an event occurs. +- [User Feedback](/platforms/flutter/user-feedback/) provides the ability to collect user information when an event occurs. - [Performance Monitoring](/product/performance/) creates transactions for: - [Routing Instrumentation](/platforms/flutter/performance/instrumentation/automatic-instrumentation/#routing-instrumentation) - [User Interaction Instrumentation](/platforms/flutter/integrations/user-interaction-instrumentation/) diff --git a/src/platform-includes/getting-started-primer/react-native.mdx b/src/platform-includes/getting-started-primer/react-native.mdx index 0104620a776a6..5b1f53d84968b 100644 --- a/src/platform-includes/getting-started-primer/react-native.mdx +++ b/src/platform-includes/getting-started-primer/react-native.mdx @@ -29,5 +29,5 @@ Features: - [Hermes support](/platforms/react-native/manual-setup/hermes/) - [Expo package](https://docs.expo.io/guides/using-sentry/) maintained by the Expo team - [Attachments](/platforms/react-native/enriching-events/attachments/) enrich your event by storing additional files, such as config or log files. -- [User Feedback](/platforms/react-native/enriching-events/user-feedback/) provides the ability to collect user information when an event occurs. +- [User Feedback](/platforms/react-native/user-feedback/) provides the ability to collect user information when an event occurs. - [View Hierarchy](/platforms/react-native/enriching-events/viewhierarchy/) shows the structure of native components at the time an error occurred. diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onclose/_default.mdx b/src/platform-includes/user-feedback/example-widget-onclose/_default.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onclose/_default.mdx rename to src/platform-includes/user-feedback/example-widget-onclose/_default.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onclose/javascript.electron.mdx b/src/platform-includes/user-feedback/example-widget-onclose/javascript.electron.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onclose/javascript.electron.mdx rename to src/platform-includes/user-feedback/example-widget-onclose/javascript.electron.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onclose/javascript.mdx b/src/platform-includes/user-feedback/example-widget-onclose/javascript.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onclose/javascript.mdx rename to src/platform-includes/user-feedback/example-widget-onclose/javascript.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onclose/python.django.mdx b/src/platform-includes/user-feedback/example-widget-onclose/python.django.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onclose/python.django.mdx rename to src/platform-includes/user-feedback/example-widget-onclose/python.django.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onclose/python.flask.mdx b/src/platform-includes/user-feedback/example-widget-onclose/python.flask.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onclose/python.flask.mdx rename to src/platform-includes/user-feedback/example-widget-onclose/python.flask.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onload/_default.mdx b/src/platform-includes/user-feedback/example-widget-onload/_default.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onload/_default.mdx rename to src/platform-includes/user-feedback/example-widget-onload/_default.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onload/javascript.electron.mdx b/src/platform-includes/user-feedback/example-widget-onload/javascript.electron.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onload/javascript.electron.mdx rename to src/platform-includes/user-feedback/example-widget-onload/javascript.electron.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onload/javascript.mdx b/src/platform-includes/user-feedback/example-widget-onload/javascript.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onload/javascript.mdx rename to src/platform-includes/user-feedback/example-widget-onload/javascript.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onload/python.django.mdx b/src/platform-includes/user-feedback/example-widget-onload/python.django.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onload/python.django.mdx rename to src/platform-includes/user-feedback/example-widget-onload/python.django.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget-onload/python.flask.mdx b/src/platform-includes/user-feedback/example-widget-onload/python.flask.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget-onload/python.flask.mdx rename to src/platform-includes/user-feedback/example-widget-onload/python.flask.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/_default.mdx b/src/platform-includes/user-feedback/example-widget/_default.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/_default.mdx rename to src/platform-includes/user-feedback/example-widget/_default.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/dotnet.aspnet.mdx b/src/platform-includes/user-feedback/example-widget/dotnet.aspnet.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/dotnet.aspnet.mdx rename to src/platform-includes/user-feedback/example-widget/dotnet.aspnet.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/dotnet.aspnetcore.mdx b/src/platform-includes/user-feedback/example-widget/dotnet.aspnetcore.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/dotnet.aspnetcore.mdx rename to src/platform-includes/user-feedback/example-widget/dotnet.aspnetcore.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/dotnet.mdx b/src/platform-includes/user-feedback/example-widget/dotnet.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/dotnet.mdx rename to src/platform-includes/user-feedback/example-widget/dotnet.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/javascript.electron.mdx b/src/platform-includes/user-feedback/example-widget/javascript.electron.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/javascript.electron.mdx rename to src/platform-includes/user-feedback/example-widget/javascript.electron.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx b/src/platform-includes/user-feedback/example-widget/javascript.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/javascript.mdx rename to src/platform-includes/user-feedback/example-widget/javascript.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/php.laravel.mdx b/src/platform-includes/user-feedback/example-widget/php.laravel.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/php.laravel.mdx rename to src/platform-includes/user-feedback/example-widget/php.laravel.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/php.mdx b/src/platform-includes/user-feedback/example-widget/php.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/php.mdx rename to src/platform-includes/user-feedback/example-widget/php.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/python.django.mdx b/src/platform-includes/user-feedback/example-widget/python.django.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/python.django.mdx rename to src/platform-includes/user-feedback/example-widget/python.django.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/python.flask.mdx b/src/platform-includes/user-feedback/example-widget/python.flask.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/python.flask.mdx rename to src/platform-includes/user-feedback/example-widget/python.flask.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/example-widget/ruby.rails.mdx b/src/platform-includes/user-feedback/example-widget/ruby.rails.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/example-widget/ruby.rails.mdx rename to src/platform-includes/user-feedback/example-widget/ruby.rails.mdx diff --git a/src/platform-includes/user-feedback/install/javascript.angular.mdx b/src/platform-includes/user-feedback/install/javascript.angular.mdx new file mode 100644 index 0000000000000..96105f56c2a66 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.angular.mdx @@ -0,0 +1,24 @@ +```bash {tabTitle:npm} +# Angular 12 and newer: +npm install --save @sentry/angular-ivy + +# Angular 10 and 11: +npm install --save @sentry/angular +``` + +```bash {tabTitle:Yarn} +# Angular 12 and newer: +yarn add @sentry/angular-ivy + +# Angular 10 and 11: +yarn add @sentry/angular +``` + +### Angular Version Compatibility + +Because of the way Angular libraries are compiled, you need to use a specific version of the Sentry SDK for each corresponding version of Angular as shown below: + +| Angular version | Recommended Sentry SDK | +| --------------- | ---------------------- | +| 12 and newer | `@sentry/angular-ivy` | +| 10, 11 | `@sentry/angular` | diff --git a/src/platform-includes/user-feedback/install/javascript.astro.mdx b/src/platform-includes/user-feedback/install/javascript.astro.mdx new file mode 100644 index 0000000000000..5dee743547a7e --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.astro.mdx @@ -0,0 +1,11 @@ +The User Feedback integration is already included with the Sentry Astro SDK. + +```bash {tabTitle:npx} +npx astro add @sentry/astro +``` + + + +If the Astro CLI setup doesn't work for you, you can also set up the SDK manually. + + diff --git a/src/platform-includes/user-feedback/install/javascript.ember.mdx b/src/platform-includes/user-feedback/install/javascript.ember.mdx new file mode 100644 index 0000000000000..89515011d2da4 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.ember.mdx @@ -0,0 +1,3 @@ +```bash {tabTitle:ember-cli} +ember install @sentry/ember +``` diff --git a/src/platform-includes/user-feedback/install/javascript.gatsby.mdx b/src/platform-includes/user-feedback/install/javascript.gatsby.mdx new file mode 100644 index 0000000000000..70bdd0f763799 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.gatsby.mdx @@ -0,0 +1,9 @@ +The User Feedback integration is **already included** with the Gatsby SDK package. + +```bash {tabTitle: npm} +npm install --save @sentry/gatsby +``` + +```bash {tabTitle: Yarn} +yarn add @sentry/gatsby +``` diff --git a/src/platform-includes/user-feedback/install/javascript.mdx b/src/platform-includes/user-feedback/install/javascript.mdx new file mode 100644 index 0000000000000..70bbc01be6417 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.mdx @@ -0,0 +1,25 @@ +The User Feedback integration is **already included** in your browser or framework SDK NPM packages. If you're using CDN bundles instead of NPM packages, you need to load the User Feedback integration CDN bundle in addition to your browser bundle: + +```bash {tabTitle: npm} +npm install --save @sentry/browser +``` + +```bash {tabTitle: Yarn} +yarn add @sentry/browser +``` + +```html {tabTitle: CDN} + + + + + +``` diff --git a/src/platform-includes/user-feedback/install/javascript.nextjs.mdx b/src/platform-includes/user-feedback/install/javascript.nextjs.mdx new file mode 100644 index 0000000000000..ac604e115e9f6 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.nextjs.mdx @@ -0,0 +1,5 @@ +The User Feedback integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard: + +```bash +npx @sentry/wizard@latest -i nextjs +``` diff --git a/src/platform-includes/user-feedback/install/javascript.react.mdx b/src/platform-includes/user-feedback/install/javascript.react.mdx new file mode 100644 index 0000000000000..4b5943f52be48 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.react.mdx @@ -0,0 +1,9 @@ +The User Feedback integration is **already included** with the React SDK package. + +```bash {tabTitle:npm} +npm install --save @sentry/react +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/react +``` diff --git a/src/platform-includes/user-feedback/install/javascript.remix.mdx b/src/platform-includes/user-feedback/install/javascript.remix.mdx new file mode 100644 index 0000000000000..fa475466d15c6 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.remix.mdx @@ -0,0 +1,23 @@ +The User Feedback integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard: + +```bash +npx @sentry/wizard@latest -i remix +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). +- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`. +- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`). +- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application. + +If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features. + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. +You can also manually capture errors. + + + +If the wizard setup isn't working for you, you can set up the SDK manually. + + diff --git a/src/platform-includes/user-feedback/install/javascript.svelte.mdx b/src/platform-includes/user-feedback/install/javascript.svelte.mdx new file mode 100644 index 0000000000000..b66865a1825c1 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.svelte.mdx @@ -0,0 +1,9 @@ +The User Feedback integration is **already included** with the Svelte SDK package. + +```bash {tabTitle:npm} +npm install --save @sentry/svelte +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/svelte +``` diff --git a/src/platform-includes/user-feedback/install/javascript.sveltekit.mdx b/src/platform-includes/user-feedback/install/javascript.sveltekit.mdx new file mode 100644 index 0000000000000..a301858cffd48 --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.sveltekit.mdx @@ -0,0 +1,22 @@ +The User Feedback integration is already included with the Sentry SDK. We recommend installing the SDK by running our installation wizard in the root directory of your project: + +```bash +npx @sentry/wizard@latest -i sveltekit +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create or update SvelteKit files with the default Sentry configuration: + - `hooks.(client|server).js` to initialize the SDK and instrument [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) + - `vite.config.js` to add source maps upload and auto-instrumentation via Vite plugins. +- create a `.sentryclirc` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) +- add an example page to your app to verify your Sentry setup + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. +You can also manually capture errors. + + + +If the setup through the wizard doesn't work for you, you can also set up the SDK manually. + + diff --git a/src/platform-includes/user-feedback/install/javascript.vue.mdx b/src/platform-includes/user-feedback/install/javascript.vue.mdx new file mode 100644 index 0000000000000..6fdca7373b49b --- /dev/null +++ b/src/platform-includes/user-feedback/install/javascript.vue.mdx @@ -0,0 +1,9 @@ +The User Feedback integration is **already included** with the Vue SDK package. + +```bash {tabTitle:npm} +npm install --save @sentry/vue +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/vue +``` diff --git a/src/platform-includes/user-feedback/pre-requisites/javascript.mdx b/src/platform-includes/user-feedback/pre-requisites/javascript.mdx new file mode 100644 index 0000000000000..c12471b90131f --- /dev/null +++ b/src/platform-includes/user-feedback/pre-requisites/javascript.mdx @@ -0,0 +1,3 @@ +For the User Feedback integration to work, you must have the [Sentry browser SDK package](https://www.npmjs.com/package/@sentry/browser), or an equivalent framework SDK (for example, [@sentry/react](https://www.npmjs.com/package/@sentry/react)) installed. The minimum version required for the SDK is [7.85.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.85.0). If you're on an older version of the SDK, please check this [migration document](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md). + +User Feedback requires browsers that support [Shadow DOM](https://caniuse.com/shadowdomv1). diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/android.mdx b/src/platform-includes/user-feedback/sdk-api-example/android.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/android.mdx rename to src/platform-includes/user-feedback/sdk-api-example/android.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/apple.mdx b/src/platform-includes/user-feedback/sdk-api-example/apple.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/apple.mdx rename to src/platform-includes/user-feedback/sdk-api-example/apple.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/dart.mdx b/src/platform-includes/user-feedback/sdk-api-example/dart.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/dart.mdx rename to src/platform-includes/user-feedback/sdk-api-example/dart.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/java.mdx b/src/platform-includes/user-feedback/sdk-api-example/java.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/java.mdx rename to src/platform-includes/user-feedback/sdk-api-example/java.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/javascript.mdx b/src/platform-includes/user-feedback/sdk-api-example/javascript.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/javascript.mdx rename to src/platform-includes/user-feedback/sdk-api-example/javascript.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/kotlin-multiplatform.mdx b/src/platform-includes/user-feedback/sdk-api-example/kotlin-multiplatform.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/kotlin-multiplatform.mdx rename to src/platform-includes/user-feedback/sdk-api-example/kotlin-multiplatform.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/react-native.mdx b/src/platform-includes/user-feedback/sdk-api-example/react-native.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/react-native.mdx rename to src/platform-includes/user-feedback/sdk-api-example/react-native.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/unreal.mdx b/src/platform-includes/user-feedback/sdk-api-example/unreal.mdx similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/unreal.mdx rename to src/platform-includes/user-feedback/sdk-api-example/unreal.mdx diff --git a/src/platform-includes/enriching-events/user-feedback/sdk-api-example/unreal_user_feedback.png b/src/platform-includes/user-feedback/sdk-api-example/unreal_user_feedback.png similarity index 100% rename from src/platform-includes/enriching-events/user-feedback/sdk-api-example/unreal_user_feedback.png rename to src/platform-includes/user-feedback/sdk-api-example/unreal_user_feedback.png diff --git a/src/platform-includes/user-feedback/setup/javascript.angular.mdx b/src/platform-includes/user-feedback/setup/javascript.angular.mdx new file mode 100644 index 0000000000000..15355a250fe8c --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.angular.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/angular-ivy"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.astro.mdx b/src/platform-includes/user-feedback/setup/javascript.astro.mdx new file mode 100644 index 0000000000000..6795472ab57cf --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.astro.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/astro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.ember.mdx b/src/platform-includes/user-feedback/setup/javascript.ember.mdx new file mode 100644 index 0000000000000..bea037627a852 --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.ember.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/ember"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.gatsby.mdx b/src/platform-includes/user-feedback/setup/javascript.gatsby.mdx new file mode 100644 index 0000000000000..428953ca3cb74 --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.gatsby.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/gatsby"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.mdx b/src/platform-includes/user-feedback/setup/javascript.mdx new file mode 100644 index 0000000000000..55e5118044f69 --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.mdx @@ -0,0 +1,15 @@ +```javascript +// import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser +import * as Sentry from "@sentry/browser"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.nextjs.mdx b/src/platform-includes/user-feedback/setup/javascript.nextjs.mdx new file mode 100644 index 0000000000000..79a55e0fe508b --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.nextjs.mdx @@ -0,0 +1,16 @@ +On your client-side NextJS app, add: + +```javascript +import * as Sentry from "@sentry/nextjs"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.react.mdx b/src/platform-includes/user-feedback/setup/javascript.react.mdx new file mode 100644 index 0000000000000..216aabde9b1dc --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.react.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/react"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.remix.mdx b/src/platform-includes/user-feedback/setup/javascript.remix.mdx new file mode 100644 index 0000000000000..ee82921eeac97 --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.remix.mdx @@ -0,0 +1,16 @@ +On your client-side Remix app, add: + +```javascript +import * as Sentry from "@sentry/remix"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.svelte.mdx b/src/platform-includes/user-feedback/setup/javascript.svelte.mdx new file mode 100644 index 0000000000000..1c6329de9f55b --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.svelte.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/svelte"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.sveltekit.mdx b/src/platform-includes/user-feedback/setup/javascript.sveltekit.mdx new file mode 100644 index 0000000000000..6b871f18db884 --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.sveltekit.mdx @@ -0,0 +1,16 @@ +On your client-side SvelteKit app, add: + +```javascript +import * as Sentry from "@sentry/sveltekit"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platform-includes/user-feedback/setup/javascript.vue.mdx b/src/platform-includes/user-feedback/setup/javascript.vue.mdx new file mode 100644 index 0000000000000..09d308076861a --- /dev/null +++ b/src/platform-includes/user-feedback/setup/javascript.vue.mdx @@ -0,0 +1,14 @@ +```javascript +import * as Sentry from "@sentry/vue"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + new Sentry.Feedback({ + // Additional SDK configuration goes in here, for example: + colorScheme: "light", + }), + ], +}); +``` diff --git a/src/platforms/common/enriching-events/user-feedback.mdx b/src/platforms/common/enriching-events/user-feedback.mdx deleted file mode 100644 index 047a17307a025..0000000000000 --- a/src/platforms/common/enriching-events/user-feedback.mdx +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: "User Feedback" -sidebar_order: 105 -redirect_from: - - /learn/user-feedback/ -description: "Learn more about collecting user feedback when an event occurs. Sentry pairs the feedback with the original event, giving you additional insight into issues." ---- - -When a user experiences an error, Sentry provides the ability to collect additional feedback. You can collect feedback according to the method supported by the SDK. - - - -While this feature isn't currently supported for Ruby or most of its frameworks, it is supported for [Rails](/platforms/ruby/guides/rails/enriching-events/user-feedback/). - - - - - -**The user feedback feature is not currently supported for this SDK.** - - - - - -## User Feedback API - -The user feedback API provides the ability to collect user information when an event occurs. You can use the same programming language you have in your app to send user feedback. In this case, the SDK creates the HTTP request so you don't have to deal with posting data via HTTP. - - - -Sentry pairs the feedback with the original event, giving you additional insight into issues. Sentry needs the `eventId` to be able to associate the user feedback to the corresponding event. For example, to get the `eventId`, you can use or the return value of the method capturing an event. - - - - - - - - - -## Use the .NET SDK - - - -User Feedback for **[ASP.NET](/platforms/dotnet/guides/aspnet/enriching-events/user-feedback/#integration)** or **[ASP.NET Core](/platforms/dotnet/guides/aspnetcore/enriching-events/user-feedback/#integration)** supply integrations specific to supporting those SDKs. - - - -You can create a form to collect the user input in your preferred framework, and use the SDK's API to send the information to Sentry. You can also use the widget, as described below. If you'd prefer an alternative to the widget or do not have a JavaScript frontend, you can use this API or a [Web API](/api/projects/submit-user-feedback/). - -```csharp {tabTitle:C#} -using Sentry; - -var eventId = SentrySdk.CaptureMessage("An event that will receive user feedback."); - -SentrySdk.CaptureUserFeedback(eventId, "user@example.com", "It broke.", "The User"); -``` - -```fsharp {tabTitle:F#} -open Sentry - -let eventId = SentrySdk.CaptureMessage("An event that will receive user feedback.") - -SentrySdk.CaptureUserFeedback(eventId, "user@example.com", "It broke.", "The User") -``` - - - - - -## Embeddable JavaScript Widget - -Our embeddable JavaScript widget is useful when you may typically render a plain error page (the classic `500.html`) on your website. - -To collect feedback, the widget requests and collects the user's name, email address, and a description of what occurred. When feedback is provided, Sentry pairs the feedback with the original event, giving you additional insights into issues. - -The screenshot below provides an example of the User Feedback widget, though yours may differ depending on your customization: - -![An example of a user feedback widget with text boxes for user name, email, and additional details about the break.](user_feedback_widget.png) - -### Integration - -The widget authenticates with your public DSN, then passes in the Event ID that was generated on your backend. - - - -## Customizing the Widget - -You can customize the widget to your organization's needs, especially for localization purposes. All options can be passed through the `showReportDialog` call. - -An override for Sentry’s automatic language detection (e.g. `lang=de`) - -| Param | Default | -| ---------------- | ------------------------------------------------------------------------------------------------- | -| `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 | -| `onClose` | n/a | - - - -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: - - - -The optional callback `onClose` will be called when users close the widget. You can use this to run custom logic, for example to reload the page: - - - - - -## User Feedback API - -If you'd prefer an alternative to the widget or do not have a JavaScript frontend, you can use the [User Feedback API](/api/projects/submit-user-feedback/). - - - - - -## Embeddable JavaScript Widget - -Our embeddable JavaScript widget is useful when you may typically render a plain error page (the classic `500.html`) on your website. - -To collect feedback, the widget requests and collects the user's name, email address, and a description of what occurred. When feedback is provided, Sentry pairs the feedback with the original event, giving you additional insights into issues. - -The screenshot below provides an example of the User Feedback widget, though yours may differ depending on your customization: - -![An example of a user feedback widget with text boxes for user name, email, and additional details about the break.](user_feedback_widget.png) - -### Integration - -The widget authenticates with your public DSN, then passes in the Event ID that was generated on your backend. - - - -## Customizing the Widget - -You can customize the widget to your organization's needs, especially for localization purposes. All options can be passed through the `showReportDialog` call. - -An override for Sentry’s automatic language detection (e.g. `lang=de`) - -| Param | Default | -| ---------------- | ------------------------------------------------------------------------------------------------- | -| `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** | - -## User Feedback API - -If you'd prefer an alternative to the widget or do not have a JavaScript frontend, you can use the [User Feedback API](/api/projects/submit-user-feedback/). - - diff --git a/src/platforms/common/user-feedback/configuration.mdx b/src/platforms/common/user-feedback/configuration.mdx new file mode 100644 index 0000000000000..183b3ab233727 --- /dev/null +++ b/src/platforms/common/user-feedback/configuration.mdx @@ -0,0 +1,274 @@ +--- +title: Configuration +sidebar_order: 6100 +description: "Learn about the general User Feedback configuration fields." +--- + + + +## 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). + +![An image showing the available customization options for the User Feedback Widget](user-feedback-widget-customization.png) + +### General + +The following options can be configured as options for the integration in `new Feedback({})`: + +| 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.openDialog()` 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"` | The color theme to use. `"system"` will follow your OS colorscheme. | + +### User and Form + +| key | type | default | description | +| ----------------- | ------------------------ | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| `showName` | `boolean` | `true` | Displays the name field on the Feedback form, however will still capture the name (if available) from Sentry SDK context. | +| `showEmail` | `boolean` | `true` | Displays the email field on the Feedback form, however will still capture the email (if available) from Sentry SDK context. | +| `isNameRequired` | `boolean` | `false` | Requires the name field on the Feedback form to be filled in. | +| `isEmailRequired` | `boolean` | `false` | Requires the email field on the Feedback form to be filled in. | +| `useSentryUser` | `Record` | `{ email: 'email', name: 'username'}` | Map of the `email` and `name` fields to the corresponding Sentry SDK user fields that were called with `Sentry.setUser`. | + +By default, the Feedback integration will attempt to fill in the name/email fields if you have set a user context via [`Sentry.setUser`](https://docs.sentry.io/platforms/javascript/enriching-events/identify-user/). By default, it expects the email and name fields to be `email` and `username`. Below is an example configuration with non-default user fields. + +```javascript +Sentry.setUser({ + email: "foo@example.com", + fullName: "Jane Doe", +}); + +new Feedback({ + useSentryUser: { + email: "email", + name: "fullName", + }, +}); +``` + +### Text Customization + +Most text that you see in the default Feedback widget can be customized. + +| key | default | description | +| -------------------- | -------------------------------------- | ------------------------------------------------------------------ | +| `buttonLabel` | `Report a Bug` | The label of the injected button. | +| `submitButtonLabel` | `Send Bug Report` | The label of the submit button used in the feedback form. | +| `cancelButtonLabel` | `Cancel` | The label of the cancel button used in the feedback form. | +| `formTitle` | `Report a Bug` | The title at the top of the feedback form. | +| `nameLabel` | `Name` | The label of the name input field. | +| `namePlaceholder` | `Your Name` | The placeholder for the name input field. | +| `emailLabel` | `Email` | The label of the email input field. | +| `emailPlaceholder` | `your.email@example.org` | The placeholder for the email input field. | +| `messageLabel` | `Description` | The label for the feedback description input field. | +| `messagePlaceholder` | `What's the bug? What did you expect?` | The placeholder for the feedback description input field. | +| `successMessageText` | `Thank you for your report!` | The message to be displayed after a succesful feedback submission. | + +Example of customization: + +```javascript +new Feedback({ + buttonLabel: "Feedback", + submitButtonLabel: "Send Feedback", + formTitle: "Send Feedback", +}); +``` + +### Theme Customization + +Colors can be customized via the Feedback class constructor or by defining CSS variables on the injected button. If you use the default button it will have a property `id="sentry-feedback`, meaning you can use the `#sentry-feedback` selector to define CSS variables to override. + +| key | css variable | light | dark | description | +| ----------------------- | --------------------------- | ----------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------- | +| `background` | `--background` | `#ffffff` | `#29232f` | Background color of the widget (injected button and form) | +| `backgroundHover` | `--background-hover` | `#f6f6f7` | `#352f3b` | Background color of the injected button when in a hover state | +| `foreground` | `--foreground` | `#2b2233` | `#ebe6ef` | Foreground color, e.g. text color | +| `error` | `--error` | `#df3338` | `#f55459` | Color used for error related components (e.g. text color when there was an error submitting feedback) | +| `success` | `--success` | `#268d75` | `#2da98c` | Color used for success-related components (e.g. text color when feedback is submitted successfully) | +| `border` | `--border` | `1.5px solid rgba(41, 35, 47, 0.13)` | `1.5px solid rgba(235, 230, 239, 0.15)` | The border style used for the widget (injected button and form) | +| `boxShadow` | `--box-shadow` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | `0px 4px 24px 0px rgba(43, 34, 51, 0.12)` | The box shadow style used for the widget (injected button and form) | +| `submitBackground` | `--submit-background` | `rgba(88, 74, 192, 1)` | `rgba(88, 74, 192, 1)` | Background color for the submit button | +| `submitBackgroundHover` | `--submit-background-hover` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Background color when hovering over the submit button | +| `submitBorder` | `--submit-border` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Border style for the submit button | +| `submitOutlineFocus` | `--submit-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for the submit button, in the focused state | +| `submitForeground` | `--submit-foreground` | `#ffffff` | `#ffffff` | Foreground color for the submit button | +| `submitForegroundHover` | `--submit-foreground-hover` | `#ffffff` | `#ffffff` | Foreground color for the submit button when hovering | +| `cancelBackground` | `--cancel-background` | `transparent` | `transparent` | Background color for the cancel button | +| `cancelBackgroundHover` | `--cancel-background-hover` | `var(--background-hover)` | `var(--background-hover)` | Background color when hovering over the cancel button | +| `cancelBorder` | `--cancel-border` | `var(--border)` | `var(--border)` | Border style for the cancel button | +| `cancelOutlineFocus` | `--cancel-outline-focus` | `var(--input-outline-focus)` | `var(--input-outline-focus)` | Outline color for the cancel button, in the focused state | +| `cancelForeground` | `--cancel-foreground` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button | +| `cancelForegroundHover` | `--cancel-foreground-hover` | `var(--foreground)` | `var(--foreground)` | Foreground color for the cancel button when hovering | +| `inputBackground` | `--input-background` | `inherit` | `inherit` | Background color for form inputs | +| `inputForeground` | `--input-foreground` | `inherit` | `inherit` | Foreground color for form inputs | +| `inputBorder` | `--input-border` | `var(--border)` | `var(--border)` | Border styles for form inputs | +| `inputOutlineFocus` | `--input-outline-focus` | `rgba(108, 95, 199, 1)` | `rgba(108, 95, 199, 1)` | Outline color for form inputs when focused | + +Here is an example of customizing only the background color for the light theme using the Feedback constructor configuration: + +```javascript +new Feedback({ + themeLight: { + background: "#cccccc", + }, +}); +``` + +Or the same example above, but using the CSS variables method: + +```css +#sentry-feedback { + --background: #cccccc; +} +``` + +### Additional UI Customization + +Similar to theme customization above, these are additional CSS variables that can be overridden. These aren't supported in the constructor. + +| Variable | Default | Description | +| --------------- | --------------------------------------- | --------------------------------------------------------------------------------- | +| `--bottom` | `1rem` | By default the widget has a position of fixed, and is in the bottom right corner. | +| `--right` | `1rem` | By default the widget has a position of fixed, and is in the bottom right corner. | +| `--top` | `auto` | By default the widget has a position of fixed, and is in the bottom right corner. | +| `--left` | `auto` | By default the widget has a position of fixed, and is in the bottom right corner. | +| `--z-index` | `100000` | The z-index of the widget | +| `--font-family` | `"'Helvetica Neue', Arial, sans-serif"` | Default font-family to use | +| `--font-size` | `14px` | Font size | + +### Event Callbacks + +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. + +Pass these callbacks when you initialize the Feedback integration: + +```javascript +new Feedback({ + onFormOpen: () => {}, + onFormClose: () => {}, + onSubmitSuccess: () => {}, + onSubmitError: () => {}, +}); +``` + +### Bring Your Own Button + +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). + +```javascript +const feedback = new Feedback({ + // Disable injecting the default widget + autoInject: false, +}); + +feedback.attachTo(document.querySelector("#your-button"), { + formTitle: "Report a Bug!", +}); +``` + +Alternatively, you can call `feedback.openDialog()`: + +```typescript +import { BrowserClient, Feedback, getCurrentHub } from "@sentry/react"; + +function MyFeedbackButton() { + const client = getCurrentHub().getClient(); + const feedback = client?.getIntegration(Feedback); + + // Don't render custom feedback button if Feedback integration isn't installed + if (!feedback) { + return null; + } + + return ( + + ); +} +``` + +### Bring Your Own Widget + +You can also use your own UI components to gather feedback and pass the feedback data object to the `sendFeedback()` function. The `sendFeedback` function accepts two parameters: + +- 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 + +```javascript +sendFeedback( + { + name: "Jane Doe", // optional + email: "email@example.org", // optional + message: "This is an example feedback", // required + }, + { + includeReplay: true, // optional + } +); +``` + +Here is a simple example: + +```html +
+ + +