ref(react): Remove lazy route machinery in favour of lazyRouteManifest

Author: onurtemizkan

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

@@ -13,28 +13,15 @@ import {
 import Index from './pages/Index';
 import Deep from './pages/Deep';
 
-function getRuntimeConfig(): { lazyRouteTimeout?: number; idleTimeout?: number } {
+function getRuntimeConfig(): { 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);
@@ -44,7 +31,6 @@ function getRuntimeConfig(): { lazyRouteTimeout?: number; idleTimeout?: number }
     }
 
     return {
-      lazyRouteTimeout,
       idleTimeout,
     };
   } catch (error) {
@@ -87,7 +73,6 @@ Sentry.init({
       matchRoutes,
       trackFetchStreamPerformance: true,
       enableAsyncRouteHandlers: true,
-      lazyRouteTimeout: runtimeConfig.lazyRouteTimeout,
       idleTimeout: runtimeConfig.idleTimeout,
       lazyRouteManifest,
     }),

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

@@ -1,55 +1,6 @@
 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 (
@@ -87,9 +38,8 @@ test('idleTimeout: Finishes prematurely with low timeout', async ({ page }) => {
     );
   });
 
-  // Very low idleTimeout (50ms) and lazyRouteTimeout (100ms)
-  // Transaction finishes quickly, but still gets parameterized route name
-  await page.goto('/?idleTimeout=50&timeout=100');
+  // Very low idleTimeout (50ms) -- transaction finishes quickly but still gets parameterized route name
+  await page.goto('/?idleTimeout=50');
 
   const navigationLink = page.locator('id=navigation-to-deep');
   await expect(navigationLink).toBeVisible();

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

@@ -427,8 +427,7 @@ test('Updates pageload transaction name correctly when span is cancelled early (
   // Check if the span was indeed cancelled (should have idle_span_finish_reason attribute)
   const idleSpanFinishReason = event.contexts?.trace?.data?.['sentry.idle_span_finish_reason'];
   if (idleSpanFinishReason) {
-    // If the span was cancelled due to visibility change, verify it still got the right name
-    expect(['externalFinish', 'cancelled']).toContain(idleSpanFinishReason);
+    expect(['externalFinish', 'cancelled', 'idleTimeout']).toContain(idleSpanFinishReason);
   }
 });
 
@@ -498,7 +497,7 @@ test('Updates navigation transaction name correctly when span is cancelled early
   }
 
   if (idleSpanFinishReason) {
-    expect(['externalFinish', 'cancelled']).toContain(idleSpanFinishReason);
+    expect(['externalFinish', 'cancelled', 'idleTimeout']).toContain(idleSpanFinishReason);
   }
 });
 
@@ -1034,9 +1033,11 @@ test('Three-route rapid navigation preserves distinct transaction names', async
   await slowFetchLink.click();
   await page.waitForTimeout(150);
 
-  // Navigate to another-lazy before slow-fetch resolves
-  const anotherLazyLink = page.locator('id=delayed-lazy-to-another-lazy');
-  await anotherLazyLink.click();
+  // Navigate to another-lazy before slow-fetch resolves.
+  // Use programmatic navigation because the delayed-lazy page may have
+  // already unmounted (the /slow-fetch route has no element).
+  // eslint-disable-next-line no-restricted-globals
+  await page.evaluate(() => (window as any).__REACT_ROUTER__.navigate('/another-lazy/sub'));
 
   await expect(page.locator('id=another-lazy-route')).toBeVisible({ timeout: 10000 });
   await page.waitForTimeout(2000);
@@ -1241,8 +1242,8 @@ test('Slow lazy route pageload with early span end still gets parameterized rout
     );
   });
 
-  // 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');
+  // idleTimeout=300 ends span before 500ms lazy route loads
+  await page.goto('/slow-fetch/123?idleTimeout=300');
 
   const event = await transactionPromise;
 
@@ -1255,60 +1256,6 @@ test('Slow lazy route pageload with early span end still gets parameterized rout
   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');
-});
-
-// Regression: Navigation to slow lazy route should get parameterized name even if span ends early.
-// Network activity from dynamic imports extends the idle timeout until lazy routes load.
-test('Slow lazy route navigation with early span end still gets parameterized route name (regression)', async ({
-  page,
-}) => {
-  // Configure short idle timeout (300ms) but longer lazy route timeout (1000ms)
-  await page.goto('/?idleTimeout=300&timeout=1000');
-
-  // Wait for pageload to complete
-  await page.waitForTimeout(500);
-
-  const navigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
-    return (
-      !!transactionEvent?.transaction &&
-      transactionEvent.contexts?.trace?.op === 'navigation' &&
-      (transactionEvent.transaction?.startsWith('/wildcard-lazy') ?? false)
-    );
-  });
-
-  // Navigate to wildcard-lazy route (500ms delay in module via top-level await)
-  // The dynamic import creates network activity that extends the span lifetime
-  const wildcardLazyLink = page.locator('id=navigation-to-wildcard-lazy');
-  await expect(wildcardLazyLink).toBeVisible();
-  await wildcardLazyLink.click();
-
-  const event = await navigationPromise;
-
-  // The navigation transaction should have the parameterized route name
-  expect(event.transaction).toBe('/wildcard-lazy/:id');
-  expect(event.type).toBe('transaction');
-  expect(event.contexts?.trace?.op).toBe('navigation');
-  expect(event.contexts?.trace?.data?.['sentry.source']).toBe('route');
-});
-
 test('Captured navigation context is used instead of stale window.location during rapid navigation', async ({
   page,
 }) => {
@@ -1437,7 +1384,7 @@ test('Second navigation span is not corrupted by first slow lazy handler complet
 // lazyRouteManifest: provides parameterized name when lazy routes don't resolve in time
 test('Route manifest provides correct name when navigation span ends before lazy route resolves', async ({ page }) => {
   // Short idle timeout (50ms) ensures span ends before lazy route (500ms) resolves
-  await page.goto('/?idleTimeout=50&timeout=0');
+  await page.goto('/?idleTimeout=50');
 
   // Wait for pageload to complete
   await page.waitForTimeout(200);
@@ -1474,7 +1421,7 @@ test('Route manifest provides correct name when pageload span ends before lazy r
     );
   });
 
-  await page.goto('/wildcard-lazy/123?idleTimeout=50&timeout=0');
+  await page.goto('/wildcard-lazy/123?idleTimeout=50');
 
   const event = await pageloadPromise;