Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.9.5 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

Expand Down
54 changes: 37 additions & 17 deletions docs/platforms/javascript/guides/react-router/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,42 +29,60 @@ If you're using React Router in data or declarative mode, follow the instruction

<PlatformContent includePath="getting-started-prerequisites" />

<StepConnector selector="h2" showNumbers={true}>
<StepComponent>
Comment thread
sentry[bot] marked this conversation as resolved.

## Install

<Alert level="warning">

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.

</Alert>

<SplitLayout>
<SplitSection>
<SplitSectionText>

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 command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring.

</SplitSectionText>
<SplitSectionCode>

```bash
npx @sentry/wizard@latest -i reactRouter
npx sentry@latest init
```

</SplitSectionCode>

</SplitSection>
</SplitLayout>

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.
<Expandable title="How does sentry init work?">

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

<Expandable title="What does the installation wizard change inside your application?">
</Expandable>

<Expandable title="Prefer the existing React Router wizard?">

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

- 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
To configure Sentry manually, follow the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide.

</Expandable>

Expand Down Expand Up @@ -235,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.
Expand All @@ -246,7 +266,7 @@ Clicking the button triggers an error that Sentry captures for you. The example

<Alert level="success" title="Tip">

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.

</Alert>

Expand Down Expand Up @@ -276,4 +296,4 @@ Our next recommended steps for you are:

</Expandable>

</StepConnector>
</StepComponent>
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ description: "Learn how to manually set up Sentry in your React Router v7 app an
</Alert>

<Alert level="info">
For the fastest setup, we recommend using the [wizard
installer](/platforms/javascript/guides/react-router).
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.
</Alert>

<PlatformContent includePath="getting-started-prerequisites" />
Expand Down Expand Up @@ -205,7 +207,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 <PlatformLink to="/features/instrumentation-api/">Instrumentation API</PlatformLink> (React Router 7.9.5+) for automatic tracing without Node version restrictions
1. **Recommended**: Use the stable <PlatformLink to="/features/instrumentation-api/">Instrumentation API</PlatformLink> (React Router 7.15+) for automatic tracing without Node version restrictions. React Router 7.9.5 introduced an earlier unstable API with `unstable_*` names.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leaving this note for reviewers: 7.15+ is intentional because the snippets here use the stabilized React Router instrumentation API (instrumentations). React Router 7.9.5 introduced the earlier unstable_* API, so the docs mention it but keep 7.15+ as the minimum for these examples.

2. **Alternative**: Use our manual server wrappers (shown below)

For server loaders use `wrapServerLoader`:
Expand Down
Loading