Maximum call stack size exceeded for nested routes (potential regression)

[dawsonbooth]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

8.45.0 and greater

Framework Version

18.3.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

EDIT: https://stackblitz.com/edit/github-7tjxzc-f7d7tmwl?file=src%2Fmain.tsx

I'll work on getting an example up, but may take some time. Here's how I'm setting up Sentry – this all worked fine before upgrading the SDK:

if (import.meta.env.VITE_BUILD_ENV !== 'local') {
    Sentry.init({
      environment: import.meta.env.VITE_BUILD_ENV,
      dsn,
      integrations: [
        // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
        Sentry.reactRouterV7BrowserTracingIntegration({
          useEffect,
          useLocation,
          useNavigationType,
          createRoutesFromChildren,
          matchRoutes,
        }),
        Sentry.replayIntegration(),
      ],
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0,
      release: import.meta.env.VITE_COMMIT_HASH,
    })
  }

const ROUTES: RouteObject[] = [
  { path: '/', element: <Navigate to="/sample" /> },
  {
    path: 'sample/*',
    element: <SamplePages />,
  },
  {
    path: 'login',
    element: <LoginPage />,
  },
  {
    path: 'logout',
    element: <LogoutPage />,
  },
  {
    path: '*',
    element: <NotFoundPage />,
  },
]

const Router: React.FC = () => useRoutes(ROUTES)

const ROUTER = createSentryBrowserRouter([
  {
    element: <Outlet />,
    children: [{ path: '/*', element: <Router /> }],
    errorElement: <Fallback error />,
  },
])

<RouterProvider router={ROUTER} />

Steps to Reproduce

1. Run app
2. Click on a link to navigate
3. Observe that navigation did not occur and there is a console error message: "Maximum call stack size exceeded [...]"

Expected Result

Navigation works without error

Actual Result

URL updates but navigation does not occur. Error in console:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at chunk-IR6S3I6Y.mjs:637:93
    at Array.reduce (<anonymous>)
    at matchPath (chunk-IR6S3I6Y.mjs:633:31)
    at matchRouteBranch (chunk-IR6S3I6Y.mjs:557:17)
    at matchRoutesImpl (chunk-IR6S3I6Y.mjs:418:15)
    at matchRoutes (chunk-IR6S3I6Y.mjs:405:10)
    at rebuildRoutePathFromAllRoutes (reactrouterv6-compat-utils.tsx:394:93)
    at rebuildRoutePathFromAllRoutes (reactrouterv6-compat-utils.tsx:408:93)
    at rebuildRoutePathFromAllRoutes (reactrouterv6-compat-utils.tsx:408:93)
    at rebuildRoutePathFromAllRoutes (reactrouterv6-compat-utils.tsx:408:93)
    at rebuildRoutePathFromAllRoutes (reactrouterv6-compat-utils.tsx:408:93)

[dawsonbooth]

FWIW, I've tried with both react-router v6 and v7 (updating the Sentry usage accordingly) but got the same error.

Seemingly related:

• [react-router-6] Nested Routers produce wrong parametrized URL #5997
• fix(react): Add React Router Descendant Routes support. #14304
• Maximum call stack size exceeded on nested Routes in react-router-dom v6 #14877

[onurtemizkan]

Thanks for the issue report @dawsonbooth. We'll try to reproduce it using the instructions.

But if you could provide a reproducible example it would help us a lot.

[onurtemizkan]

@dawsonbooth - Are you wrapping useRoutes as described here?

[dawsonbooth]

@onurtemizkan I was not, but now that I am I'm still running into the same error.

I can't get a working repro made, so I'm thinking it's something weirdly specific to my usage.

Some more context that may be helpful is that removing either the Sentry.wrapCreateBrowserRouterV7 wrapper or the Sentry.init call results in the navigation working as usual, I imagine because as it effectively disables Sentry.

[onurtemizkan]

While I'm also still unable to reproduce the problem, my guess is #15281 would resolve your issue when both useRoutes and createBrowserRouter are wrapped.

That aside, the instrumentation should not crash the application in any specific valid RR usage, so if we can get to reproduce your case without useRoutes wrapped, we also need to fix it separately.

[dawsonbooth]

@onurtemizkan Got a repro! https://stackblitz.com/edit/github-7tjxzc-f7d7tmwl?file=src%2Fmain.tsx

Think you're right as I'm using lazy-loaded routes and page components.

[onurtemizkan]

Thanks for the repro @dawsonbooth! I am able to reproduce this, and working on a fix right now. #15283