From bcc317f7b402a80b3c57f96a13782cad60b33349 Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 10:25:30 +0200 Subject: [PATCH 01/11] docs(react-router): add sentry init setup --- .../features/instrumentation-api.mdx | 2 +- .../javascript/guides/react-router/index.mdx | 223 ++++-------------- .../guides/react-router/manual-setup.mdx | 5 +- 3 files changed, 54 insertions(+), 176 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx b/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx index d4626cd1e37298..10c2c4457e558a 100644 --- a/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx +++ b/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx @@ -197,7 +197,7 @@ export async function action({ request }) { If you're not seeing spans for your loaders and actions: -1. Check that the React Router version is 7.9.5 or later +1. Check that the React Router version is 7.15 or later 2. Make sure `instrumentations` is exported from `entry.server.tsx` 3. Verify `tracesSampleRate` is set in your server configuration diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 71e7657a8c8b02..b5b041e4805a05 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -29,23 +29,29 @@ If you're using React Router in data or declarative mode, follow the instruction - + ## Install + + +The wizard is currently experimental. If you run into any issues, check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. + + + -To install Sentry using the installation wizard, run the command on the right within your project directory. +Run the Sentry init command in your project directory to automatically configure Sentry in your React Router v7 Framework Mode application. -The wizard guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. +The wizard guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring. ```bash -npx @sentry/wizard@latest -i reactRouter +npx sentry@latest init ``` @@ -53,28 +59,24 @@ npx @sentry/wizard@latest -i reactRouter -This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later. + - +The Sentry init wizard is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does: -- Installs the `@sentry/react-router` package (and optionally `@sentry/profiling-node`) -- Reveals React Router entry point files (`entry.client.tsx` and `entry.server.tsx`) if not already visible -- Initializes Sentry in your client and server entry files with default configuration -- Creates `instrument.server.mjs` for server-side instrumentation -- Updates your `app/root.tsx` to capture errors in the error boundary -- Configures source map upload in `vite.config.ts` and `react-router.config.ts` -- Creates `.env.sentry-build-plugin` with an auth token to upload source maps (this file is automatically added to `.gitignore`) -- Creates example page and API route to help verify your Sentry setup +- **Analyzes your project** — reads project files and manifests to understand your React Router Framework app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`. +- **Detects your framework** — identifies React Router v7 Framework Mode and selects the `@sentry/react-router` SDK. +- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code. +- **Installs dependencies** — adds `@sentry/react-router` using your project's package manager. +- **Creates and modifies files** — sets up client-side and server-side initialization, error capture, tracing, and other selected features based on your existing project structure. +- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated. - +For full details on what each file does, see the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. -## Configure - -If you prefer to configure Sentry manually, here are the configuration files the wizard would create: + -In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). +## Verify Your Setup -Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. +The wizard will have prompted you to select which features to enable. Select the same options here to see the relevant verification steps: - - - - - - -### Client-Side Configuration - -The wizard creates a client configuration file that initializes the Sentry SDK in your browser. - -The configuration includes your DSN (Data Source Name), which connects your app to your Sentry project, and enables the features you selected during installation. - - - + -```tsx {tabTitle:Client} {filename:entry.client.tsx} -import * as Sentry from "@sentry/react-router"; -import { startTransition, StrictMode } from "react"; -import { hydrateRoot } from "react-dom/client"; -import { HydratedRouter } from "react-router/dom"; - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // To disable sending user data, uncomment the line below. For more info visit: - // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#dataCollection - // dataCollection: { userInfo: false }, - - integrations: [ - // ___PRODUCT_OPTION_START___ performance - // Registers and configures the Tracing integration, - // which automatically instruments your application to monitor its - // performance, including custom React Router routing instrumentation - Sentry.reactRouterTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay - // Registers the Replay integration, - // which automatically captures Session Replays - Sentry.replayIntegration(), - // ___PRODUCT_OPTION_END___ session-replay - // ___PRODUCT_OPTION_START___ user-feedback - Sentry.feedbackIntegration({ - // Additional SDK configuration goes in here, for example: - colorScheme: "system", - }), - // ___PRODUCT_OPTION_END___ user-feedback - ], - // ___PRODUCT_OPTION_START___ logs - - // Enable logs to be sent to Sentry - enableLogs: true, - // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ performance - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#traces-sample-rate - tracesSampleRate: 1.0, - - // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled - tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay - - // Capture Replay for 10% of all sessions, - // plus 100% of sessions with an error - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/react-router/session-replay/configuration/#general-integration-configuration - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ session-replay -}); - -startTransition(() => { - hydrateRoot( - document, - - - - ); -}); +Add a test button to one of your routes to trigger an error: + +```tsx + ``` - - +Start your app and click the button. - - +### Check Your Data in Sentry -### Server-Side Configuration +**Errors** — [Open Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/) -The wizard also creates a server configuration file for Node.js runtime. +You should see "Sentry Test Error" with a full stack trace pointing to your source code. -For more advanced configuration options or to set up Sentry manually, check out our [manual setup guide](/platforms/javascript/guides/react-router/manual-setup/). + - - +**Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) -```js {tabTitle:Server} {filename:instrument.server.mjs} -import * as Sentry from "@sentry/react-router"; -// ___PRODUCT_OPTION_START___ profiling -import { nodeProfilingIntegration } from "@sentry/profiling-node"; -// ___PRODUCT_OPTION_END___ profiling - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - - // To disable sending user data, uncomment the line below. For more info visit: - // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#dataCollection - // dataCollection: { userInfo: false }, - // ___PRODUCT_OPTION_START___ logs - - // Enable logs to be sent to Sentry - enableLogs: true, - // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ profiling - - // Add our Profiling integration - integrations: [nodeProfilingIntegration()], - // ___PRODUCT_OPTION_END___ profiling - // ___PRODUCT_OPTION_START___ performance - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#tracesSampleRate - tracesSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ profiling - // Enable profiling for a percentage of sessions - // Learn more at - // https://docs.sentry.io/platforms/javascript/configuration/options/#profileSessionSampleRate - profileSessionSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ profiling -}); -``` +You should see route and request traces. Learn more about the [Instrumentation API](/platforms/javascript/guides/react-router/features/instrumentation-api/). - - - - -## Verify Your Setup + -If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard: + -1. Open the example page `/sentry-example-page` in your browser. For most React Router applications, this will be at localhost. -2. Observe the example page with a button that triggers test errors. +**Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) - - -Clicking the button triggers an error that Sentry captures for you. The example also demonstrates how to test performance tracing. +Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](/platforms/javascript/guides/react-router/session-replay/). - + -Don't forget to explore the example files' code in your project to understand what's happening after your button click. - - + -### View Captured Data in Sentry +**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) -Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). +See structured log entries from your application. Learn more about [Logs configuration](/platforms/javascript/guides/react-router/logs/). - + ## Next Steps @@ -276,4 +155,4 @@ Our next recommended steps for you are: - + diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 59d7201555566a..ce02a516b0ff90 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -12,8 +12,7 @@ description: "Learn how to manually set up Sentry in your React Router v7 app an - For the fastest setup, we recommend using the [wizard - installer](/platforms/javascript/guides/react-router). + For the fastest setup, we recommend using [`sentry init`](/platforms/javascript/guides/react-router). @@ -205,7 +204,7 @@ Automatic server-side instrumentation is currently only supported on: If you're on a different version, you have two options: -1. **Recommended**: Use the Instrumentation API (React Router 7.9.5+) for automatic tracing without Node version restrictions +1. **Recommended**: Use the Instrumentation API (React Router 7.15+) for automatic tracing without Node version restrictions 2. **Alternative**: Use our manual server wrappers (shown below) For server loaders use `wrapServerLoader`: From e181f07b66846f64df650f34cf5d0785ba982b2a Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 10:44:27 +0200 Subject: [PATCH 02/11] docs(react-router): mention classic wizard alternative --- .../javascript/guides/react-router/index.mdx | 14 +++++++++++++- .../guides/react-router/manual-setup.mdx | 9 ++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index b5b041e4805a05..2d53f40dcb9cde 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -35,7 +35,7 @@ If you're using React Router in data or declarative mode, follow the instruction -The wizard is currently experimental. If you run into any issues, check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. +The AI-powered `sentry init` flow is currently experimental. If you don't want to use it, use the existing framework-specific wizard below or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. @@ -59,6 +59,18 @@ npx sentry@latest init + + +If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead: + +```bash +npx @sentry/wizard@latest -i reactRouter +``` + +To configure Sentry without a wizard, follow the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. + + + The Sentry init wizard is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does: diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index ce02a516b0ff90..c9ba1303735e95 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -12,7 +12,14 @@ description: "Learn how to manually set up Sentry in your React Router v7 app an - For the fastest setup, we recommend using [`sentry init`](/platforms/javascript/guides/react-router). + For automated setup, start with the experimental AI-powered [`sentry init`](/platforms/javascript/guides/react-router) flow. + If you'd rather use the existing React Router Framework Mode installation wizard, run: + + ```bash + npx @sentry/wizard@latest -i reactRouter + ``` + + Continue with this guide to set up Sentry manually. From e9bbabf9eec427631a6fe39484fc17d18d982bd7 Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 10:48:18 +0200 Subject: [PATCH 03/11] docs(react-router): inline classic wizard command --- docs/platforms/javascript/guides/react-router/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 2d53f40dcb9cde..ab33e23a975ca8 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -35,7 +35,7 @@ If you're using React Router in data or declarative mode, follow the instruction -The AI-powered `sentry init` flow is currently experimental. If you don't want to use it, use the existing framework-specific wizard below or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. +The AI-powered `sentry init` flow is currently experimental. If you don't want to use it, run the existing framework-specific wizard with `npx @sentry/wizard@latest -i reactRouter`, or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. From f72b11a64e3a5e6599745e521cabdcb9718b2104 Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 11:04:49 +0200 Subject: [PATCH 04/11] docs(react-router): avoid duplicating wizard command --- docs/platforms/javascript/guides/react-router/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index ab33e23a975ca8..15f6788fb9b1a1 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -35,7 +35,7 @@ If you're using React Router in data or declarative mode, follow the instruction -The AI-powered `sentry init` flow is currently experimental. If you don't want to use it, run the existing framework-specific wizard with `npx @sentry/wizard@latest -i reactRouter`, or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. +The AI-powered `sentry init` flow is currently experimental. If you don't want to use it, use the existing framework-specific wizard option below, or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. From 968711302cea0199ae07f3c1f44562082d4425e8 Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 19:12:24 +0200 Subject: [PATCH 05/11] docs(react-router): clarify instrumentation API version --- .../guides/react-router/features/instrumentation-api.mdx | 6 ++++-- .../javascript/guides/react-router/manual-setup.mdx | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx b/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx index 10c2c4457e558a..ccb9e1bcfaebea 100644 --- a/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx +++ b/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx @@ -4,7 +4,9 @@ description: "Automatic tracing for loaders, actions, middleware, navigations, f sidebar_order: 10 --- -React Router 7.15+ provides an [instrumentation API](https://reactrouter.com/how-to/instrumentation) that enables automatic span creation for loaders, actions, middleware, navigations, fetchers, lazy routes, and request handlers without the need for manual wrapper functions. Transaction names (for HTTP requests, pageloads, and navigations) use parameterized route patterns, such as `/users/:id`, and errors are automatically captured with proper context. +React Router 7.15+ provides the stable [instrumentation API](https://reactrouter.com/how-to/instrumentation) used in this guide. React Router 7.9.5 introduced an earlier unstable version of the API with `unstable_*` names, so upgrade to 7.15+ before using the stable `instrumentations` examples below. + +The instrumentation API enables automatic span creation for loaders, actions, middleware, navigations, fetchers, lazy routes, and request handlers without the need for manual wrapper functions. Transaction names (for HTTP requests, pageloads, and navigations) use parameterized route patterns, such as `/users/:id`, and errors are automatically captured with proper context. ## Server-Side Setup @@ -197,7 +199,7 @@ export async function action({ request }) { If you're not seeing spans for your loaders and actions: -1. Check that the React Router version is 7.15 or later +1. Check that the React Router version is 7.15 or later for the stable `instrumentations` API. React Router 7.9.5 includes the earlier unstable API, which uses `unstable_*` names. 2. Make sure `instrumentations` is exported from `entry.server.tsx` 3. Verify `tracesSampleRate` is set in your server configuration diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index c9ba1303735e95..680b20068a5bb3 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -211,7 +211,7 @@ Automatic server-side instrumentation is currently only supported on: If you're on a different version, you have two options: -1. **Recommended**: Use the Instrumentation API (React Router 7.15+) for automatic tracing without Node version restrictions +1. **Recommended**: Use the stable Instrumentation API (React Router 7.15+) for automatic tracing without Node version restrictions. React Router 7.9.5 introduced an earlier unstable API with `unstable_*` names. 2. **Alternative**: Use our manual server wrappers (shown below) For server loaders use `wrapServerLoader`: From 921f35513d3b9091f7fc70b0345c0833ade4174f Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 19:15:49 +0200 Subject: [PATCH 06/11] docs(react-router): call sentry init a command --- .../platforms/javascript/guides/react-router/index.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 15f6788fb9b1a1..8abd5cedd460b0 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -35,7 +35,7 @@ If you're using React Router in data or declarative mode, follow the instruction -The AI-powered `sentry init` flow is currently experimental. If you don't want to use it, use the existing framework-specific wizard option below, or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. +The AI-powered `sentry init` flow is currently experimental. To use the existing framework-specific setup instead, see the option below, or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. @@ -45,7 +45,7 @@ The AI-powered `sentry init` flow is currently experimental. If you don't want t Run the Sentry init command in your project directory to automatically configure Sentry in your React Router v7 Framework Mode application. -The wizard guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring. +The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring. @@ -71,9 +71,9 @@ To configure Sentry without a wizard, follow the [Manual Setup](/platforms/javas - + -The Sentry init wizard is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does: +The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does: - **Analyzes your project** — reads project files and manifests to understand your React Router Framework app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`. - **Detects your framework** — identifies React Router v7 Framework Mode and selects the `@sentry/react-router` SDK. @@ -88,7 +88,7 @@ For full details on what each file does, see the [Manual Setup](/platforms/javas ## Verify Your Setup -The wizard will have prompted you to select which features to enable. Select the same options here to see the relevant verification steps: +The command will have prompted you to select which features to enable. Select the same options here to see the relevant verification steps: Date: Thu, 11 Jun 2026 19:41:56 +0200 Subject: [PATCH 07/11] docs(react-router): restore verification content --- .../javascript/guides/react-router/index.mdx | 189 +++++++++++++++--- 1 file changed, 158 insertions(+), 31 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 8abd5cedd460b0..037592dfca618e 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -86,9 +86,13 @@ For full details on what each file does, see the [Manual Setup](/platforms/javas -## Verify Your Setup +## Configure + +If you prefer to configure Sentry manually, here are the configuration files the wizard would create: -The command will have prompted you to select which features to enable. Select the same options here to see the relevant verification steps: +In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). + +Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. - + + + + + -Add a test button to one of your routes to trigger an error: - -```tsx - +### Client-Side Configuration + +The wizard creates a client configuration file that initializes the Sentry SDK in your browser. + +The configuration includes your DSN (Data Source Name), which connects your app to your Sentry project, and enables the features you selected during installation. + + + + +```tsx {tabTitle:Client} {filename:entry.client.tsx} +import * as Sentry from "@sentry/react-router"; +import { startTransition, StrictMode } from "react"; +import { hydrateRoot } from "react-dom/client"; +import { HydratedRouter } from "react-router/dom"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // To disable sending user data, uncomment the line below. For more info visit: + // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#dataCollection + // dataCollection: { userInfo: false }, + + integrations: [ + // ___PRODUCT_OPTION_START___ performance + // Registers and configures the Tracing integration, + // which automatically instruments your application to monitor its + // performance, including custom React Router routing instrumentation + Sentry.reactRouterTracingIntegration(), + // ___PRODUCT_OPTION_END___ performance + // ___PRODUCT_OPTION_START___ session-replay + // Registers the Replay integration, + // which automatically captures Session Replays + Sentry.replayIntegration(), + // ___PRODUCT_OPTION_END___ session-replay + // ___PRODUCT_OPTION_START___ user-feedback + Sentry.feedbackIntegration({ + // Additional SDK configuration goes in here, for example: + colorScheme: "system", + }), + // ___PRODUCT_OPTION_END___ user-feedback + ], + // ___PRODUCT_OPTION_START___ logs + + // Enable logs to be sent to Sentry + enableLogs: true, + // ___PRODUCT_OPTION_END___ logs + // ___PRODUCT_OPTION_START___ performance + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#traces-sample-rate + tracesSampleRate: 1.0, + + // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled + tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], + // ___PRODUCT_OPTION_END___ performance + // ___PRODUCT_OPTION_START___ session-replay + + // Capture Replay for 10% of all sessions, + // plus 100% of sessions with an error + // Learn more at + // https://docs.sentry.io/platforms/javascript/guides/react-router/session-replay/configuration/#general-integration-configuration + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ session-replay +}); + +startTransition(() => { + hydrateRoot( + document, + + + + ); +}); ``` -Start your app and click the button. + + + + + -### Check Your Data in Sentry +### Server-Side Configuration -**Errors** — [Open Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/) +The wizard also creates a server configuration file for Node.js runtime. -You should see "Sentry Test Error" with a full stack trace pointing to your source code. +For more advanced configuration options or to set up Sentry manually, check out our [manual setup guide](/platforms/javascript/guides/react-router/manual-setup/). - + + -**Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) +```js {tabTitle:Server} {filename:instrument.server.mjs} +import * as Sentry from "@sentry/react-router"; +// ___PRODUCT_OPTION_START___ profiling +import { nodeProfilingIntegration } from "@sentry/profiling-node"; +// ___PRODUCT_OPTION_END___ profiling + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // To disable sending user data, uncomment the line below. For more info visit: + // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#dataCollection + // dataCollection: { userInfo: false }, + // ___PRODUCT_OPTION_START___ logs + + // Enable logs to be sent to Sentry + enableLogs: true, + // ___PRODUCT_OPTION_END___ logs + // ___PRODUCT_OPTION_START___ profiling + + // Add our Profiling integration + integrations: [nodeProfilingIntegration()], + // ___PRODUCT_OPTION_END___ profiling + // ___PRODUCT_OPTION_START___ performance + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for tracing. + // We recommend adjusting this value in production + // Learn more at + // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#tracesSampleRate + tracesSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ performance + // ___PRODUCT_OPTION_START___ profiling + // Enable profiling for a percentage of sessions + // Learn more at + // https://docs.sentry.io/platforms/javascript/configuration/options/#profileSessionSampleRate + profileSessionSampleRate: 1.0, + // ___PRODUCT_OPTION_END___ profiling +}); +``` -You should see route and request traces. Learn more about the [Instrumentation API](/platforms/javascript/guides/react-router/features/instrumentation-api/). + + + - +## Verify Your Setup - +If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard: -**Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) +1. Open the example page `/sentry-example-page` in your browser. For most React Router applications, this will be at localhost. +2. Observe the example page with a button that triggers test errors. -Watch a video-like recording of your session, including the moment the error occurred. Learn more about [Session Replay configuration](/platforms/javascript/guides/react-router/session-replay/). + - +Clicking the button triggers an error that Sentry captures for you. The example also demonstrates how to test performance tracing. - + + +Don't forget to explore the example files' code in your project to understand what's happening after your button click. + + -**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) +### View Captured Data in Sentry -See structured log entries from your application. Learn more about [Logs configuration](/platforms/javascript/guides/react-router/logs/). +Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear). - + ## Next Steps @@ -167,4 +294,4 @@ Our next recommended steps for you are: - + From 1d405e90a6e3c5d57d2a7295418cd345c34a9aec Mon Sep 17 00:00:00 2001 From: betegon Date: Thu, 11 Jun 2026 19:45:14 +0200 Subject: [PATCH 08/11] docs(react-router): inline init command in manual setup --- .../javascript/guides/react-router/manual-setup.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 680b20068a5bb3..222f5844522e3d 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -12,7 +12,12 @@ description: "Learn how to manually set up Sentry in your React Router v7 app an - For automated setup, start with the experimental AI-powered [`sentry init`](/platforms/javascript/guides/react-router) flow. + For automated setup, run the experimental AI-powered `sentry init` command: + + ```bash + npx sentry@latest init + ``` + If you'd rather use the existing React Router Framework Mode installation wizard, run: ```bash From 9147d02bab4922212bbb0ec4639270196d966e3b Mon Sep 17 00:00:00 2001 From: betegon Date: Fri, 12 Jun 2026 12:35:19 +0200 Subject: [PATCH 09/11] docs(react-router): align init fallback layout --- .../javascript/guides/react-router/index.mdx | 24 +++++++++---------- .../guides/react-router/manual-setup.mdx | 15 +++--------- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 037592dfca618e..35547c33345564 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -59,18 +59,6 @@ npx sentry@latest init - - -If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead: - -```bash -npx @sentry/wizard@latest -i reactRouter -``` - -To configure Sentry without a wizard, follow the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. - - - The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does: @@ -86,6 +74,18 @@ For full details on what each file does, see the [Manual Setup](/platforms/javas + + +If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead: + +```bash +npx @sentry/wizard@latest -i reactRouter +``` + +To configure Sentry manually, follow the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide. + + + ## Configure If you prefer to configure Sentry manually, here are the configuration files the wizard would create: diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 222f5844522e3d..4b20938145a844 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -12,18 +12,9 @@ description: "Learn how to manually set up Sentry in your React Router v7 app an - For automated setup, run the experimental AI-powered `sentry init` command: - - ```bash - npx sentry@latest init - ``` - - If you'd rather use the existing React Router Framework Mode installation wizard, run: - - ```bash - npx @sentry/wizard@latest -i reactRouter - ``` - + Looking for automatic setup with `sentry init` or the React Router Framework + Mode wizard? Follow the [React Router quickstart](/platforms/javascript/guides/react-router/) + instead. Continue with this guide to set up Sentry manually. From 8a315d536e1708574382490af5085589979c47f2 Mon Sep 17 00:00:00 2001 From: betegon Date: Fri, 12 Jun 2026 13:40:06 +0200 Subject: [PATCH 10/11] docs(react-router): clarify init verification path --- docs/platforms/javascript/guides/react-router/index.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 35547c33345564..c9fb6ab14718d9 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -253,7 +253,9 @@ Sentry.init({ ## Verify Your Setup -If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard: +The `sentry init` command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, start your React Router app, exercise the parts of your app that should send events, and then check your Sentry project. + +If you used the React Router Framework Mode installation wizard instead, you can also verify your setup with the example page it creates: 1. Open the example page `/sentry-example-page` in your browser. For most React Router applications, this will be at localhost. 2. Observe the example page with a button that triggers test errors. @@ -264,7 +266,7 @@ Clicking the button triggers an error that Sentry captures for you. The example -Don't forget to explore the example files' code in your project to understand what's happening after your button click. +If you used the React Router Framework Mode installation wizard, explore the example files' code in your project to understand what's happening after your button click. From 72275c141e84955bedea670200a2f31d191070c2 Mon Sep 17 00:00:00 2001 From: betegon Date: Fri, 12 Jun 2026 19:15:37 +0200 Subject: [PATCH 11/11] docs(react-router): fix setup wrapper closing tag --- docs/platforms/javascript/guides/react-router/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index c9fb6ab14718d9..4a4f665b87f642 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -296,4 +296,4 @@ Our next recommended steps for you are: - +