docs(react-router): Update guide for @sentry/react-router (#12867)

---------

Co-authored-by: Andrei <[email protected]>
Co-authored-by: Sigrid Huemer <[email protected]>

docs/platforms/javascript/guides/react-router/config.yml

@@ -1,4 +1,4 @@
-title: React Router v7 (framework mode)
+title: React Router Framework
 description: React Router v7 is a framework for building full-stack web apps and websites. Learn how to set it up with Sentry.
 sdk: sentry.javascript.react-router
 categories:

platform-includes/getting-started-config/javascript.react-router.mdx

@@ -11,7 +11,7 @@ npx react-router reveal
 Initialize the Sentry React SDK in your `entry.client.tsx` file:
 
 ```tsx {filename: entry.client.tsx} {"onboardingOptions": {"performance": "9, 12-16", "session-replay": "10, 17-21"}}
-import * as Sentry from "@sentry/react";
+import * as Sentry from "@sentry/react-router";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { HydratedRouter } from "react-router/dom";
@@ -47,7 +47,7 @@ startTransition(() => {
 Now, update your `app/root.tsx` file to report any unhandled errors from your error boundary:
 
 ```tsx {diff} {filename: app/root.tsx}
-import * as Sentry from "@sentry/react";
+import * as Sentry from "@sentry/react-router";
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   let message = "Oops!";
@@ -89,7 +89,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 Create an `instrument.server.mjs` file in the root of your app:
 
 ```js {filename: instrument.server.mjs} {"onboardingOptions": {"performance": "7", "profiling": "2, 6, 8"}}
-import * as Sentry from "@sentry/node";
+import * as Sentry from "@sentry/react-router";
 import { nodeProfilingIntegration } from '@sentry/profiling-node';
 
 Sentry.init({

platform-includes/getting-started-install/javascript.react-router.mdx

@@ -1,34 +1,42 @@
 <OnboardingOptionButtons
-  options={["error-monitoring", "performance", "profiling", "session-replay"]}
+  options={[
+    "error-monitoring",
+    "performance",
+    "session-replay",
+    {
+      id: 'profiling',
+      checked: false
+    }
+  ]}
 />
 
 <OnboardingOption optionId="profiling">
 
 ```bash {tabTitle:npm}
-npm install @sentry/react @sentry/node @sentry/profiling-node
+npm install @sentry/react-router @sentry/profiling-node
 ```
 
 ```bash {tabTitle:yarn}
-yarn add @sentry/react @sentry/node @sentry/profiling-node
+yarn add @sentry/react-router @sentry/profiling-node
 ```
 
 ```bash {tabTitle:pnpm}
-pnpm add @sentry/react @sentry/node @sentry/profiling-node
+pnpm add @sentry/react-router @sentry/profiling-node
 ```
 
 </OnboardingOption> 
 
 <OnboardingOption optionId="profiling" hideForThisOption>
   ```bash {tabTitle:npm}
-  npm install @sentry/react @sentry/node
+  npm install @sentry/react-router
   ```
 
   ```bash {tabTitle:yarn}
-  yarn add @sentry/react @sentry/node
+  yarn add @sentry/react-router
   ```
 
   ```bash {tabTitle:pnpm}
-  pnpm add @sentry/react @sentry/node
+  pnpm add @sentry/react-router
   ```
 </OnboardingOption>
 

platform-includes/getting-started-primer/javascript.react-router.mdx

@@ -1,12 +1,12 @@
-<Alert title='Looking for library mode?' level='warning'>
+<Alert title='SDK Limitations' level='warning'>
 
-If you are using React Router in library mode, you can follow the instructions in the [React guide here](/platforms/javascript/guides/react/features/react-router/v7).
+This SDK is considered **experimental and in an alpha state**. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/) if you have any feedback or concerns.
 
 </Alert>
 
-<Alert title='SDK Limitations' level='warning'>
+<Alert title='Looking for library mode?' level='info'>
 
-We do not yet have a dedicated SDK for React Router in framework mode.
-This guide demonstrates how to setup error monitoring and basic performance tracing using the `@sentry/react` and `@sentry/node` packages instead.
+If you are using React Router in library mode, you can follow the instructions in the [React guide here](/platforms/javascript/guides/react/features/react-router/v7).
 
 </Alert>
+

platform-includes/getting-started-sourcemaps/javascript.react-router.mdx

@@ -1,9 +1,43 @@
-## Add Readable Stack Traces to Errors
+## Source Maps Upload
 
-By default, React Router will minify your JavaScript and CSS files in production. This makes it difficult to debug errors. To make debugging easier, you can generate source maps and upload them to Sentry.
+Update `vite.config.ts` to include the `sentryReactRouter` plugin. Also add your `SentryReactRouterBuildOptions` config options to the Vite config (this is required for uploading source maps at the end of the build):
 
-We recommend using [Sentry's Vite plugin](/platforms/javascript/sourcemaps/uploading/vite/) to upload sourcemaps.
+<OrgAuthTokenNote />
 
-Please refer to the <PlatformLink to="/sourcemaps">Source Maps Documentation</PlatformLink>, for more information.
+```typescript {filename: vite.config.ts}
+import { reactRouter } from '@react-router/dev/vite';
+import { sentryReactRouter, type SentryReactRouterBuildOptions } from '@sentry/react-router';
+import { defineConfig } from 'vite';
 
-For more advanced configuration, you can use [`sentry-cli`](https://github.com/getsentry/sentry-cli) directly to upload source maps.
+const sentryConfig: SentryReactRouterBuildOptions = {
+  org: "___ORG_SLUG___",
+  project: "___PROJECT_SLUG___",
+
+  // An auth token is required for uploading source maps.
+  authToken: "___ORG_AUTH_TOKEN___"
+  // ...
+};
+
+export default defineConfig(config => {
+  return {
+    plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)],
+    sentryConfig,
+  };
+});
+```
+
+Include the `sentryOnBuildEnd` hook in `react-router.config.ts`:
+
+```typescript {filename: react-router.config.ts} {9}
+import type { Config } from '@react-router/dev/config';
+import { sentryOnBuildEnd } from '@sentry/react-router';
+
+export default {
+  ssr: true,
+  buildEnd: ({ viteConfig, reactRouterConfig, buildManifest }) => {
+    // ...
+    // Call this at the end of the hook
+    sentryOnBuildEnd({ viteConfig, reactRouterConfig, buildManifest });
+  },
+} satisfies Config;
+```