From b3c2e3745c8439e158e9c51cbd012b88f3a7b8f3 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Wed, 23 Sep 2026 10:54:06 +0200 Subject: [PATCH 1/2] docs(react-router): Point README to SDK documentation Co-Authored-By: GPT-6 --- packages/react-router/README.md | 177 ++------------------------------ 1 file changed, 9 insertions(+), 168 deletions(-) diff --git a/packages/react-router/README.md b/packages/react-router/README.md index 4bc7bf9890b6..dafbfad6ddb3 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -10,176 +10,17 @@ [![npm dm](https://img.shields.io/npm/dm/@sentry/react-router.svg)](https://www.npmjs.com/package/@sentry/react-router) [![npm dt](https://img.shields.io/npm/dt/@sentry/react-router.svg)](https://www.npmjs.com/package/@sentry/react-router) -> This SDK is for [React Router (framework)](https://reactrouter.com/start/framework/installation). If you're using [React Router (library)](https://reactrouter.com/start/library/installation) see our -> [React SDK here](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/). +The official Sentry SDK for monitoring React Router applications in framework mode. -## Links +For React Router in library mode, use the [React SDK](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/). -- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/react-router/) +## Documentation -## General +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/react-router/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/) +- [Manual setup](https://docs.sentry.io/platforms/javascript/guides/react-router/manual-setup/) -This package is a wrapper around `@sentry/node` for the server and `@sentry/browser` for the client side. +## Support -## Manual Setup - -### Expose Hooks - -React Router exposes two hooks in your `app` folder (`entry.client.tsx` and `entry.server.tsx`). -If you do not see these two files, expose them with the following command: - -```bash -npx react-router reveal -``` - -### Client-Side Setup - -Initialize the SDK in your `entry.client.tsx` file: - -```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___', - integrations: [Sentry.reactRouterTracingIntegration()], - - tracesSampleRate: 1.0, // Capture 100% of the transactions - - // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled - tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], -}); - -startTransition(() => { - hydrateRoot( - document, - - - , - ); -}); -``` - -Now, update your `app/root.tsx` file to report any unhandled errors from your global error boundary: - -```tsx -import * as Sentry from '@sentry/react-router'; - -export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { - let message = 'Oops!'; - let details = 'An unexpected error occurred.'; - let stack: string | undefined; - - if (isRouteErrorResponse(error)) { - message = error.status === 404 ? '404' : 'Error'; - details = error.status === 404 ? 'The requested page could not be found.' : error.statusText || details; - } else if (error && error instanceof Error) { - // you only want to capture non 404-errors that reach the boundary - Sentry.captureException(error); - if (import.meta.env.DEV) { - details = error.message; - stack = error.stack; - } - } - - return ( -
-

{message}

-

{details}

- {stack && ( - 
-          {stack}
-
- )} -
- ); -} -// ... -``` - -### Server-Side Setup - -Create an `instrument.server.mjs` file in the root of your app: - -```js -import * as Sentry from '@sentry/react-router'; - -Sentry.init({ - dsn: '___PUBLIC_DSN___', - tracesSampleRate: 1.0, // Capture 100% of the transactions -}); -``` - -In your `entry.server.tsx` file, import the instrumentation file at the very top, export the -`instrumentations` array, and export the `handleError` function: - -```tsx -import './instrument.server.mjs'; -import * as Sentry from '@sentry/react-router'; -import { type HandleErrorFunction } from 'react-router'; - -export const handleError: HandleErrorFunction = (error, { request }) => { - // React Router may abort some interrupted requests, report those - if (!request.signal.aborted) { - Sentry.captureException(error); - - // make sure to still log the error so you can see it - console.error(error); - } -}; - -// Register the Sentry server instrumentation so loaders, actions and middleware are traced. -export const instrumentations = [Sentry.createSentryServerInstrumentation()]; -// ... rest of your server entry -``` - -### Loading the Instrumentation via `--import` (Alternative) - -Instead of importing the instrumentation file at the top of `entry.server.tsx`, you can load it before -the application starts via the `--import` command line option. Since React Router runs in ESM mode, -update the `start` and `dev` scripts accordingly: - -```json -"scripts": { - "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev", - "start": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js", -} -``` - -## Build-time Config - -Update your vite.config.ts file to include the `sentryReactRouter` plugin and also add your config options to the vite config (this is required for uploading sourcemaps at the end of the build): - -```ts -import { reactRouter } from '@react-router/dev/vite'; -import { sentryReactRouter } from '@sentry/react-router/vite'; -import { defineConfig } from 'vite'; - -const sentryConfig = { - authToken: '...', - org: '...', - project: '...', - // rest of your config -}; - -export default defineConfig(config => { - return { - plugins: [reactRouter(), sentryReactRouter(sentryConfig, config)], - sentryConfig, - }; -}); -``` - -Next, in your `react-router.config.ts` file, include the `sentryOnBuildEnd` hook: - -```ts -import type { Config } from '@react-router/dev/config'; -import { sentryOnBuildEnd } from '@sentry/react-router/vite'; - -export default { - ssr: true, - buildEnd: sentryOnBuildEnd, -} satisfies Config; -``` +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md) From 32809d9fcc68f4eb1fb9e3591736fc6dee4ec764 Mon Sep 17 00:00:00 2001 From: Nicolas Hrubec Date: Wed, 23 Sep 2026 11:09:43 +0200 Subject: [PATCH 2/2] docs(react-router): Simplify README documentation links Co-Authored-By: GPT-6 --- packages/react-router/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-router/README.md b/packages/react-router/README.md index dafbfad6ddb3..38d6dde98c94 100644 --- a/packages/react-router/README.md +++ b/packages/react-router/README.md @@ -18,7 +18,6 @@ For React Router in library mode, use the [React SDK](https://docs.sentry.io/pla - [Getting started](https://docs.sentry.io/platforms/javascript/guides/react-router/) - [Configuration](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/) -- [Manual setup](https://docs.sentry.io/platforms/javascript/guides/react-router/manual-setup/) ## Support