Maximum call stack size exceeded on nested Routes in react-router-dom v6 #14877
Description
Environment
self-hosted (https://develop.sentry.dev/self-hosted/)
Steps to Reproduce
"react": "18.3.1"
"react-dom": "18.3.1"
"react-router-dom": "^6.26.1"
"@sentry/react": "8.47.0"
After upgrading to @sentry/react version 8.47.0 to have React Router Descendant Routes support, we encountered a problem with Uncaught RangeError: Maximum call stack size exceeded being thrown on some Routes.
Uncaught RangeError: Maximum call stack size exceeded
at eval (reactrouterv6-compat-utils.js:314:17)
at Array.forEach (<anonymous>)
at getChildRoutesRecursively (reactrouterv6-compat-utils.js:313:20)
at eval (reactrouterv6-compat-utils.js:314:25)
at Array.forEach (<anonymous>)
at getChildRoutesRecursively (reactrouterv6-compat-utils.js:313:20)
at eval (reactrouterv6-compat-utils.js:495:31)
at Array.forEach (<anonymous>)
at eval (reactrouterv6-compat-utils.js:494:18)
at commitHookEffectListMount (react-dom.development.js:23184:26)
at commitPassiveMountOnFiber (react-dom.development.js:24960:13)
at commitPassiveMountEffects_complete (react-dom.development.js:24925:9)
at commitPassiveMountEffects_begin (react-dom.development.js:24912:7)
at commitPassiveMountEffects (react-dom.development.js:24900:3)
at flushPassiveEffectsImpl (react-dom.development.js:27073:3)
at flushPassiveEffects (react-dom.development.js:27018:14)
at performSyncWorkOnRoot (react-dom.development.js:26110:3)
at flushSyncCallbacks (react-dom.development.js:12042:22)
at commitRootImpl (react-dom.development.js:26993:3)
at commitRoot (react-dom.development.js:26716:5)
at finishConcurrentRender (react-dom.development.js:26015:9)
at performConcurrentWorkOnRoot (react-dom.development.js:25843:7)
at workLoop (scheduler.development.js:266:34)
at flushWork (scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)Caused by: React ErrorBoundary RangeError: Maximum call stack size exceeded
at SentryRoutes (webpack-internal:///../node_modules/@sentry/react/build/esm/reactrouterv6-compat-utils.js:484:66)
at BotsRouter (webpack-internal:///./panel/views/bots/BotsRouter.tsx:44:115)
at RenderedRoute (webpack-internal:///../node_modules/react-router/dist/index.js:578:5)
at Routes (webpack-internal:///../node_modules/react-router/dist/index.js:1279:5)
at SentryRoutes (webpack-internal:///../node_modules/@sentry/react/build/esm/reactrouterv6-compat-utils.js:484:66)
at App (webpack-internal:///./panel/views/app/App.tsx:137:82)
at ErrorBoundary (webpack-internal:///../node_modules/@sentry/react/build/esm/errorboundary.js:38:5)
at RootErrorBoundary (webpack-internal:///./panel/views/RootErrorBoundary.tsx:28:19)
at Root (webpack-internal:///./panel/views/Root.tsx:90:86)
at RenderedRoute (webpack-internal:///../node_modules/react-router/dist/index.js:578:5)
at RenderErrorBoundary (webpack-internal:///../node_modules/react-router/dist/index.js:525:5)
at DataRoutes (webpack-internal:///../node_modules/react-router-dom/dist/index.js:692:5)
at Router (webpack-internal:///../node_modules/react-router/dist/index.js:1213:15)
at RouterProvider (webpack-internal:///../node_modules/react-router-dom/dist/index.js:476:5)
The above error occurred in the <SentryRoutes> component:
at SentryRoutes (webpack-internal:///../node_modules/@sentry/react/build/esm/reactrouterv6-compat-utils.js:484:66)
at BotsRouter (webpack-internal:///./panel/views/bots/BotsRouter.tsx:44:115)
at RenderedRoute (webpack-internal:///../node_modules/react-router/dist/index.js:578:5)
at Routes (webpack-internal:///../node_modules/react-router/dist/index.js:1279:5)
at SentryRoutes (webpack-internal:///../node_modules/@sentry/react/build/esm/reactrouterv6-compat-utils.js:484:66)
at App (webpack-internal:///./panel/views/app/App.tsx:137:82)
at ErrorBoundary (webpack-internal:///../node_modules/@sentry/react/build/esm/errorboundary.js:38:5)
at RootErrorBoundary (webpack-internal:///./panel/views/RootErrorBoundary.tsx:28:19)
at Root (webpack-internal:///./panel/views/Root.tsx:90:86)
at RenderedRoute (webpack-internal:///../node_modules/react-router/dist/index.js:578:5)
at RenderErrorBoundary (webpack-internal:///../node_modules/react-router/dist/index.js:525:5)
at DataRoutes (webpack-internal:///../node_modules/react-router-dom/dist/index.js:692:5)
at Router (webpack-internal:///../node_modules/react-router/dist/index.js:1213:15)
at RouterProvider (webpack-internal:///../node_modules/react-router-dom/dist/index.js:476:5)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
We use the pattern described here (<Outlet />) and <Navigate /> to do redirects on deprecated routes:
<SentryRoutes>
<Route>
// Nested Route:
<SentryRoutes>
<Route element={<PrivateRoute />}>
<Route path="create/:draftId" element={<Creator />} />
<Route path="old-create/:draftId" element={<Navigate to="... />} />
<Route path="*" element={<Navigate to={...} />
function PrivateRoute() {
if (!hasAccess) {
return <Navigate to="/" />;
}
if (isLoading) {
return <Loader />;
}
return <Outlet />;
};
It looks like, for some reason getChildRoutesRecursively recursion makes the stack size exceed.
Expected Result
Should be working.
Actual Result
Throws an Uncaught RangeError: Maximum call stack size exceeded.
Product Area
Unknown
Link
No response
DSN
No response
Version
No response