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

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

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

onurtemizkan
Copy link
Collaborator

@onurtemizkan onurtemizkan commented Feb 4, 2025

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/v7 Sentry
useRoutes Sentry.wrapUseRoutes
<Routes /> Sentry.withReactRouterRouting
createBrowserRouter Sentry.wrapCreateBrowserRouter
createHashRouter Sentry.wrapCreateBrowserRouter
createMemoryRouter Sentry.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 fixes Maximum call stack size exceeded for nested routes (potential regression) #15279, together with the updates mentioned above)

Copy link

codecov bot commented Feb 4, 2025

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
251 1 250 8
View the full list of 1 ❄️ flaky tests
sdk.test.ts SDK-internal behaviorInjects fetch proxy script for SvelteKit&lt;2.16.0

Flake rate in main: 30.00% (Passed 14 times, Failed 6 times)

Stack Traces | 0.134s run time
sdk.test.ts:4:3 Injects fetch proxy script for SvelteKit<2.16.0

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

Copy link
Contributor

github-actions bot commented Feb 5, 2025

size-limit report 📦

Path Size % Change Change
@sentry/browser 22.9 KB - -
@sentry/browser - with treeshaking flags 22.69 KB - -
@sentry/browser (incl. Tracing) 35.78 KB - -
@sentry/browser (incl. Tracing, Replay) 72.59 KB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 66.06 KB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 76.83 KB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 89.57 KB - -
@sentry/browser (incl. Feedback) 39.85 KB - -
@sentry/browser (incl. sendFeedback) 27.53 KB - -
@sentry/browser (incl. FeedbackAsync) 32.32 KB - -
@sentry/react 24.74 KB - -
@sentry/react (incl. Tracing) 37.67 KB - -
@sentry/vue 27.1 KB - -
@sentry/vue (incl. Tracing) 37.48 KB - -
@sentry/svelte 22.94 KB - -
CDN Bundle 24.13 KB - -
CDN Bundle (incl. Tracing) 35.85 KB - -
CDN Bundle (incl. Tracing, Replay) 70.49 KB - -
CDN Bundle (incl. Tracing, Replay, Feedback) 75.63 KB - -
CDN Bundle - uncompressed 70.59 KB - -
CDN Bundle (incl. Tracing) - uncompressed 106.47 KB - -
CDN Bundle (incl. Tracing, Replay) - uncompressed 217.33 KB - -
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 229.89 KB - -
@sentry/nextjs (client) 38.64 KB - -
@sentry/sveltekit (client) 36.21 KB - -
@sentry/node 156.35 KB - -
@sentry/node - without tracing 97.33 KB - -
@sentry/aws-serverless 106.84 KB - -

View base workflow run

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

@chargome chargome left a comment

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
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
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

"express": "4.20.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-router-dom": "^6.28.0",
Copy link
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?

Sign up for free to 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)
2 participants