feat(feedback): Add SDK docs for User Feedback

src/components/platformSidebar.tsx

@@ -74,6 +74,7 @@ export function SidebarContent({platform, guide, data}: ChildProps) {
           `/${pathRoot}/profiling/`,
           `/${pathRoot}/guides/`,
           `/${pathRoot}/crons/`,
+          `/${pathRoot}/user-feedback/`,
         ]}
       />
       <DynamicNav
@@ -104,6 +105,13 @@ export function SidebarContent({platform, guide, data}: ChildProps) {
         suppressMissing
         tree={tree}
       />
+      <DynamicNav
+        root={`/${pathRoot}/user-feedback`}
+        title="User Feedback"
+        prependLinks={[[`/${pathRoot}/user-feedback/`, 'Set Up User Feedback']]}
+        suppressMissing
+        tree={tree}
+      />
     </ul>
   );
 }

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
 

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 <PlatformLink to="/enriching-events/user-feedback/">user feedback</PlatformLink>.
+- **User Feedback**: When an issue has new <PlatformLink to="/user-feedback/">user feedback</PlatformLink>.
 - **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:

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 <PlatformLink to="/enriching-events/user-feedback/">SDK's user feedback</PlatformLink>.
+- **User Feedback** - Any feedback collected from users through the <PlatformLink to="/user-feedback/">SDK's user feedback</PlatformLink>.
 - **<PlatformLink to="/enriching-events/attachments/">Attachments</PlatformLink>** - 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.

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.

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."
+---
+
+<Include name="feature-stage-beta-user-feedback.mdx" />
+
+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/)

src/includes/feature-stage-beta-user-feedback.mdx

@@ -0,0 +1,5 @@
+<Note title="A Wild User Feedback Appears!">
+
+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.
+
+</Note>

src/platform-includes/getting-started-primer/apple.macos.mdx

@@ -20,5 +20,5 @@
   <!-- When adding an auto breadcrumb item here please also update /platform-includes/enriching-events/breadcrumbs/automatic-breadcrumbs/apple.mdx -->
 - [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

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

src/platform-includes/getting-started-primer/basic-features/apple.mdx

@@ -34,6 +34,6 @@
       User Interaction
     </PlatformLink> 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

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)

src/platform-includes/getting-started-primer/dotnet.mdx

@@ -11,10 +11,8 @@ This <PlatformLink to="/compatibility/">SDK is compatible</PlatformLink> with th
 - [Release health](/product/releases/health/) tracks crash free users and sessions
 - <PlatformLink to="/enriching-events/attachments/">Attachments</PlatformLink> enrich
   your event by storing additional files, such as config or log files
-- <PlatformLink to="/enriching-events/user-feedback/">
-    User Feedback
-  </PlatformLink> provides the ability to collect user information when an event
-  occurs
+- <PlatformLink to="/user-feedback/">User Feedback</PlatformLink> 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 <PlatformLink to="/enriching-events/context/">enriched</PlatformLink> with device data

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/)

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.

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`      |

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
+```
+
+<Note>
+
+If the Astro CLI setup doesn't work for you, you can also <PlatformLink to="/manual-setup/">set up the SDK manually</PlatformLink>.
+
+</Note>

src/platform-includes/user-feedback/install/javascript.ember.mdx

@@ -0,0 +1,3 @@
+```bash {tabTitle:ember-cli}
+ember install @sentry/ember
+```

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
+```

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}
+<!-- Recommended: Use this bundle for feedback, replay, error, and performance monitoring -->
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.replay.feedback.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.replay.feedback.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<!-- Alternatively, you can use this bundle for feedback and error monitoring only -->
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.feedback.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.feedback.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+```

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
+```

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
+```

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 <PlatformLink to="/usage/">manually capture errors</PlatformLink>.
+
+<Note>
+
+If the wizard setup isn't working for you, you can <PlatformLink to="/manual-setup/">set up the SDK manually</PlatformLink>.
+
+</Note>

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
+```

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 <PlatformLink to="/usage/">manually capture errors</PlatformLink>.
+
+<Note>
+
+If the setup through the wizard doesn't work for you, you can also <PlatformLink to="/manual-setup/">set up the SDK manually</PlatformLink>.
+
+</Note>

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
+```

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).

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",
+    }),
+  ],
+});
+```