Skip to content

fix(react): Add support for cross-usage of React Router instrumentations - #15283

Merged
AbhiPrasad merged 8 commits into
developfrom
onur/react-router-break-recursion
Feb 25, 2025
Merged

fix(react): Add support for cross-usage of React Router instrumentations#15283
AbhiPrasad merged 8 commits into
developfrom
onur/react-router-break-recursion

Conversation

@onurtemizkan

@onurtemizkanonurtemizkan commented Feb 4, 2025

Copy link
Copy Markdown
Contributor

This started to be an issue after we added support for descendant React Router routes.

React Router does not limit users to only one way to declare routes. Currently, we provide instrumentation for 3 ways of declaring RR routes:

React Router v6/v7Sentry
useRoutesSentry.wrapUseRoutes
<Routes />Sentry.withReactRouterRouting
createBrowserRouterSentry.wrapCreateBrowserRouter
createHashRouterSentry.wrapCreateBrowserRouter
createMemoryRouterSentry.wrapCreateMemoryRouter

When users decide to declare their routes using more than one of these options together, we risk losing context while rebuilding parameterised span names.

This PR adds:

  • Proper support and context sharing for cross-usage of route declarations
  • E2E tests for pairs of 2 and all three possible methods used together to declare descendant routes.
  • Adds another recursion break for the path rebuild method for cases when the rebuilt path has not changed in a deeper recursive call. (This fixesMaximum call stack size exceeded for nested routes (potential regression) #15279, together with the updates mentioned above)

@codecov

codecovBot commented Feb 4, 2025

Copy link
Copy Markdown

❌ 1 Tests Failed:

Tests completedFailedPassedSkipped
53615359
View the top 1 failed test(s) by shortest run time
test/reactrouter-cross-usage.test.tsx>test/reactrouter-cross-usage.test.tsx
Stack Traces | 0s run time
ReferenceError: jestisnotdefinedtest/reactrouter-cross-usage.test.tsx:33:45

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@github-actions

github-actionsBot commented Feb 5, 2025

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize% ChangeChange
@sentry/browser23.06 KB--
@sentry/browser - with treeshaking flags22.84 KB--
@sentry/browser (incl. Tracing)36.13 KB--
@sentry/browser (incl. Tracing, Replay)73.29 KB--
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags66.71 KB--
@sentry/browser (incl. Tracing, Replay with Canvas)77.9 KB--
@sentry/browser (incl. Tracing, Replay, Feedback)90.48 KB--
@sentry/browser (incl. Feedback)40.21 KB--
@sentry/browser (incl. sendFeedback)27.68 KB--
@sentry/browser (incl. FeedbackAsync)32.48 KB--
@sentry/react24.87 KB--
@sentry/react (incl. Tracing)38.01 KB--
@sentry/vue27.3 KB--
@sentry/vue (incl. Tracing)37.81 KB--
@sentry/svelte23.1 KB--
CDN Bundle24.26 KB--
CDN Bundle (incl. Tracing)36.15 KB--
CDN Bundle (incl. Tracing, Replay)71.15 KB--
CDN Bundle (incl. Tracing, Replay, Feedback)76.33 KB--
CDN Bundle - uncompressed70.93 KB--
CDN Bundle (incl. Tracing) - uncompressed107.31 KB--
CDN Bundle (incl. Tracing, Replay) - uncompressed218.57 KB--
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed231.13 KB--
@sentry/nextjs (client)39.18 KB--
@sentry/sveltekit (client)36.54 KB--
@sentry/node142.09 KB-0.01%-1 B 🔽
@sentry/node - without tracing95.52 KB-0.01%-1 B 🔽
@sentry/aws-serverless119.85 KB--

View base workflow run

@onurtemizkan
onurtemizkanforce-pushed the onur/react-router-break-recursion branch 3 times, most recently from 186754b to 24c7931CompareFebruary 6, 2025 10:44
@onurtemizkan
onurtemizkan marked this pull request as ready for review February 10, 2025 11:46
@onurtemizkanonurtemizkan changed the title fix(react): Break if path is not changed in recursive rebuild.fix(react): Add support for cross-usage of React Router instrumentationsFeb 10, 2025
@onurtemizkan
onurtemizkan requested review from chargome, lforst and s1gr1d and removed request for chargomeFebruary 10, 2025 12:05
@onurtemizkan
onurtemizkanforce-pushed the onur/react-router-break-recursion branch from 24c7931 to 4081708CompareFebruary 10, 2025 12:06

@chargomechargome left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice change!

},
});
const activeSpan = getActiveSpan();
const isAlreadyInNavigationSpan = activeSpan && spanToJSON(activeSpan).op === 'navigation';

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we not also get that directly from the span?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the rest of the uses in the repo, I think op is obtained like this. Could not see a way to get it directly from the span.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove all server related code from this test

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed 👍

"express": "4.20.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "^6.28.0",

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wdyt about testing this one on v7?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated 👍

@onurtemizkan

Copy link
Copy Markdown
ContributorAuthor

Thanks for the review, and sorry for the late updates @chargome.

@AbhiPrasad

Copy link
Copy Markdown
Contributor

I caused a merge conflict for this 😅 - sorry about that! Should be easy to rebase though.

@onurtemizkan
onurtemizkanforce-pushed the onur/react-router-break-recursion branch from 9fcb54f to 88fac09CompareFebruary 25, 2025 17:16
@AbhiPrasad
AbhiPrasad merged commit 5808986 into developFeb 25, 2025
@AbhiPrasad
AbhiPrasad deleted the onur/react-router-break-recursion branch February 25, 2025 19:56
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants

@onurtemizkan@AbhiPrasad@chargome