From d0b17a8d6ff72cb83b556bd337259160b40560c8 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Fri, 12 Jun 2026 12:36:32 +0200 Subject: [PATCH 1/2] update docs --- .../guides/react-router/features/index.mdx | 16 -- .../features/instrumentation-api.mdx | 216 ------------------ .../guides/react-router/manual-setup.mdx | 49 +--- redirects.js | 7 +- 4 files changed, 17 insertions(+), 271 deletions(-) delete mode 100644 docs/platforms/javascript/guides/react-router/features/index.mdx delete mode 100644 docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx diff --git a/docs/platforms/javascript/guides/react-router/features/index.mdx b/docs/platforms/javascript/guides/react-router/features/index.mdx deleted file mode 100644 index f9f320c96131d7..00000000000000 --- a/docs/platforms/javascript/guides/react-router/features/index.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: React Router Features -description: "Learn how Sentry's React Router SDK exposes features for first class integration with the framework." -sidebar_order: 4 ---- - - - -This SDK is currently in **beta**. Beta features are still in progress and may have bugs. Please reach out on -[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. - - - -The Sentry React Router SDK offers React Router-specific features for first class integration with the framework. - - diff --git a/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx b/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx deleted file mode 100644 index d4626cd1e37298..00000000000000 --- a/docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Instrumentation API -description: "Automatic tracing for loaders, actions, middleware, navigations, fetchers, lazy routes, and request handlers using React Router's instrumentation API." -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. - -## Server-Side Setup - - - - - -Export `instrumentations` from your `entry.server.tsx` to enable automatic server-side tracing. - -The `createSentryServerInstrumentation()` function creates spans for: - -- Request handlers (root HTTP server spans) -- Loaders -- Actions -- Middleware -- Lazy route loading - - - - -```tsx {tabTitle:Server} {filename:entry.server.tsx} -import * as Sentry from "@sentry/react-router"; -import { createReadableStreamFromReadable } from "@react-router/node"; -import { renderToPipeableStream } from "react-dom/server"; -import { ServerRouter } from "react-router"; - -export default Sentry.createSentryHandleRequest({ - ServerRouter, - renderToPipeableStream, - createReadableStreamFromReadable, -}); - -export const handleError = Sentry.createSentryHandleError(); - -// Enable automatic server-side instrumentation -export const instrumentations = [ - Sentry.createSentryServerInstrumentation(), -]; -``` - - - - - - - -You can optionally configure error capture behavior: - - - - -```typescript -Sentry.createSentryServerInstrumentation({ - // Capture errors from loaders/actions automatically (default: true) - captureErrors: true, -}); -``` - - - - - -## Client-Side Setup - - - - - -To enable the client-side instrumentation API, pass `useInstrumentationAPI: true` to `reactRouterTracingIntegration()` and provide the `clientInstrumentation` to `HydratedRouter`. - -The client instrumentation creates spans for: - -- Navigations (including back/forward) -- Fetchers -- Client loaders -- Client actions -- Client middleware -- Lazy route loading - - - -`HydratedRouter` doesn't currently invoke client-side instrumentation hooks when running in Framework Mode. As a result, only client-side navigation spans are captured through the SDK's built-in instrumentation. The client-side setup shown here prepares your app for when React Router adds support for invoking these hooks. - - - - - - -```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"; - -const tracing = Sentry.reactRouterTracingIntegration({ - useInstrumentationAPI: true, -}); - -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [tracing], - tracesSampleRate: 1.0, -}); - -startTransition(() => { - hydrateRoot( - document, - - - - ); -}); -``` - - - - - -## Migrating from Manual Wrappers - -If you're using `wrapServerLoader` and `wrapServerAction`, you can migrate to the instrumentation API. The SDK automatically detects when the instrumentation API is active and skips span creation in manual wrappers, so you can migrate incrementally without duplicate spans. - - - - - -**Before migrating** (manual wrappers): - -Without the instrumentation API, each loader and action needs to be wrapped individually. - - - - -```tsx {filename:app/routes/users.$id.tsx} -import * as Sentry from "@sentry/react-router"; - -export const loader = Sentry.wrapServerLoader( - { name: "Load User" }, - async ({ params }) => { - const user = await getUser(params.id); - return { user }; - } -); - -export const action = Sentry.wrapServerAction( - { name: "Update User" }, - async ({ request }) => { - const formData = await request.formData(); - return updateUser(formData); - } -); -``` - - - - - - - -**After migrating** (instrumentation API): - -After adding the instrumentation export once in `entry.server.tsx`, all loaders and actions are traced automatically. - - - - -```tsx {filename:app/routes/users.$id.tsx} -// No Sentry imports or wrappers needed - -export async function loader({ params }) { - const user = await getUser(params.id); - return { user }; -} - -export async function action({ request }) { - const formData = await request.formData(); - return updateUser(formData); -} -``` - - - - - -## Troubleshooting - - - -If you're not seeing spans for your loaders and actions: - -1. Check that the React Router version is 7.9.5 or later -2. Make sure `instrumentations` is exported from `entry.server.tsx` -3. Verify `tracesSampleRate` is set in your server configuration - - - - - -If you're seeing duplicate spans after adding the instrumentation API: - -The SDK automatically detects when the instrumentation API is active and skips span creation in manual wrappers. If you're still seeing duplicates: - -1. Update to the latest SDK version -2. Check that the instrumentation export is correctly configured -3. Enable debug mode to verify the manual wrappers are being skipped—they log a message when the instrumentation API is active - - diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 59d7201555566a..f6df96f0ade297 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -196,49 +196,16 @@ startTransition(() => { ### Configure Server-Side Sentry - + -Automatic server-side instrumentation is currently only supported on: +Sentry's OpenTelemetry-based auto-instrumentation (loaded through `instrument.server.mjs`) is currently only supported on: - **Node 20:** Version \<20.19 - **Node 22:** Version \<22.12 -If you're on a different version, you have two options: +This restriction **doesn't** affect tracing for loaders, actions, middleware, and request handlers. Those are instrumented through React Router's [instrumentation API](https://reactrouter.com/how-to/instrumentation) (the `instrumentations` export shown below, React Router 7.15+), which works on all Node versions. -1. **Recommended**: Use the Instrumentation API (React Router 7.9.5+) for automatic tracing without Node version restrictions -2. **Alternative**: Use our manual server wrappers (shown below) - -For server loaders use `wrapServerLoader`: - -```ts -import * as Sentry from "@sentry/react-router"; - -export const loader = Sentry.wrapServerLoader( - { - name: "Load Some Data", - description: "Loads some data from the db", - }, - async ({ params }) => { - // ... your loader logic - } -); -``` - -For server actions use `wrapServerAction`: - -```ts -import * as Sentry from "@sentry/react-router"; - -export const action = Sentry.wrapServerAction( - { - name: "Submit Form Data", - description: "Processes form submission data", - }, - async ({ request }) => { - // ... your action logic - } -); -``` +On unsupported Node versions, you'll only lose auto-instrumentation for lower-level operations such as outgoing HTTP requests and database queries. @@ -296,7 +263,9 @@ Sentry.init({ -Next, replace the default `handleRequest` and `handleError` functions in your `entry.server.tsx` file with Sentry's wrapped versions: +Next, replace the default `handleRequest` and `handleError` functions in your `entry.server.tsx` file with Sentry's wrapped versions, and export `instrumentations` to enable automatic tracing. + +Exporting `instrumentations` uses React Router's [instrumentation API](https://reactrouter.com/how-to/instrumentation) (React Router 7.15+) to automatically create spans for all loaders, actions, middleware, and request handlers — no need to wrap them individually. @@ -320,6 +289,10 @@ Next, replace the default `handleRequest` and `handleError` functions in your `e + logErrors: false +}); ++// Automatically instruments all server loaders, actions, middleware, ++// and request handlers. Requires React Router 7.15+. ++export const instrumentations = [Sentry.createSentryServerInstrumentation()]; + // ... rest of your server entry ``` diff --git a/redirects.js b/redirects.js index 7d6184211d7aef..dc45e24574aa83 100644 --- a/redirects.js +++ b/redirects.js @@ -963,6 +963,10 @@ const userDocsRedirects = [ source: '/platforms/javascript/guides/aws-lambda/cjs-npm__v9.x/', destination: '/platforms/javascript/guides/aws-lambda/install/cjs-npm__v9.x/', }, + { + source: '/platforms/javascript/guides/react-router/features/instrumentation-api/', + destination: '/platforms/javascript/guides/react-router/manual-setup/', + }, { source: '/platforms/javascript/guides/nextjs/sourcemaps/uploading/', destination: '/platforms/javascript/guides/nextjs/sourcemaps/', @@ -1868,7 +1872,8 @@ const userDocsRedirects = [ }, { source: '/product/insights/mobile-vitals/screen-loads/', - destination: '/product/dashboards/sentry-dashboards/mobile/mobile-vitals/screen-loads/', + destination: + '/product/dashboards/sentry-dashboards/mobile/mobile-vitals/screen-loads/', }, { source: '/product/insights/mobile-vitals/:path*', From b358211fef08c27e476ced5946a8c36021efbeaf Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Fri, 12 Jun 2026 12:52:50 +0200 Subject: [PATCH 2/2] dead link --- .../guides/cloudflare/frameworks/hydrogen-react-router.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx index 110d9bcf2460bc..3ea06f20739ec7 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router.mdx @@ -467,7 +467,6 @@ Our next recommended steps for you are: - Explore [practical guides](/guides) on what to monitor, log, track, and investigate after setup - Learn how to manually capture errors - Continue to customize your configuration -- Make use of [React Router-specific features](/platforms/javascript/guides/react-router/features/) - Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts