feat(react): Add @sentry/react/react-router entry with automatic React Router hooks - #24014
Merged
Conversation
mydea
force-pushed
the
fn/react-router-fox
branch
from
September 3, 2026 13:02
905593c to
028914a
Compare
s1gr1d
reviewed
Sep 3, 2026
s1gr1d
left a comment
s1gr1d
left a comment
Member
There was a problem hiding this comment.
The only confusing thing is the v6 import stuff. This might be tricky for users.
| The existing `@sentry/react` API is unchanged and keeps working; passing the hooks there is now optional too (`useEffect` in particular is no longer used and can be omitted). | ||
|
|
||
| - `@sentry/core` now exports only isomorphic code. Browser-only exports live on `@sentry/core/browser` and server-only exports on `@sentry/core/server`, and neither subpath re-exports the shared surface any more. This keeps server-only code (HTTP instrumentation, ANR, postgres and sql helpers) out of browser bundles. Most of these APIs are also re-exported by the platform SDKs (`@sentry/node`, `@sentry/browser`, ...), which is unchanged, so this only affects code importing straight from `@sentry/core`. TypeScript reports it as `has no exported member`. | ||
| Additionally — for **every** `@sentry/react` routing setup, not just the new entry — the order in which you add the browser tracing integration and wrap your routes no longer matters. Previously `Sentry.init()` had to run before your routes were wrapped (e.g. `withSentryReactRouterV6Routing`, `wrapReactRouterRouting`, `wrapUseRoutes`, `wrapCreateBrowserRouter`); wrapping earlier silently produced uninstrumented routes. Wrapping now reads its configuration when the router renders (or is created), so wrapping at module-evaluation time — before `Sentry.init()` — still instruments correctly. |
Member
There was a problem hiding this comment.
This part can be shortened, it's a bit too detailed for users. Ideally, just say the order does not matter anymore and it does not need to be wrapped after init.
| The `wrapReactRouterRouting`, `wrapUseRoutes`, `wrapCreateBrowserRouter` and `wrapCreateMemoryRouter` helpers are re-exported from `@sentry/react/router` as well. | ||
|
|
||
| ## 3. Removed APIs | ||
| This entry requires `react-router` to be resolvable — it is declared as an optional peer dependency and supports React Router v6, v7 and v8. If you are on React Router v6 with only `react-router-dom` installed, either add `react-router` as a dependency or keep importing `reactRouterBrowserTracingIntegration` from `@sentry/react` and pass the hooks explicitly. |
Member
There was a problem hiding this comment.
react-router is a dependency of react-router-dom (source), so people might not need to install it (it's installed anyway), but pnpm might be stricter with that.
But react-router in v6 also mentions that nothing should be directly imported from there (but I guess thi only applies to users): https://github.com/remix-run/react-router/tree/v6/packages/react-router
From v7, react-router is the package to import from: https://reactrouter.com/7.18.3/upgrading/v6#upgrade-to-v7
Member
Author
There was a problem hiding this comment.
@s1gr1d added e2e tests for react router v6 and v8 as well. in v6 I on purpose did not add the react-router v6 dependency directly and it seems to work, though this may or may not work depending on package manager etc. I think it's fine to recommend people to add this dependency (does not hurt at least) but it should mostly also work without!
mydea
force-pushed
the
fn/react-router-fox
branch
from
September 4, 2026 07:51
28ab460 to
be4a22d
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
size-limit report 📦
|
mydea
force-pushed
the
fn/react-router-fox
branch
from
September 4, 2026 10:56
81f5f97 to
751e21f
Compare
mydea
force-pushed
the
fn/react-router-fox
branch
2 times, most recently
from
September 4, 2026 11:11
cdf0bcf to
b597f2c
Compare
mydea
marked this pull request as ready for review
September 4, 2026 11:56
mydea
requested review from
chargome and
s1gr1d
and removed request for
a team
September 4, 2026 11:56
chargome
reviewed
Sep 4, 2026
chargome
reviewed
Sep 4, 2026
Comment on lines
+815
to
+819
| if (!getRouterConfig(getClient())) { | ||
| return <UninstrumentedRoutes routes={routes} locationArg={locationArg} />; | ||
| } | ||
| return <SentryRoutes routes={routes} locationArg={locationArg} />; | ||
| }; |
Member
There was a problem hiding this comment.
Hmm I think if someone call initat a later point than we recommend, then this will entirely wipe the full component tree?
Member
Author
There was a problem hiding this comment.
can we avoid this? I would tend to say that's "fine" (meaning, what else should we do/should happen?), but will def. defer to your POV on this as you 've got way more react experience xD
Member
Author
There was a problem hiding this comment.
I actually changed this to hopefully fix this better
mydea
force-pushed
the
fn/react-router-fox
branch
from
September 7, 2026 08:15
2223ba8 to
46ca2f9
Compare
mydea
changed the title
@sentry/react/router entry with automatic React Router hooks@sentry/react/react-router entry with automatic React Router hooks
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 46ca2f9. Configure here.
chargome
approved these changes
Sep 7, 2026
chargome
left a comment
chargome
left a comment
Member
There was a problem hiding this comment.
Thanks for addressing the changes!
mydea
enabled auto-merge (squash)
September 7, 2026 11:48
…er hooks Add a new `@sentry/react/router` subpath export that statically imports the required hooks from `react-router` and exposes a `reactRouterBrowserTracingIntegration()` variant that supplies them as defaults, so consumers no longer have to pass `useLocation`, `useNavigationType`, `createRoutesFromChildren` and `matchRoutes` themselves (they can still override via options). `react-router` is declared as an optional peer dependency (6.x || 7.x || 8.x); the import lives only in the separate entry so the main barrel stays free of `react-router` for plain-React / CJS consumers. Also tighten the router instrumentation to only require the hooks each function actually uses, and make `useEffect` optional: it was never used internally (React's own effect hook is used instead), so it is no longer part of any readiness guard. The option is kept for backwards compatibility. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MjLdAGt9CHRbbJyBSCnduV
Make the router `matchRoutes` (and the render-time hooks) flow as explicit parameters instead of being read from module scope everywhere. Only the four entrypoint wrapper factories now read the module-scope hook variables (as a fallback), resolving `hooks?.X ?? _X`; every downstream helper receives `matchRoutes` as a required argument. The module-scope `_matchRoutes` in `utils.ts` is removed entirely. Each public wrapper (`wrapReactRouterRouting`, `wrapUseRoutes`, `wrapCreateBrowserRouter`, `wrapCreateMemoryRouter` and their v6/v7 aliases) gains an optional `hooks` argument to pass the hooks directly. The `@sentry/react/router` entry uses this to expose defaulted wrapper variants that bake in the `react-router` hooks, matching its zero-config integration. Pure refactor - no behavior change; the existing test suite passes unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MjLdAGt9CHRbbJyBSCnduV
…odule scope Replace all the ambient module-scope variables the React Router instrumentation used to share between the browser tracing integration and the routing wrappers with a single per-client `ReactRouterConfig`, held in a `WeakMap<Client, ReactRouterConfig>` and set once in the integration's `setup()`. A single `config` object is then threaded through the call chain (captured in closures for the lazy/async paths), replacing the previous per-hook threading. This removes `_matchRoutes`, `_useLocation`, `_useNavigationType`, `_createRoutesFromChildren`, `_enableAsyncRouteHandlers`, `_lazyRouteTimeout`, `_lazyRouteManifest`, `_basename`, `_stripBasename`/`initializeRouterUtils`, and the `CLIENTS_WITH_INSTRUMENT_NAVIGATION` WeakSet. Config is now per-client (correct for multiple clients) rather than last-writer-wins global state, and `basename` is copied per router so one router's basename can't leak into another sharing the same client. The wrappers read the config from the client at render/creation time via a small outer/inner split, which is Rules-of-Hooks safe and makes wrapping order-independent: wrapping routes before `Sentry.init()` runs now still instruments once the app renders. The `@sentry/react/router` wrappers become plain re-exports again (they read the hooks the entry's integration stores on the client). The integration is composed with `extendIntegration`, and the now-unused per-hook `hooks?` params are dropped. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MjLdAGt9CHRbbJyBSCnduV
Add the v11 MIGRATION.md entry for the new `@sentry/react/router` entry point, and `react-router-7-router-entry`, a React Router v7 SPA that configures tracing purely through it - `reactRouterBrowserTracingIntegration()` is called with no arguments and `wrapReactRouterRouting` comes from the same entry. The span tests assert pageload and navigation transactions still get parameterized route names. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MjLdAGt9CHRbbJyBSCnduV
Co-authored-by: Sigrid <32902192+s1gr1d@users.noreply.github.com>
…d v8 Add `react-router-6-router-entry` (React 18) and `react-router-8-router-entry` (React 19) alongside the existing v7 app, all configured purely through `@sentry/react/router` (zero-arg integration + `wrapReactRouterRouting`). Each has the full span/error/navigation-trace-propagation suite and runs `tsc --noEmit` in `test:assert` so CI verifies the `@sentry/react/router` types match against each React Router major (tsconfig uses `moduleResolution: bundler` so the subpath's exports-map types resolve). The v6 app depends only on `react-router-dom` (not `react-router` directly) - this is the common real-world v6 setup and exercises that the entry's `react-router` import still resolves via the copy `react-router-dom` pulls in. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MjLdAGt9CHRbbJyBSCnduV
The v7 router-entry app only ran Playwright and its tsconfig used `moduleResolution: "node"`, which ignores the package `exports` map and so cannot resolve the `@sentry/react/router` subpath types - meaning it never type-checked the new API, unlike the v6/v8 apps. Switch it to `moduleResolution: "bundler"` and run `tsc --noEmit` in `test:assert`, matching the other two. Verified locally that all three (v6/v7/v8) type-check against their respective React Router major. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move the `wrapReactRouterRouting(Routes)` call into a separate `sentry-routes.tsx` module that `main.tsx` imports, so it runs at module-evaluation time BEFORE `Sentry.init()` is called. This exercises the order-independence of the `@sentry/react/router` setup end-to-end: the existing pageload/navigation span tests still expect parameterized route names, which only holds if wrapping before init still instruments (the wrapper reads its config at render time, after init). v6 and v8 keep the normal init-first order, so both orders are covered across the apps. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Renames the `@sentry/react/router` subpath export to `@sentry/react/react-router` (source `src/router.ts` -> `src/react-router.ts`) and adds a `typesVersions` mapping so the subpath's types resolve under classic `moduleResolution: node`, which ignores the `exports` map. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Charly Gomez <charly.gomez1310@gmail.com>
mydea
force-pushed
the
fn/react-router-fox
branch
from
September 7, 2026 12:26
3a0fc3c to
bca9fd7
Compare
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Adds a new
@sentry/react/react-routerentry point so React Router users no longer have to threaduseLocation/useNavigationType/matchRoutes/createRoutesFromChildrenintoreactRouterBrowserTracingIntegration— the entry pulls them fromreact-routerand supplies them as defaults.react-routeris declared as an optional peer dependency (v6/v7/v8); the import lives only in the separate entry, so the main@sentry/reactbarrel stays free ofreact-routerfor plain-React and CJS/SSR consumers.Under the hood, the React Router instrumentation was reworked to stop sharing state through ambient module-scope variables. All integration configuration (the router hooks,
stripBasename,enableAsyncRouteHandlers,lazyRouteTimeout,lazyRouteManifest,basename, and the navigation-instrumentation flag) now lives in a single per-clientReactRouterConfigheld in aWeakMap<Client, …>and threaded explicitly through the call chain.A direct consequence, for every
@sentry/reactrouting setup — not just the new entry — is that the order in which you add the browser tracing integration and wrap your routes no longer matters. PreviouslySentry.init()had to run before your routes were wrapped (withSentryReactRouterV6Routing,wrapReactRouterRouting,wrapUseRoutes,wrapCreateBrowserRouter, …), and wrapping earlier silently produced uninstrumented routes. Wrapping now reads its config when the router renders (or is created), so wrapping at module-evaluation time beforeSentry.init()still instruments correctly.Root cause
The pre-existing design shared the integration's config with the routing wrappers through module-scope globals, which were per-module rather than per-client (so multiple Sentry clients clobbered each other) and coupled wrap-order to init-order (wrapping routes before
Sentry.init()produced uninstrumented components).Decisions
@sentry/reactships CJS and is consumed server-side (Next.js, SSR, Jest). A staticimport from 'react-router'in the main barrel would crash every consumer that doesn't havereact-routerinstalled; a dynamic import would violate the repo's static-analyzability policy. A dedicated entry (the same pattern@sentry/solid/solidrouteralready uses) keeps the main barrel import-free.WeakMap<Client>pattern in the same file) makes it per-client-correct, makesbasenameper-router via a shallow copy instead of a last-writer-wins global, and — because the wrappers read config at render/creation time via a Rules-of-Hooks-safe outer/inner split — makes wrapping order-independent w.r.t.Sentry.init()for all routing APIs.initializeRouterUtils/_stripBasenameand theCLIENTS_WITH_INSTRUMENT_NAVIGATIONWeakSet were folded into the threaded config; the integration is composed withextendIntegration.useEffectis no longer used internally (React's own effect hook is used); it stays an optional, ignored option for backwards compatibility.The existing
@sentry/reactunit suite passes unchanged; new e2e apps for React Router v6, v7 and v8 (react-router-{6,7,8}-router-entry) exercise the zero-config setup end-to-end and type-check the@sentry/react/react-routerAPI against each major viatsc --noEmit; a v11MIGRATION.mdentry documents the new entry point and the order-independence.