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

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/index.tsx

@@ -50,6 +50,12 @@ const router = sentryCreateBrowserRouter(
  lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
  },
  },
+ {
+ path: '/another-lazy',
+ handle: {
+ lazyChildren: () => import('./pages/AnotherLazyRoutes').then(module => module.anotherNestedRoutes),
+ },
+ },
  {
  path: '/static',
  element: <>Hello World</>,

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/AnotherLazyRoutes.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export const anotherNestedRoutes = [
+ {
+ path: 'sub',
+ children: [
+ {
+ index: true,
+ element: (
+ <div id="another-lazy-route">
+ Another Lazy Route
+ <Link to="/lazy/inner/999/888/777" id="navigate-to-inner">
+ Navigate to Inner Lazy Route
+ </Link>
+ </div>
+ ),
+ },
+ {
+ path: ':id',
+ children: [
+ {
+ index: true,
+ element: <div id="another-lazy-route-with-id">Another Lazy Route with ID</div>,
+ },
+ {
+ path: ':subId',
+ element: (
+ <div id="another-lazy-route-deep">
+ Another Deep Lazy Route
+ <Link to="/lazy/inner/111/222/333" id="navigate-to-inner-from-deep">
+ Navigate to Inner from Deep
+ </Link>
+ </div>
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/Index.tsx

@@ -7,6 +7,14 @@ const Index = () => {
  <Link to="/lazy/inner/123/456/789" id="navigation">
  navigate
  </Link>
+ <br />
+ <Link to="/another-lazy/sub" id="navigation-to-another">
+ Navigate to Another Lazy Route
+ </Link>
+ <br />
+ <Link to="/another-lazy/sub/555/666" id="navigation-to-another-deep">
+ Navigate to Another Deep Lazy Route
+ </Link>
  </>
  );
 };

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/src/pages/InnerLazyRoutes.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 export const someMoreNestedRoutes = [
  {
@@ -24,9 +25,15 @@ export const someMoreNestedRoutes = [
  },
  {
  path: ':someAnotherId',
- element: <div id="innermost-lazy-route">
- Rendered
- </div>,
+ element: (
+ <div id="innermost-lazy-route">
+ Rendered
+ <br />
+ <Link to="/another-lazy/sub/888/999" id="navigate-to-another-from-inner">
+ Navigate to Another Lazy Route
+ </Link>
+ </div>
+ ),
  },
  ],
  },

dev-packages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

@@ -54,3 +54,111 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
  expect(event.type).toBe('transaction');
  expect(event.contexts?.trace?.op).toBe('navigation');
 });
+
+test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
+ // First, navigate to the "another-lazy" route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to another lazy route first
+ const navigationToAnotherDeep = page.locator('id=navigation-to-another-deep');
+ await expect(navigationToAnotherDeep).toBeVisible();
+ await navigationToAnotherDeep.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the first lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the first lazy route to the second lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ // Click the navigation link from within the first lazy route to the second lazy route
+ const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
+ await expect(navigationToInnerFromDeep).toBeVisible();
+ await navigationToInnerFromDeep.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the second lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});
+
+test('Creates navigation transactions from inner lazy route to another lazy route', async ({ page }) => {
+ // First, navigate to the inner lazy route
+ const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+ );
+ });
+
+ await page.goto('/');
+
+ // Navigate to inner lazy route first
+ const navigationToInner = page.locator('id=navigation');
+ await expect(navigationToInner).toBeVisible();
+ await navigationToInner.click();
+
+ const firstEvent = await firstTransactionPromise;
+
+ // Check if the inner lazy route content is rendered
+ const innerLazyContent = page.locator('id=innermost-lazy-route');
+ await expect(innerLazyContent).toBeVisible();
+
+ // Validate the first transaction event
+ expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+ expect(firstEvent.type).toBe('transaction');
+ expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+
+ // Now navigate from the inner lazy route to another lazy route
+ const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+ return (
+ !!transactionEvent?.transaction &&
+ transactionEvent.contexts?.trace?.op === 'navigation' &&
+ transactionEvent.transaction === '/another-lazy/sub/:id/:subId'
+ );
+ });
+
+ // Click the navigation link from within the inner lazy route to another lazy route
+ const navigationToAnotherFromInner = page.locator('id=navigate-to-another-from-inner');
+ await expect(navigationToAnotherFromInner).toBeVisible();
+ await navigationToAnotherFromInner.click();
+
+ const secondEvent = await secondTransactionPromise;
+
+ // Check if the another lazy route content is rendered
+ const anotherLazyContent = page.locator('id=another-lazy-route-deep');
+ await expect(anotherLazyContent).toBeVisible();
+
+ // Validate the second transaction event
+ expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
+ expect(secondEvent.type).toBe('transaction');
+ expect(secondEvent.contexts?.trace?.op).toBe('navigation');
+});

packages/react/src/reactrouter-compat-utils/index.ts

@@ -0,0 +1,34 @@
+// These exports provide utility functions for React Router v6 compatibility (as of now v6 and v7)
+
+// Main exports from instrumentation
+export type { ReactRouterOptions } from './instrumentation';
+export {
+ createReactRouterV6CompatibleTracingIntegration,
+ createV6CompatibleWithSentryReactRouterRouting,
+ createV6CompatibleWrapCreateBrowserRouter,
+ createV6CompatibleWrapCreateMemoryRouter,
+ createV6CompatibleWrapUseRoutes,
+ handleNavigation,
+ handleExistingNavigationSpan,
+ createNewNavigationSpan,
+ addResolvedRoutesToParent,
+ processResolvedRoutes,
+ updateNavigationSpan,
+} from './instrumentation';
+
+// Utility exports
+export {
+ resolveRouteNameAndSource,
+ getNormalizedName,
+ initializeRouterUtils,
+ isLikelyLazyRouteContext,
+ locationIsInsideDescendantRoute,
+ prefixWithSlash,
+ rebuildRoutePathFromAllRoutes,
+ pathEndsWithWildcard,
+ pathIsWildcardAndHasChildren,
+ getNumberOfUrlSegments,
+} from './utils';
+
+// Lazy route exports
+export { createAsyncHandlerProxy, handleAsyncHandlerResult, checkRouteForAsyncHandler } from './lazy-routes';