fix(react): Avoid multiple name updates on navigation spans

[onurtemizkan]

This patch prevents name updates on navigation spans from being applied more than once.

This was fine and allowed for cross-usage of different instrumentation ways (such as instrumenting useRoutes and createBrowserRouter together), and didn't create any issues. But after adding support for lazy routes, it led to incorrect transaction names, especially when there's a navigation between two lazily-loaded routes.

While on it, I also had to do some refactoring to keep the code readable and maintainable, so now reactrouterv6-compat-utils is separated into 3 source files (instrumentation, common utils, and lazy routes specific functionality).

[github-actions]

size-limit report 📦

Path	Size	% Change	Change
@sentry/browser	24.16 kB	-	-
@sentry/browser - with treeshaking flags	22.73 kB	-	-
@sentry/browser (incl. Tracing)	39.87 kB	-	-
@sentry/browser (incl. Tracing, Replay)	78.23 kB	-	-
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	68.02 kB	-	-
@sentry/browser (incl. Tracing, Replay with Canvas)	82.91 kB	-	-
@sentry/browser (incl. Tracing, Replay, Feedback)	95.03 kB	-	-
@sentry/browser (incl. Feedback)	40.83 kB	-	-
@sentry/browser (incl. sendFeedback)	28.81 kB	-	-
@sentry/browser (incl. FeedbackAsync)	33.7 kB	-	-
@sentry/react	25.88 kB	-	-
@sentry/react (incl. Tracing)	41.89 kB	+0.06%	+23 B 🔺
@sentry/vue	28.64 kB	-	-
@sentry/vue (incl. Tracing)	41.69 kB	-	-
@sentry/svelte	24.18 kB	-	-
CDN Bundle	25.66 kB	-	-
CDN Bundle (incl. Tracing)	39.75 kB	-	-
CDN Bundle (incl. Tracing, Replay)	76.03 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback)	81.46 kB	-	-
CDN Bundle - uncompressed	74.96 kB	-	-
CDN Bundle (incl. Tracing) - uncompressed	117.59 kB	-	-
CDN Bundle (incl. Tracing, Replay) - uncompressed	232.68 kB	-	-
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	245.28 kB	-	-
@sentry/nextjs (client)	43.89 kB	-	-
@sentry/sveltekit (client)	40.32 kB	-	-
@sentry/node-core	47.99 kB	-0.01%	-1 B 🔽
@sentry/node	149.25 kB	-	-
@sentry/node - without tracing	92.24 kB	-	-
@sentry/aws-serverless	104.91 kB	+0.01%	+1 B 🔺

View base workflow run

[Copilot]

Pull Request Overview

This PR refactors the React Router v6/v7 compatibility utilities to prevent multiple navigation span name updates and fix incorrect transaction names for lazy routes.

• Refactors the reactrouterv6-compat-utils module into three separate files for better organization
• Implements tracking to prevent duplicate navigation span name updates during navigation
• Fixes transaction naming issues that occurred when navigating between lazy routes

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/react/test/reactrouterv6-compat-utils.test.tsx	Removes entire test file as functionality moved to new modules
packages/react/test/reactrouter-cross-usage.test.tsx	Removes assertions expecting multiple updateName calls since they're now prevented
packages/react/test/reactrouter-compat-utils/utils.test.ts	Adds comprehensive tests for utility functions moved from old module
packages/react/test/reactrouter-compat-utils/lazy-routes.test.ts	Adds tests for lazy route handling functionality
packages/react/test/reactrouter-compat-utils/instrumentation.test.tsx	Adds tests for instrumentation-specific functionality
packages/react/src/reactrouterv7.tsx	Updates import path to new module structure
packages/react/src/reactrouterv6.tsx	Updates import path to new module structure
packages/react/src/reactrouter-compat-utils/utils.ts	New utility functions module with core router utilities
packages/react/src/reactrouter-compat-utils/lazy-routes.tsx	New module for lazy route handling functionality
packages/react/src/reactrouter-compat-utils/instrumentation.tsx	New main instrumentation module with navigation span tracking
packages/react/src/reactrouter-compat-utils/index.ts	New index file exporting all functionality from sub-modules
dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts	Adds tests for navigation between lazy routes
dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx	Adds navigation link to another lazy route
dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx	Adds navigation links to lazy routes
dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx	Adds new lazy route component with navigation links
dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx	Adds another lazy route configuration

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[chargome]

Phew big change – Did not review all the tests in detail but looks good 🚀

[chargome]

@onurtemizkan Added some minor things myself so I can release that tomorrow, thanks for the refactor!