Skip to content

Maximum Call Stack Size Exceeded When Using Sentry.withSentryReactRouterV7Routing Wrapper #14848

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
3 tasks done
okvic77 opened this issue Dec 28, 2024 · 3 comments · Fixed by #14878
Closed
3 tasks done
Assignees
Labels
Package: browser Issues related to the Sentry Browser SDK

Comments

@okvic77
Copy link

okvic77 commented Dec 28, 2024

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

8.47.0

Framework Version

React 19.0.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

import * as Sentry from "@sentry/react";
import { useEffect, useMemo } from "react";
import {
  useLocation,
  useNavigationType,
  createRoutesFromChildren,
  matchRoutes,
  createBrowserRouter,
  useRouteError,
} from "react-router";
Sentry.init({
  dsn: sentryDSN,
  release: VERSION,
  environment: env,
  tracesSampleRate: 0.1,
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,
  // If the entire session is not sampled, use the below sample rate to sample
  // sessions when an error occurs.
  replaysOnErrorSampleRate: 0.1,
  integrations: [
    // Sentry.browserTracingIntegration(),

    Sentry.reactRouterV7BrowserTracingIntegration({
      useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
      instrumentNavigation: false,
      instrumentPageLoad: false,
    }),

    Sentry.replayIntegration(),
  ],
  // debug: true,
  // tracePropagationTargets: ["localhost", window.location.hostname],
});
const Routes = Sentry.withSentryReactRouterV7Routing(RoutesOriginal);

Steps to Reproduce

Issue Description

  1. I updated and deployed the application to the staging environment.
  2. After deployment, I encountered a Maximum call stack size exceeded error consistently.

Observations

  • The error occurs specifically when I wrap the Routes variable with the Sentry.withSentryReactRouterV7Routing wrapper.
  • If I use the original Routes value (without the Sentry wrapper), the app works as expected.

Debugging Insights

  • During my debugging session, I identified the function getChildRoutesRecursively as the source of the issue.
  • The allRoutes array keeps increasing indefinitely, repeating the same values, which seems to cause the stack overflow.

Expected Result

No error

Actual Result

Video of the error

https://share.cleanshot.com/DKK4fppplggwQKPFpV34

@getsantry getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 3 Dec 28, 2024
@github-actions github-actions bot added the Package: browser Issues related to the Sentry Browser SDK label Dec 28, 2024
@onurtemizkan onurtemizkan self-assigned this Dec 28, 2024
@chargome
Copy link
Member

@onurtemizkan let me know if should jump on this one as well

@onurtemizkan
Copy link
Collaborator

@chargome, I'm trying to reproduce the problem. Should be an easy fix after I get to reproduce it.

Copy link
Contributor

github-actions bot commented Jan 7, 2025

A PR closing this issue has just been released 🚀

This issue was referenced by PR #14878, which was included in the 8.48.0 release.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Package: browser Issues related to the Sentry Browser SDK
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants