feat(react-router): Add Instrumentation API guide #16171
+236
−4
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
onurtemizkan
force-pushed
the
onur/react-router-instrumentation-api
branch
from
612602d to
22bf82d
Compare
inventarSarah
requested changes
Jan 28, 2026
Collaborator
inventarSarah
left a comment
inventarSarah
left a comment
There was a problem hiding this comment.
Looks good overall! 👍
I added a few suggestions to make the writing more consistent
|
|
||
| </Alert> | ||
|
|
||
| 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 manual wrapper functions. Transaction names use parameterized route patterns (e.g., `/users/:id`), and errors are automatically captured with proper context. |
Collaborator
There was a problem hiding this comment.
q: "Transaction names use parameterized route patterns" -> is this true for all transactions or specific ones?
| <SplitSection> | ||
| <SplitSectionText> | ||
|
|
||
| **Before** (manual wrappers): |
Collaborator
There was a problem hiding this comment.
Suggested change
| **Before** (manual wrappers): | |
| **Before migrating** (manual wrappers): |
| <SplitSection> | ||
| <SplitSectionText> | ||
|
|
||
| **After** (instrumentation API): |
Collaborator
There was a problem hiding this comment.
Suggested change
| **After** (instrumentation API): | |
| **After migrating** (instrumentation API): |
|
|
||
| </Alert> | ||
|
|
||
| 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 manual wrapper functions. Transaction names use parameterized route patterns (e.g., `/users/:id`), and errors are automatically captured with proper context. |
Collaborator
There was a problem hiding this comment.
Suggested change
| 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 manual wrapper functions. Transaction names use parameterized route patterns (e.g., `/users/:id`), and errors are automatically captured with proper context. | |
| 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 use parameterized route patterns, such as `/users/:id`, and errors are automatically captured with proper context. |
| Export `unstable_instrumentations` from your `entry.server.tsx` to enable automatic server-side tracing. | ||
|
|
||
| The `createSentryServerInstrumentation()` function instruments: | ||
|
|
Collaborator
There was a problem hiding this comment.
Does it make sense to you to simplify this list?
It looks to me like a lot of repetition that adds little value.
For example:
The `createSentryServerInstrumentation()` function creates spans for:
- Request handlers (root HTTP server spans)
- Loaders
- Actions
- Middleware
- Lazy route loading
|
|
||
| **After** (instrumentation API): | ||
|
|
||
| Add the instrumentation export once in `entry.server.tsx`, and all loaders/actions are automatically traced. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Add the instrumentation export once in `entry.server.tsx`, and all loaders/actions are automatically traced. | |
| After adding the instrumentation export once in `entry.server.tsx`, all loaders and actions are traced automatically. |
|
|
||
| If you're not seeing spans for your loaders and actions: | ||
|
|
||
| 1. **Check React Router version**: The instrumentation API requires React Router 7.9.5 or later |
Collaborator
There was a problem hiding this comment.
Suggested change
| 1. **Check React Router version**: The instrumentation API requires React Router 7.9.5 or later | |
| 1. Check that the React Router version is 7.9.5 or later |
small updates to the list to make it consistent with the list in the second expandable
| If you're not seeing spans for your loaders and actions: | ||
|
|
||
| 1. **Check React Router version**: The instrumentation API requires React Router 7.9.5 or later | ||
| 2. **Verify the export**: Ensure `unstable_instrumentations` is exported from `entry.server.tsx` |
Collaborator
There was a problem hiding this comment.
Suggested change
| 2. **Verify the export**: Ensure `unstable_instrumentations` is exported from `entry.server.tsx` | |
| 2. Make sure `unstable_instrumentations` is exported from `entry.server.tsx` |
|
|
||
| 1. **Check React Router version**: The instrumentation API requires React Router 7.9.5 or later | ||
| 2. **Verify the export**: Ensure `unstable_instrumentations` is exported from `entry.server.tsx` | ||
| 3. **Check sample rate**: Verify `tracesSampleRate` is set in your server configuration |
Collaborator
There was a problem hiding this comment.
Suggested change
| 3. **Check sample rate**: Verify `tracesSampleRate` is set in your server configuration | |
| 3. Verify `tracesSampleRate` is set in your server configuration |
|
|
||
| 1. Update to the latest SDK version | ||
| 2. Check that the instrumentation export is correctly configured | ||
| 3. The manual wrappers (`wrapServerLoader`, `wrapServerAction`) will log a debug message when skipped |
Collaborator
There was a problem hiding this comment.
Suggested change
| 3. The manual wrappers (`wrapServerLoader`, `wrapServerAction`) will log a debug message when skipped | |
| 3. Verify that the manual wrappers (`wrapServerLoader`, `wrapServerAction`) log a debug message when skipped |
small update for consistency
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
DESCRIBE YOUR PR
Documents: getsentry/sentry-javascript#18580
IS YOUR CHANGE URGENT?
Help us prioritize incoming PRs by letting us know when the change needs to go live.
SLA
Thanks in advance for your help!
PRE-MERGE CHECKLIST
Make sure you've checked the following before merging your changes:
EXTRA RESOURCES