Maximum call stack size exceeded on nested Routes in react-router-dom v6

[Bartozzz]

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

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[Bartozzz]

Related:

• [react-router-6] Nested Routers produce wrong parametrized URL #5997
• fix(react): Add React Router Descendant Routes support. #14304

[aldy505]

Should be transferred to the JS SDK team. cc @lforst @AbhiPrasad

[onurtemizkan]

Thanks for reporting this @Bartozzz. I have tried to reproduce this issue using the info above but unfortunately could not.

Could you please provide a minimal reproduction to help us address this faster?