Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

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

Open
3 tasks done
okvic77 opened this issue Dec 28, 2024 · 2 comments
Open
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: browser Issues related to the Sentry Browser SDK
Projects
Status: No status
Development

No branches or pull requests

3 participants