Skip to content

Commit ee7b2b8

Browse files
authored
docs(js): Adapt react router instrumentation docs to new api (#17643)
The api became stable in https://reactrouter.com/changelog#v7150 ref getsentry/sentry-javascript#20690
1 parent f8e0012 commit ee7b2b8

1 file changed

Lines changed: 5 additions & 11 deletions

File tree

docs/platforms/javascript/guides/react-router/features/instrumentation-api.mdx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,15 @@ description: "Automatic tracing for loaders, actions, middleware, navigations, f
44
sidebar_order: 10
55
---
66

7-
<Alert level="warning" title="Experimental">
8-
9-
React Router's instrumentation API is experimental and uses the `unstable_instrumentations` name. The `unstable_` prefix indicates the API may change in minor releases.
10-
11-
</Alert>
12-
13-
React Router 7.9.5+ 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.
7+
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.
148

159
## Server-Side Setup
1610

1711
<SplitLayout>
1812
<SplitSection>
1913
<SplitSectionText>
2014

21-
Export `unstable_instrumentations` from your `entry.server.tsx` to enable automatic server-side tracing.
15+
Export `instrumentations` from your `entry.server.tsx` to enable automatic server-side tracing.
2216

2317
The `createSentryServerInstrumentation()` function creates spans for:
2418

@@ -46,7 +40,7 @@ export default Sentry.createSentryHandleRequest({
4640
export const handleError = Sentry.createSentryHandleError();
4741

4842
// Enable automatic server-side instrumentation
49-
export const unstable_instrumentations = [
43+
export const instrumentations = [
5044
Sentry.createSentryServerInstrumentation(),
5145
];
5246
```
@@ -120,7 +114,7 @@ startTransition(() => {
120114
document,
121115
<StrictMode>
122116
<HydratedRouter
123-
unstable_instrumentations={[tracing.clientInstrumentation]}
117+
instrumentations={[tracing.clientInstrumentation]}
124118
/>
125119
</StrictMode>
126120
);
@@ -204,7 +198,7 @@ export async function action({ request }) {
204198
If you're not seeing spans for your loaders and actions:
205199

206200
1. Check that the React Router version is 7.9.5 or later
207-
2. Make sure `unstable_instrumentations` is exported from `entry.server.tsx`
201+
2. Make sure `instrumentations` is exported from `entry.server.tsx`
208202
3. Verify `tracesSampleRate` is set in your server configuration
209203

210204
</Expandable>

0 commit comments

Comments
 (0)