fix(react): Defer React Router span finalization until lazy routes load

Author: onurtemizkan

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

@@ -134,6 +134,20 @@ const router = sentryCreateBrowserRouter(
         lazyChildren: () => import('./pages/SlowFetchLazyRoutes').then(module => module.slowFetchRoutes),
       },
     },
+    {
+      // Route with wildcard placeholder that gets replaced by lazy-loaded parameterized routes
+      // This tests that wildcard transaction names get upgraded to parameterized routes
+      path: '/wildcard-lazy',
+      children: [
+        {
+          path: '*', // Catch-all wildcard - will be matched initially before lazy routes load
+          element: <>Loading...</>,
+        },
+      ],
+      handle: {
+        lazyChildren: () => import('./pages/WildcardLazyRoutes').then(module => module.wildcardRoutes),
+      },
+    },
   ],
   {
     async patchRoutesOnNavigation({ matches, patch }: Parameters<PatchRoutesOnNavigationFunction>[0]) {

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+// Simulate slow lazy route loading (500ms delay via top-level await)
+await new Promise(resolve => setTimeout(resolve, 500));
+
+function WildcardItem() {
+  const { id } = useParams();
+  return <div>Wildcard Item: {id}</div>;
+}
+
+export const wildcardRoutes = [
+  {
+    path: ':id',
+    element: <WildcardItem />,
+  },
+];

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

@@ -1228,3 +1228,49 @@ test('Query/hash navigation does not corrupt transaction name', async ({ page })
   const corruptedToRoot = navigationTransactions.filter(t => t.name === '/');
   expect(corruptedToRoot.length).toBe(0);
 });
+
+// Regression: Pageload to slow lazy route should get parameterized name even if span ends early
+test('Slow lazy route pageload with early span end still gets parameterized route name (regression)', async ({
+  page,
+}) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      (transactionEvent.transaction?.startsWith('/slow-fetch') ?? false)
+    );
+  });
+
+  // idleTimeout=300 ends span before 500ms lazy route loads, timeout=1000 waits for lazy routes
+  await page.goto('/slow-fetch/123?idleTimeout=300&timeout=1000');
+
+  const event = await transactionPromise;
+
+  expect(event.transaction).toBe('/slow-fetch/:id');
+  expect(event.type).toBe('transaction');
+  expect(event.contexts?.trace?.op).toBe('pageload');
+  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
+
+  const idleSpanFinishReason = event.contexts?.trace?.data?.['sentry.idle_span_finish_reason'];
+  expect(['idleTimeout', 'externalFinish']).toContain(idleSpanFinishReason);
+});
+
+// Regression: Wildcard route names should be upgraded to parameterized routes when lazy routes load
+test('Wildcard route pageload gets upgraded to parameterized route name (regression)', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      (transactionEvent.transaction?.startsWith('/wildcard-lazy') ?? false)
+    );
+  });
+
+  await page.goto('/wildcard-lazy/456?idleTimeout=300&timeout=1000');
+
+  const event = await transactionPromise;
+
+  expect(event.transaction).toBe('/wildcard-lazy/:id');
+  expect(event.type).toBe('transaction');
+  expect(event.contexts?.trace?.op).toBe('pageload');
+  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
+});