Support lazy-loaded descendant routes.

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/index.tsx

@@ -1,5 +1,5 @@
 import * as Sentry from '@sentry/react';
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import {
   RouterProvider,
@@ -42,13 +42,22 @@ Sentry.init({
 });
 
 const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV6(createBrowserRouter);
+const LazyLoadedUser = lazy(() => import('./pages/LazyLoadedUser'));
 
 const router = sentryCreateBrowserRouter(
   [
     {
       path: '/',
       element: <Index />,
     },
+    {
+      path: '/lazy-loaded-user/*',
+      element: (
+        <Suspense fallback={<div>Loading...</div>}>
+          <LazyLoadedUser />
+        </Suspense>
+      ),
+    },
     {
       path: '/user/:id',
       element: <User />,

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/pages/Index.tsx

@@ -16,6 +16,9 @@ const Index = () => {
       <Link to="/user/5" id="navigation">
         navigate
       </Link>
+      <Link to="/lazy-loaded-user/5/foo" id="lazy-navigation">
+        lazy navigate
+      </Link>
     </>
   );
 };

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/pages/LazyLoadedInnerRoute.tsx

@@ -0,0 +1,14 @@
+// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
+import * as React from 'react';
+import * as Sentry from '@sentry/react';
+import { Route, Routes } from 'react-router-dom';
+
+const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+
+const InnerRoute = () => (
+  <SentryRoutes>
+    <Route path=":innerId" element={<p id="content">I am a lazy loaded user</p>} />
+  </SentryRoutes>
+);
+
+export default InnerRoute;

dev-packages/e2e-tests/test-applications/react-create-browser-router/src/pages/LazyLoadedUser.tsx

@@ -0,0 +1,24 @@
+// biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
+import * as React from 'react';
+import * as Sentry from '@sentry/react';
+import { Route, Routes } from 'react-router-dom';
+
+const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
+const InnerRoute = React.lazy(() => import('./LazyLoadedInnerRoute'));
+
+const LazyLoadedUser = () => {
+  return (
+    <SentryRoutes>
+      <Route
+        path=":id/*"
+        element={
+          <React.Suspense fallback={<p>Loading...</p>}>
+            <InnerRoute />
+          </React.Suspense>
+        }
+      />
+    </SentryRoutes>
+  );
+};
+
+export default LazyLoadedUser;

dev-packages/e2e-tests/test-applications/react-create-browser-router/tests/transactions.test.ts

@@ -76,3 +76,101 @@ test('Captures a navigation transaction', async ({ page }) => {
 
   expect(transactionEvent.spans).toEqual([]);
 });
+
+test('Captures a lazy pageload transaction', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-browser-router', event => {
+    return event.contexts?.trace?.op === 'pageload';
+  });
+
+  await page.goto('/lazy-loaded-user/5/foo');
+
+  const transactionEvent = await transactionEventPromise;
+  expect(transactionEvent.contexts?.trace).toEqual({
+    data: expect.objectContaining({
+      'sentry.idle_span_finish_reason': 'idleTimeout',
+      'sentry.op': 'pageload',
+      'sentry.origin': 'auto.pageload.react.reactrouter_v6',
+      'sentry.sample_rate': 1,
+      'sentry.source': 'route',
+    }),
+    op: 'pageload',
+    span_id: expect.stringMatching(/[a-f0-9]{16}/),
+    trace_id: expect.stringMatching(/[a-f0-9]{32}/),
+    origin: 'auto.pageload.react.reactrouter_v6',
+  });
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/lazy-loaded-user/:id/:innerId',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+
+  expect(await page.innerText("id=content")).toContain('I am a lazy loaded user');
+
+  expect(transactionEvent.spans).toEqual(expect.arrayContaining([
+    // This one is the outer lazy route
+    expect.objectContaining({
+      op: 'resource.script',
+      origin: 'auto.resource.browser.metrics',
+    }),
+    // This one is the inner lazy route
+    expect.objectContaining({
+      op: 'resource.script',
+      origin: 'auto.resource.browser.metrics',
+    }),
+  ]));
+});
+
+test('Captures a lazy navigation transaction', async ({ page }) => {
+  const transactionEventPromise = waitForTransaction('react-create-browser-router', event => {
+    return event.contexts?.trace?.op === 'navigation';
+  });
+
+  await page.goto('/');
+  const linkElement = page.locator('id=lazy-navigation');
+  await linkElement.click();
+
+  const transactionEvent = await transactionEventPromise;
+  expect(transactionEvent.contexts?.trace).toEqual({
+    data: expect.objectContaining({
+      'sentry.idle_span_finish_reason': 'idleTimeout',
+      'sentry.op': 'navigation',
+      'sentry.origin': 'auto.navigation.react.reactrouter_v6',
+      'sentry.sample_rate': 1,
+      'sentry.source': 'route',
+    }),
+    op: 'navigation',
+    span_id: expect.stringMatching(/[a-f0-9]{16}/),
+    trace_id: expect.stringMatching(/[a-f0-9]{32}/),
+    origin: 'auto.navigation.react.reactrouter_v6',
+  });
+
+  expect(transactionEvent).toEqual(
+    expect.objectContaining({
+      transaction: '/lazy-loaded-user/:id/:innerId',
+      type: 'transaction',
+      transaction_info: {
+        source: 'route',
+      },
+    }),
+  );
+
+  expect(await page.innerText("id=content")).toContain('I am a lazy loaded user');
+
+  expect(transactionEvent.spans).toEqual(expect.arrayContaining([
+    // This one is the outer lazy route
+    expect.objectContaining({
+      op: 'resource.script',
+      origin: 'auto.resource.browser.metrics',
+    }),
+    // This one is the inner lazy route
+    expect.objectContaining({
+      op: 'resource.script',
+      origin: 'auto.resource.browser.metrics',
+    }),
+  ]));
+});

packages/react/src/reactrouterv6-compat-utils.tsx

@@ -61,6 +61,9 @@ export interface ReactRouterOptions {
 
 type V6CompatibleVersion = '6' | '7';
 
+// Keeping as a global variable for cross-usage in multiple functions
+const allRoutes = new Set<RouteObject>();
+
 /**
  * Creates a wrapCreateBrowserRouter function that can be used with all React Router v6 compatible versions.
  */
@@ -81,6 +84,10 @@ export function createV6CompatibleWrapCreateBrowserRouter<
   }
 
   return function (routes: RouteObject[], opts?: Record<string, unknown> & { basename?: string }): TRouter {
+    routes.forEach(route => {
+      allRoutes.add(route);
+    });
+
     const router = createRouterFunction(routes, opts);
     const basename = opts?.basename;
 
@@ -90,7 +97,14 @@ export function createV6CompatibleWrapCreateBrowserRouter<
     // This is the earliest convenient time to update the transaction name.
     // Callbacks to `router.subscribe` are not called for the initial load.
     if (router.state.historyAction === 'POP' && activeRootSpan) {
-      updatePageloadTransaction(activeRootSpan, router.state.location, routes, undefined, basename);
+      updatePageloadTransaction(
+        activeRootSpan,
+        router.state.location,
+        routes,
+        undefined,
+        basename,
+        Array.from(allRoutes),
+      );
     }
 
     router.subscribe((state: RouterState) => {
@@ -104,6 +118,7 @@ export function createV6CompatibleWrapCreateBrowserRouter<
               navigationType: state.historyAction,
               version,
               basename,
+              allRoutes: Array.from(allRoutes),
             });
           });
         } else {
@@ -113,6 +128,7 @@ export function createV6CompatibleWrapCreateBrowserRouter<
             navigationType: state.historyAction,
             version,
             basename,
+            allRoutes: Array.from(allRoutes),
           });
         }
       }
@@ -149,6 +165,10 @@ export function createV6CompatibleWrapCreateMemoryRouter<
       initialIndex?: number;
     },
   ): TRouter {
+    routes.forEach(route => {
+      allRoutes.add(route);
+    });
+
     const router = createRouterFunction(routes, opts);
     const basename = opts?.basename;
 
@@ -174,7 +194,7 @@ export function createV6CompatibleWrapCreateMemoryRouter<
       : router.state.location;
 
     if (router.state.historyAction === 'POP' && activeRootSpan) {
-      updatePageloadTransaction(activeRootSpan, location, routes, undefined, basename);
+      updatePageloadTransaction(activeRootSpan, location, routes, undefined, basename, Array.from(allRoutes));
     }
 
     router.subscribe((state: RouterState) => {
@@ -186,6 +206,7 @@ export function createV6CompatibleWrapCreateMemoryRouter<
           navigationType: state.historyAction,
           version,
           basename,
+          allRoutes: Array.from(allRoutes),
         });
       }
     });
@@ -260,8 +281,6 @@ export function createV6CompatibleWrapUseRoutes(origUseRoutes: UseRoutes, versio
     return origUseRoutes;
   }
 
-  const allRoutes: Set<RouteObject> = new Set();
-
   const SentryRoutes: React.FC<{
     children?: React.ReactNode;
     routes: RouteObject[];
@@ -331,7 +350,6 @@ export function handleNavigation(opts: {
   allRoutes?: RouteObject[];
 }): void {
   const { location, routes, navigationType, version, matches, basename, allRoutes } = opts;
-
   const branches = Array.isArray(matches) ? matches : _matchRoutes(routes, location, basename);
 
   const client = getClient();
@@ -565,7 +583,7 @@ function updatePageloadTransaction(
 ): void {
   const branches = Array.isArray(matches)
     ? matches
-    : (_matchRoutes(routes, location, basename) as unknown as RouteMatch[]);
+    : (_matchRoutes(allRoutes || routes, location, basename) as unknown as RouteMatch[]);
 
   if (branches) {
     let name,
@@ -581,7 +599,7 @@ function updatePageloadTransaction(
       [name, source] = getNormalizedName(routes, location, branches, basename);
     }
 
-    getCurrentScope().setTransactionName(name);
+    getCurrentScope().setTransactionName(name || '/');
 
     if (activeRootSpan) {
       activeRootSpan.updateName(name);
@@ -604,8 +622,6 @@ export function createV6CompatibleWithSentryReactRouterRouting<P extends Record<
     return Routes;
   }
 
-  const allRoutes: Set<RouteObject> = new Set();
-
   const SentryRoutes: React.FC<P> = (props: P) => {
     const isMountRenderPass = React.useRef(true);