ref(react): Add more guarding against wildcards in lazy route transactions (#18155)

Building on top of  #17962 

Added a few more checks to make sure non-resolved (wildcard) routes are
not reported in lazy route pageloads / navigations.

- Improved `patchSpanEnd` with a user-configurable wait timeout for
potentially slow route resolution. Named this option as
`lazyRouteTimeout` and it's defaulted as `idleTimeout` * 3. It may
conditionally delay reporting (if the route resolution is still not done
by the end of the timeout), but will prevent prematurely sent lazy-route
transactions inside that window.
- Added extra checks on `updateNavigationSpan` and `handleNavigation`
for whether any wildcard still exists in a lazy-route, so they are still
marked as open to full resolution. We keep track of pending lazy-route
resolutions inside `pendingLazyRouteLoads`
- Added a final attempt to update the transaction name with
fully-resolved route when the pending resolution is done.

Any of these should not affect the behaviour of non-lazy route usage

---------

Co-authored-by: Sigrid <32902192+s1gr1d@users.noreply.github.com>

Author: onurtemizkan

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

@@ -2,7 +2,6 @@ import * as Sentry from '@sentry/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {
-  Navigate,
   PatchRoutesOnNavigationFunction,
   RouterProvider,
   createBrowserRouter,
@@ -12,6 +11,49 @@ import {
   useNavigationType,
 } from 'react-router-dom';
 import Index from './pages/Index';
+import Deep from './pages/Deep';
+
+function getRuntimeConfig(): { lazyRouteTimeout?: number; idleTimeout?: number } {
+  if (typeof window === 'undefined') {
+    return {};
+  }
+
+  try {
+    const url = new URL(window.location.href);
+    const timeoutParam = url.searchParams.get('timeout');
+    const idleTimeoutParam = url.searchParams.get('idleTimeout');
+
+    let lazyRouteTimeout: number | undefined = undefined;
+    if (timeoutParam) {
+      if (timeoutParam === 'Infinity') {
+        lazyRouteTimeout = Infinity;
+      } else {
+        const parsed = parseInt(timeoutParam, 10);
+        if (!isNaN(parsed)) {
+          lazyRouteTimeout = parsed;
+        }
+      }
+    }
+
+    let idleTimeout: number | undefined = undefined;
+    if (idleTimeoutParam) {
+      const parsed = parseInt(idleTimeoutParam, 10);
+      if (!isNaN(parsed)) {
+        idleTimeout = parsed;
+      }
+    }
+
+    return {
+      lazyRouteTimeout,
+      idleTimeout,
+    };
+  } catch (error) {
+    console.warn('Failed to read runtime config, falling back to defaults', error);
+    return {};
+  }
+}
+
+const runtimeConfig = getRuntimeConfig();
 
 Sentry.init({
   environment: 'qa', // dynamic sampling bias to keep transactions
@@ -25,6 +67,8 @@ Sentry.init({
       matchRoutes,
       trackFetchStreamPerformance: true,
       enableAsyncRouteHandlers: true,
+      lazyRouteTimeout: runtimeConfig.lazyRouteTimeout,
+      idleTimeout: runtimeConfig.idleTimeout,
     }),
   ],
   // We recommend adjusting this value in production, or using tracesSampler
@@ -66,8 +110,21 @@ const router = sentryCreateBrowserRouter(
       element: <>Hello World</>,
     },
     {
-      path: '*',
-      element: <Navigate to="/" replace />,
+      path: '/delayed-lazy/:id',
+      lazy: async () => {
+        // Simulate slow lazy route loading (400ms delay)
+        await new Promise(resolve => setTimeout(resolve, 400));
+        return {
+          Component: (await import('./pages/DelayedLazyRoute')).default,
+        };
+      },
+    },
+    {
+      path: '/deep',
+      element: <Deep />,
+      handle: {
+        lazyChildren: () => import('./pages/deep/Level1Routes').then(module => module.level2Routes),
+      },
     },
   ],
   {

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+
+export default function Deep() {
+  return (
+    <div>
+      <h1>Deep Route Root</h1>
+      <p id="deep-root">You are at the deep route root</p>
+      <Outlet />
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link, useParams, useLocation, useSearchParams } from 'react-router-dom';
+
+const DelayedLazyRoute = () => {
+  const { id } = useParams<{ id: string }>();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const view = searchParams.get('view') || 'none';
+  const source = searchParams.get('source') || 'none';
+
+  return (
+    <div id="delayed-lazy-ready">
+      <h1>Delayed Lazy Route</h1>
+      <p id="delayed-lazy-id">ID: {id}</p>
+      <p id="delayed-lazy-path">{location.pathname}</p>
+      <p id="delayed-lazy-search">{location.search}</p>
+      <p id="delayed-lazy-hash">{location.hash}</p>
+      <p id="delayed-lazy-view">View: {view}</p>
+      <p id="delayed-lazy-source">Source: {source}</p>
+
+      <div id="navigation-links">
+        <Link to="/" id="delayed-lazy-home-link">
+          Back Home
+        </Link>
+        <br />
+        <Link to={`/delayed-lazy/${id}?view=detailed`} id="link-to-query-view-detailed">
+          View: Detailed (query param)
+        </Link>
+        <br />
+        <Link to={`/delayed-lazy/${id}?view=list`} id="link-to-query-view-list">
+          View: List (query param)
+        </Link>
+        <br />
+        <Link to={`/delayed-lazy/${id}#section1`} id="link-to-hash-section1">
+          Section 1 (hash only)
+        </Link>
+        <br />
+        <Link to={`/delayed-lazy/${id}#section2`} id="link-to-hash-section2">
+          Section 2 (hash only)
+        </Link>
+        <br />
+        <Link to={`/delayed-lazy/${id}?view=grid#results`} id="link-to-query-and-hash">
+          Grid View + Results (query + hash)
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default DelayedLazyRoute;

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

@@ -19,6 +19,18 @@ const Index = () => {
       <Link to="/long-running/slow/12345" id="navigation-to-long-running">
         Navigate to Long Running Lazy Route
       </Link>
+      <br />
+      <Link to="/delayed-lazy/123" id="navigation-to-delayed-lazy">
+        Navigate to Delayed Lazy Parameterized Route
+      </Link>
+      <br />
+      <Link to="/delayed-lazy/123?source=homepage" id="navigation-to-delayed-lazy-with-query">
+        Navigate to Delayed Lazy with Query Param
+      </Link>
+      <br />
+      <Link to="/deep/level2/level3/123" id="navigation-to-deep">
+        Navigate to Deep Nested Route (3 levels, 900ms total)
+      </Link>
     </>
   );
 };

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

@@ -0,0 +1,11 @@
+// Delay: 300ms before module loads
+await new Promise(resolve => setTimeout(resolve, 300));
+
+export const level2Routes = [
+  {
+    path: 'level2',
+    handle: {
+      lazyChildren: () => import('./Level2Routes').then(module => module.level3Routes),
+    },
+  },
+];

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

@@ -0,0 +1,14 @@
+// Delay: 300ms before module loads
+await new Promise(resolve => setTimeout(resolve, 300));
+
+export const level3Routes = [
+  {
+    path: 'level3/:id',
+    lazy: async () => {
+      await new Promise(resolve => setTimeout(resolve, 300));
+      return {
+        Component: (await import('./Level3')).default,
+      };
+    },
+  },
+];

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function Level3() {
+  const { id } = useParams();
+  return (
+    <div>
+      <h1>Level 3 Deep Route</h1>
+      <p id="deep-level3">Deeply nested route loaded!</p>
+      <p id="deep-level3-id">ID: {id}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('lazyRouteTimeout: Routes load within timeout window', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction.includes('deep')
+    );
+  });
+
+  // Route takes ~900ms, timeout allows 1050ms (50 + 1000)
+  // Routes will load in time → parameterized name
+  await page.goto('/?idleTimeout=50&timeout=1000');
+
+  const navigationLink = page.locator('id=navigation-to-deep');
+  await expect(navigationLink).toBeVisible();
+  await navigationLink.click();
+
+  const event = await transactionPromise;
+
+  // Should get full parameterized route
+  expect(event.transaction).toBe('/deep/level2/level3/:id');
+  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
+  expect(event.contexts?.trace?.data?.['sentry.idle_span_finish_reason']).toBe('idleTimeout');
+});
+
+test('lazyRouteTimeout: Infinity timeout always waits for routes', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction.includes('deep')
+    );
+  });
+
+  // Infinity timeout → waits as long as possible (capped at finalTimeout to prevent indefinite hangs)
+  await page.goto('/?idleTimeout=50&timeout=Infinity');
+
+  const navigationLink = page.locator('id=navigation-to-deep');
+  await expect(navigationLink).toBeVisible();
+  await navigationLink.click();
+
+  const event = await transactionPromise;
+
+  // Should wait for routes to load (up to finalTimeout) and get full route
+  expect(event.transaction).toBe('/deep/level2/level3/:id');
+  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
+  expect(event.contexts?.trace?.data?.['sentry.idle_span_finish_reason']).toBe('idleTimeout');
+});
+
+test('idleTimeout: Captures all activity with increased timeout', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction.includes('deep')
+    );
+  });
+
+  // High idleTimeout (5000ms) ensures transaction captures all lazy loading activity
+  await page.goto('/?idleTimeout=5000');
+
+  const navigationLink = page.locator('id=navigation-to-deep');
+  await expect(navigationLink).toBeVisible();
+  await navigationLink.click();
+
+  const event = await transactionPromise;
+
+  expect(event.transaction).toBe('/deep/level2/level3/:id');
+  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
+  expect(event.contexts?.trace?.data?.['sentry.idle_span_finish_reason']).toBe('idleTimeout');
+
+  // Transaction should wait for full idle timeout (5+ seconds)
+  const duration = event.timestamp! - event.start_timestamp;
+  expect(duration).toBeGreaterThan(5.0);
+  expect(duration).toBeLessThan(7.0);
+});
+
+test('idleTimeout: Finishes prematurely with low timeout', async ({ page }) => {
+  const transactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction.includes('deep')
+    );
+  });
+
+  // Very low idleTimeout (50ms) and lazyRouteTimeout (100ms)
+  // Transaction finishes quickly, but still gets parameterized route name
+  await page.goto('/?idleTimeout=50&timeout=100');
+
+  const navigationLink = page.locator('id=navigation-to-deep');
+  await expect(navigationLink).toBeVisible();
+  await navigationLink.click();
+
+  const event = await transactionPromise;
+
+  expect(event.contexts?.trace?.data?.['sentry.idle_span_finish_reason']).toBe('idleTimeout');
+  expect(event.transaction).toBe('/deep/level2/level3/:id');
+  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
+
+  // Transaction should finish quickly (< 200ms)
+  const duration = event.timestamp! - event.start_timestamp;
+  expect(duration).toBeLessThan(0.2);
+});
+
+test('idleTimeout: Pageload on deeply nested route', async ({ page }) => {
+  const pageloadPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'pageload' &&
+      transactionEvent.transaction.includes('deep')
+    );
+  });
+
+  // Direct pageload to deeply nested route (not navigation)
+  await page.goto('/deep/level2/level3/12345');
+
+  const pageloadEvent = await pageloadPromise;
+
+  expect(pageloadEvent.transaction).toBe('/deep/level2/level3/:id');
+  expect(pageloadEvent.contexts?.trace?.data?.['sentry.source']).toBe('route');
+  expect(pageloadEvent.contexts?.trace?.data?.['sentry.idle_span_finish_reason']).toBe('idleTimeout');
+});