fix(react): Add support for React Router sub-routes from `handle` by onurtemizkan · Pull Request #17277 · getsentry/sentry-javascript

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan · 2025-07-31T20:39:44Z

Adds support for lazy loading sub-routes / components using the pattern below:

constroutes[// ...{path: 'part1',handle: {lazyChildren: ()=>import('./pages/SomeMoreNestedRoutes').then((mod)=>mod.someMoreNestedRoutes),},},]

lazyChildren is not a predefined key; it can be anything returning renderable data.

Not sure about the widespread usage of the pattern, but as it requires a recursive search inside the whole route tree, it potentially creates performance overhead.
So, added a new option [enableAsyncRouteHandlers] to the RR Tracing Integration and these checks will only run when it's set.

github-actions · 2025-08-06T09:24:07Z

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.11 kB	-	-
@sentry/browser - with treeshaking flags	22.68 kB	-	-
@sentry/browser (incl. Tracing)	39.83 kB	-	-
@sentry/browser (incl. Tracing, Replay)	77.92 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	67.77 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.63 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	94.73 kB	-	-
@sentry/browser (incl. Feedback)	40.77 kB	-	-
@sentry/browser (incl. sendFeedback)	28.77 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.66 kB	-	-
@sentry/react	25.83 kB	-	-
@sentry/react (incl. Tracing)	41.8 kB	+0.07%	+26 B 🔺
@sentry/vue	28.59 kB	-	-
@sentry/vue (incl. Tracing)	41.64 kB	-	-
@sentry/svelte	24.14 kB	-	-
CDN Bundle	25.62 kB	-	-
CDN Bundle (incl. Tracing)	39.72 kB	-	-
CDN Bundle (incl. Tracing, Replay)	75.77 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.19 kB	-	-
CDN Bundle - uncompressed	74.89 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.52 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	231.78 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	244.38 kB	-	-
@sentry/nextjs (client)	43.83 kB	-	-
@sentry/sveltekit (client)	40.27 kB	-	-
@sentry/node-core	47.73 kB	-0.01%	-2 B 🔽
@sentry/node	146.62 kB	-	-
@sentry/node - without tracing	91.83 kB	-0.01%	-1 B 🔽
@sentry/aws-serverless	103.27 kB	-	-

View base workflow run

chargome

Thank you!

…7277)

…es (#19086) This PR will resolve the core reason for the series of fixes / handling for automatic lazy-route resolution for a while. Related: #18898, #18881, #18346, #18155, #18098, #17962, #17867, #17438, #17277 The core issue we have been trying to tackle is not having access to the complete route hierarchy when asynchronously loaded lazy routes are used. React Router provides a route manifest that we can use while matching parameterized transaction names with routes in all cases except this lazy-routes pattern. This problem has been discussed on React Router: - remix-run/react-router#11113 While this has been [addressed](remix-run/react-router#11626) for Remix / React Router (Framework Mode), it's still not available in Library Mode. The manifest contains the lazily-loaded route, only when it's navigated to. While waiting for navigation, our transactions can be dropped for several reasons, such as user behaviour like switching tabs (`document.hidden` guard), hitting timeouts like `idleTimeout`, and potentially other reasons. This results in incomplete transaction naming with leftover wildcards, which caused broken aggregation on the Sentry dashboard. The series of attempts to fix this while keeping automatic route discovery has been prone to race conditions and required special-case handling of each edge case scenario, also requiring a considerable amount of internal logic, affecting our readability and performance. At the end, all failed in giving completely robust and deterministic results on the customers' side. This PR proposes a new option: `lazyRouteManifest` specifically for lazy routes. This will let us have initial information about the route hierarchy. So we can assign correct parameterized transaction names without needing to wait for navigated state. It's a static array of routes in parameterized format (needs to be maintained by the users on route hierarchy updates) like: ```ts Sentry.reactRouterV7BrowserTracingIntegration({ // ... enableAsyncRouteHandlers: true lazyRouteManifest: [ '/', '/pricing', '/features', '/login', '/signup', '/forgot-password', '/reset-password/:token', '/org/:orgSlug', '/org/:orgSlug/dashboard', '/org/:orgSlug/projects', '/org/:orgSlug/projects/:projectId', '/org/:orgSlug/projects/:projectId/settings', '/org/:orgSlug/projects/:projectId/issues', '/org/:orgSlug/projects/:projectId/issues/:issueId', '/org/:orgSlug/team', '/org/:orgSlug/team/:memberId', '/org/:orgSlug/settings', '/org/:orgSlug/billing', '/admin', '/admin/users', '/admin/users/:userId', '/admin/orgs', '/admin/orgs/:orgId', ], }) ``` - This will only be active when `enableAsyncRouteHandlers` is set to `true` - To match URLs with given routes, we mimic React Router's own implementation. - When this is not provided or fails, it falls back to the current behaviour - This manifest is primarily for lazy routes, but the users can also add their non-lazy routes here for convenience or consistency. - Also added E2E tests that will fail when (if at some point) React Router manifests include the lazy routes before navigation, so we'll be aware and plan depending on that manifest instead. - We can do a cleanup for the race-condition / edge-case handling part of the code in a follow-up PR. Closes#19090 (added automatically)

onurtemizkan requested a review from chargome July 31, 2025 20:39

This comment was marked as outdated.
Sign in to view

onurtemizkan marked this pull request as draft August 1, 2025 05:23

onurtemizkan added 3 commits August 4, 2025 09:46

fix(react): Add support for React Router sub-routes from handle
0febe4f

Make the implementation more readable.
0c5f0bc

Remove updates on other test apps.
244a953

onurtemizkan force-pushed the onur/react-router-support-async-handle branch from 728fb60 to 244a953Compare August 4, 2025 08:46

onurtemizkan marked this pull request as ready for review August 4, 2025 09:29

This comment was marked as outdated.
Sign in to view

Simplify
d8216c1

This comment was marked as outdated.
Sign in to view

Add support for parameterized pageload transactions
06e535e

onurtemizkan force-pushed the onur/react-router-support-async-handle branch from fea5834 to 06e535eCompare August 5, 2025 05:43

This comment was marked as outdated.
Sign in to view

Prevent duplicate children in addResolvedRoutesToParent
e968adf

onurtemizkan force-pushed the onur/react-router-support-async-handle branch from 81c1bc5 to e968adfCompare August 5, 2025 06:00

Only run async handler checks when it's enabled on the integration
2e0a521

chargome self-assigned this Aug 6, 2025

AbhiPrasad self-requested a review August 7, 2025 13:36

chargome reviewed Aug 7, 2025
View reviewed changes

Comment threaddev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx Outdated
Comment threadpackages/react/src/reactrouterv6-compat-utils.tsx

Add JSDocs for stripBasename and enableAsyncRouteHandlers
739e50a

This comment was marked as outdated.
Sign in to view

onurtemizkan added 2 commits August 7, 2025 20:31

Remove replay from e2e test app
8815203

Remove unnecessary escape
1bb1630

chargome approved these changes Aug 8, 2025
View reviewed changes

chargome merged commit ca4fba6 into developAug 8, 2025
186 checks passed

chargome deleted the onur/react-router-support-async-handle branch August 8, 2025 08:54

rk-1203 mentioned this pull request Aug 14, 2025
Backport the fix for lazy loaded routes to show route params correctly in transactions #17417
Closed
3 tasks

onurtemizkan added a commit that referenced this pull request Aug 20, 2025
fix(react): Add support for React Router sub-routes fromhandle(#1…
91044d1
…7277)

onurtemizkan mentioned this pull request Aug 20, 2025
fix(v8/react): Add support for React Router sub-routes from handle (#17277) #17433
Closed

This was referenced Sep 29, 2025
Bump @sentry/react from 8.55.0 to 10.16.0 Pouria-FOSSA/dependabot-metadata-test#65
Closed
Bump @sentry/react from 8.55.0 to 10.17.0 Pouria-FOSSA/dependabot-metadata-test#66
Closed

This was referenced Oct 7, 2025
Bump @sentry/react from 8.55.0 to 10.18.0 Pouria-FOSSA/dependabot-metadata-test#68
Closed
Bump @sentry/react from 8.55.0 to 10.19.0 Pouria-FOSSA/dependabot-metadata-test#70
Closed

This was referenced Oct 15, 2025
Bump @sentry/react from 8.55.0 to 10.20.0 Pouria-FOSSA/dependabot-metadata-test#71
Closed
Bump @sentry/react from 8.55.0 to 10.21.0 Pouria-FOSSA/dependabot-metadata-test#72
Closed

onurtemizkan mentioned this pull request Jan 29, 2026
feat(react): Add lazyRouteManifest option to resolve lazy-route names #19086
Merged

github-actionsBot mentioned this pull request Jan 29, 2026
feat(react): Add lazyRouteManifest option to resolve lazy-route names #19090
Closed