fix(react): Prevent navigation span leaks for consecutive navigations (#18098)

Fixes an issue where consecutive navigations to different routes fail to
create separate navigation spans, causing span leaks and missing
transaction data.

This came up in a React Router v6/v7 application where the pageload /
navigation transactions take longer and there is a high `finalTimeout`
set in config. When users navigate between different routes (e.g.,
`/users/:id` → `/projects/:projectId` → `/settings`). The SDK was
incorrectly preventing new navigation spans from being created whenever
an ongoing navigation span was active, regardless of whether the
navigation was to a different route. This resulted in only the first
navigation being tracked, with subsequent navigations being silently
ignored. Also, the spans that needed to be a part of the subsequent
navigation were recorded as a part of the previous one.

The root cause was the `if (!isAlreadyInNavigationSpan)` check that we
used to prevent cross-usage scenarios (multiple wrappers instrumenting
the same navigation), which incorrectly blocked legitimate consecutive
navigations to different routes.

So, this fix changes the logic to check both navigation span state and
the route name: `isSpanForSameRoute = isAlreadyInNavigationSpan &&
spanJson?.description === name`. This allows consecutive navigations to
different routes while preventing duplicate spans for the same route.


Also added tracking using `LAST_NAVIGATION_PER_CLIENT`. When multiple
wrappers (e.g., `wrapCreateBrowserRouter` + `wrapUseRoutes`) instrument
the same application, they may each trigger span creation for the same
navigation event. We store the navigation key
`${location.pathname}${location.search}${location.hash}` while the span
is active and clear it when that span ends.

If the same navigation key shows up again before the original span
finishes, the second wrapper updates that span’s name if it has better
parameterization instead of creating a duplicate, which keeps
cross-usage covered.

Author: onurtemizkan

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

@@ -87,7 +87,7 @@ test('Creates a navigation transaction inside a lazy route', async ({ page }) =>
 });
 
 test('Creates navigation transactions between two different lazy routes', async ({ page }) => {
-  // First, navigate to the "another-lazy" route
+  // Set up transaction listeners for both navigations
   const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
@@ -96,6 +96,14 @@ test('Creates navigation transactions between two different lazy routes', async
     );
   });
 
+  const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+    );
+  });
+
   await page.goto('/');
 
   // Navigate to another lazy route first
@@ -115,14 +123,6 @@ test('Creates navigation transactions between two different lazy routes', async
   expect(firstEvent.contexts?.trace?.op).toBe('navigation');
 
   // Now navigate from the first lazy route to the second lazy route
-  const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
-    return (
-      !!transactionEvent?.transaction &&
-      transactionEvent.contexts?.trace?.op === 'navigation' &&
-      transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
-    );
-  });
-
   // Click the navigation link from within the first lazy route to the second lazy route
   const navigationToInnerFromDeep = page.locator('id=navigate-to-inner-from-deep');
   await expect(navigationToInnerFromDeep).toBeVisible();
@@ -255,7 +255,7 @@ test('Does not send any duplicate navigation transaction names browsing between
 
   // Go to root page
   await page.goto('/');
-  page.waitForTimeout(1000);
+  await page.waitForTimeout(1000);
 
   // Navigate to inner lazy route
   const navigationToInner = page.locator('id=navigation');
@@ -339,6 +339,7 @@ test('Allows legitimate POP navigation (back/forward) after pageload completes',
   const navigationToLongRunning = page.locator('id=navigation-to-long-running');
   await expect(navigationToLongRunning).toBeVisible();
 
+  // Set up transaction listeners for both navigations
   const firstNavigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
@@ -347,6 +348,14 @@ test('Allows legitimate POP navigation (back/forward) after pageload completes',
     );
   });
 
+  const backNavigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    return (
+      !!transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/'
+    );
+  });
+
   await navigationToLongRunning.click();
 
   const slowLoadingContent = page.locator('id=slow-loading-content');
@@ -359,14 +368,6 @@ test('Allows legitimate POP navigation (back/forward) after pageload completes',
 
   // Now navigate back using browser back button (POP event)
   // This should create a navigation transaction since pageload is complete
-  const backNavigationPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
-    return (
-      !!transactionEvent?.transaction &&
-      transactionEvent.contexts?.trace?.op === 'navigation' &&
-      transactionEvent.transaction === '/'
-    );
-  });
-
   await page.goBack();
 
   // Verify we're back at home
@@ -504,7 +505,7 @@ test('Updates navigation transaction name correctly when span is cancelled early
 test('Creates separate transactions for rapid consecutive navigations', async ({ page }) => {
   await page.goto('/');
 
-  // First navigation: / -> /lazy/inner/:id/:anotherId/:someAnotherId
+  // Set up transaction listeners
   const firstTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
@@ -513,20 +514,6 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
     );
   });
 
-  const navigationToInner = page.locator('id=navigation');
-  await expect(navigationToInner).toBeVisible();
-  await navigationToInner.click();
-
-  const firstEvent = await firstTransactionPromise;
-
-  // Verify first transaction
-  expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
-  expect(firstEvent.contexts?.trace?.op).toBe('navigation');
-  expect(firstEvent.contexts?.trace?.status).toBe('ok');
-  const firstTraceId = firstEvent.contexts?.trace?.trace_id;
-  const firstSpanId = firstEvent.contexts?.trace?.span_id;
-
-  // Second navigation: /lazy/inner -> /another-lazy/sub/:id/:subId
   const secondTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
     return (
       !!transactionEvent?.transaction &&
@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
     );
   });
 
-  const navigationToAnother = page.locator('id=navigate-to-another-from-inner');
-  await expect(navigationToAnother).toBeVisible();
-  await navigationToAnother.click();
+  // Third navigation promise - using counter to match second occurrence of same route
+  let innerRouteMatchCount = 0;
+  const thirdTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
+    if (
+      transactionEvent?.transaction &&
+      transactionEvent.contexts?.trace?.op === 'navigation' &&
+      transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId'
+    ) {
+      innerRouteMatchCount++;
+      return innerRouteMatchCount === 2; // Match the second occurrence
+    }
+    return false;
+  });
+
+  // Perform navigations
+  // First navigation: / -> /lazy/inner/:id/:anotherId/:someAnotherId
+  await page.locator('id=navigation').click();
+
+  const firstEvent = await firstTransactionPromise;
+
+  // Second navigation: /lazy/inner -> /another-lazy/sub/:id/:subId
+  await page.locator('id=navigate-to-another-from-inner').click();
 
   const secondEvent = await secondTransactionPromise;
 
-  // Verify second transaction
+  // Third navigation: /another-lazy -> /lazy/inner/:id/:anotherId/:someAnotherId (back to same route as first)
+  await page.locator('id=navigate-to-inner-from-deep').click();
+
+  const thirdEvent = await thirdTransactionPromise;
+
+  // Verify transactions
+  expect(firstEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
+  expect(firstEvent.contexts?.trace?.op).toBe('navigation');
+  const firstTraceId = firstEvent.contexts?.trace?.trace_id;
+  const firstSpanId = firstEvent.contexts?.trace?.span_id;
+
   expect(secondEvent.transaction).toBe('/another-lazy/sub/:id/:subId');
   expect(secondEvent.contexts?.trace?.op).toBe('navigation');
   expect(secondEvent.contexts?.trace?.status).toBe('ok');
+
   const secondTraceId = secondEvent.contexts?.trace?.trace_id;
   const secondSpanId = secondEvent.contexts?.trace?.span_id;
 
-  // Third navigation: /another-lazy -> /lazy/inner/:id/:anotherId/:someAnotherId (back to same route as first)
-  const thirdTransactionPromise = waitForTransaction('react-router-7-lazy-routes', async transactionEvent => {
-    return (
-      !!transactionEvent?.transaction &&
-      transactionEvent.contexts?.trace?.op === 'navigation' &&
-      transactionEvent.transaction === '/lazy/inner/:id/:anotherId/:someAnotherId' &&
-      // Ensure we're not matching the first transaction again
-      transactionEvent.contexts?.trace?.trace_id !== firstTraceId
-    );
-  });
-
-  const navigationBackToInner = page.locator('id=navigate-to-inner-from-deep');
-  await expect(navigationBackToInner).toBeVisible();
-  await navigationBackToInner.click();
-
-  const thirdEvent = await thirdTransactionPromise;
-
   // Verify third transaction
   expect(thirdEvent.transaction).toBe('/lazy/inner/:id/:anotherId/:someAnotherId');
   expect(thirdEvent.contexts?.trace?.op).toBe('navigation');
   expect(thirdEvent.contexts?.trace?.status).toBe('ok');
+
   const thirdTraceId = thirdEvent.contexts?.trace?.trace_id;
   const thirdSpanId = thirdEvent.contexts?.trace?.span_id;