Add support for parameterized pageload transactions

Author: onurtemizkan

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

@@ -46,27 +46,22 @@ const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowser
 const router = sentryCreateBrowserRouter(
   [
     {
+      path: '/',
       element: <Index />,
-      children: [
-        {
-          path: '/',
-          element: <Index />,
-        },
-        {
-          path: '/lazy',
-          handle: {
-            lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
-          },
-        },
-        {
-          path: '/static',
-          element: <>Hello World</>,
-        },
-        {
-          path: '*',
-          element: <Navigate to="/\" replace />,
-        },
-      ],
+    },
+    {
+      path: '/lazy',
+      handle: {
+        lazyChildren: () => import('./pages/InnerLazyRoutes').then(module => module.someMoreNestedRoutes),
+      },
+    },
+    {
+      path: '/static',
+      element: <>Hello World</>,
+    },
+    {
+      path: '*',
+      element: <Navigate to="/\" replace />,
     },
   ],
   {

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

@@ -1,9 +1,34 @@
 import { expect, test } from '@playwright/test';
 import { waitForTransaction } from '@sentry-internal/test-utils';
 
-test('sends a navigation transaction for lazy route', async ({ page }) => {
+
+test('Creates a pageload transaction with parameterized route', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    console.debug('transactionEvent', transactionEvent);
+
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+    );
+  });
+
+  await page.goto('/lazy/inner/1/2/3');
+  const event = await transactionPromise;
+
+
+  const lazyRouteContent = page.locator('id=innermost-lazy-route');
+
+  await expect(lazyRouteContent).toBeVisible();
+
+  // Validate the transaction event
+  expect(event.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+  expect(event.type).toBe('transaction');
+  expect(event.contexts?.trace?.op).toBe('pageload');
+});
+
+test('Creates a navigation transaction inside a lazy route', async ({ page }) => {
   const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
-    console.debug('Lazy route transaction event', transactionEvent);
     return (
       !!transactionEvent?.transaction &&
       transactionEvent.contexts?.trace?.op === 'navigation' &&
@@ -12,10 +37,21 @@ test('sends a navigation transaction for lazy route', async ({ page }) => {
   });
 
   await page.goto('/');
-  await page.locator('id=navigation').click();
 
+  // Check if the navigation link exists
+  const navigationLink = page.locator('id=navigation');
+  await expect(navigationLink).toBeVisible();
+
+  // Click the navigation link to navigate to the lazy route
+  await navigationLink.click();
   const event = await transactionPromise;
 
+  // Check if the lazy route content is rendered
+  const lazyRouteContent = page.locator('id=innermost-lazy-route');
+
+  await expect(lazyRouteContent).toBeVisible();
+
+  // Validate the transaction event
   expect(event.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
   expect(event.type).toBe('transaction');
   expect(event.contexts?.trace?.op).toBe('navigation');

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

@@ -10,6 +10,7 @@ import {
 } from '@sentry/browser';
 import type { Client, Integration, Span, TransactionSource } from '@sentry/core';
 import {
+  addNonEnumerableProperty,
   debug,
   getActiveSpan,
   getClient,
@@ -63,6 +64,15 @@ type V6CompatibleVersion = '6' | '7';
 // Keeping as a global variable for cross-usage in multiple functions
 const allRoutes = new Set<RouteObject>();
 
+/**
+ * Adds resolved routes as children to the parent route.
+ */
+function addResolvedRoutesToParent(resolvedRoutes: RouteObject[], parentRoute: RouteObject): void {
+  parentRoute.children = Array.isArray(parentRoute.children)
+    ? [...parentRoute.children, ...resolvedRoutes]
+    : resolvedRoutes;
+}
+
 /**
  * Handles the result of an async handler function call.
  */
@@ -76,25 +86,47 @@ function handleAsyncHandlerResult(result: unknown, route: RouteObject, handlerKe
     (result as Promise<unknown>)
       .then((resolvedRoutes: unknown) => {
         if (Array.isArray(resolvedRoutes)) {
-          processResolvedRoutes(resolvedRoutes);
+          processResolvedRoutes(resolvedRoutes, route);
         }
       })
       .catch((e: unknown) => {
         DEBUG_BUILD && debug.warn(`Error resolving async handler '${handlerKey}' for route`, route, e);
       });
   } else if (Array.isArray(result)) {
-    processResolvedRoutes(result);
+    processResolvedRoutes(result, route);
   }
 }
 
 /**
  * Processes resolved routes by adding them to allRoutes and checking for nested async handlers.
  */
-function processResolvedRoutes(resolvedRoutes: RouteObject[]): void {
+function processResolvedRoutes(resolvedRoutes: RouteObject[], parentRoute?: RouteObject): void {
   resolvedRoutes.forEach(child => {
     allRoutes.add(child);
     checkRouteForAsyncHandler(child);
   });
+
+  if (parentRoute) {
+    // If a parent route is provided, add the resolved routes as children to the parent route
+    addResolvedRoutesToParent(resolvedRoutes, parentRoute);
+  }
+
+  // After processing lazy routes, check if we need to update an active pageload transaction
+  const activeRootSpan = getActiveRootSpan();
+  if (activeRootSpan && spanToJSON(activeRootSpan).op === 'pageload') {
+    const location = WINDOW.location;
+    if (location) {
+      // Re-run the pageload transaction update with the newly loaded routes
+      updatePageloadTransaction(
+        activeRootSpan,
+        { pathname: location.pathname },
+        Array.from(allRoutes),
+        undefined,
+        undefined,
+        Array.from(allRoutes),
+      );
+    }
+  }
 }
 
 /**
@@ -105,13 +137,17 @@ function createAsyncHandlerProxy(
   route: RouteObject,
   handlerKey: string,
 ): (...args: unknown[]) => unknown {
-  return new Proxy(originalFunction, {
+  const proxy = new Proxy(originalFunction, {
     apply(target: (...args: unknown[]) => unknown, thisArg, argArray) {
       const result = target.apply(thisArg, argArray);
       handleAsyncHandlerResult(result, route, handlerKey);
       return result;
     },
   });
+
+  addNonEnumerableProperty(proxy, '__sentry_proxied__', true);
+
+  return proxy;
 }
 
 /**
@@ -122,7 +158,7 @@ export function checkRouteForAsyncHandler(route: RouteObject): void {
   if (route.handle && typeof route.handle === 'object') {
     for (const key of Object.keys(route.handle)) {
       const maybeFn = route.handle[key];
-      if (typeof maybeFn === 'function') {
+      if (typeof maybeFn === 'function' && !(maybeFn as { __sentry_proxied__?: boolean }).__sentry_proxied__) {
         route.handle[key] = createAsyncHandlerProxy(maybeFn, route, key);
       }
     }
@@ -620,6 +656,7 @@ function getNormalizedName(
   }
 
   let pathBuilder = '';
+
   if (branches) {
     for (const branch of branches) {
       const route = branch.route;