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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
s1gr1d merged 10 commits into from
Nov 18, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
046216f
fix(react): Prevent navigation span leaks for consecutive navigations
onurtemizkan Nov 5, 2025
14ce2fb
Reduce complexity in getNormalizedName function
onurtemizkan Nov 10, 2025
5144fa3
Fix tests
onurtemizkan Nov 10, 2025
7572a98
Use 100ms window for skipping cross-usage duplicates
onurtemizkan Nov 10, 2025
979d6e3
Fix lockfile
onurtemizkan Nov 11, 2025
ed53a1d
Move idle check to `shouldHandleNavigation`
onurtemizkan Nov 11, 2025
0cfe264
Address review comments from bots
onurtemizkan Nov 11, 2025
e9cab06
Edge case fixes
onurtemizkan Nov 12, 2025
3084371
Address review comments
onurtemizkan Nov 13, 2025
4ee07cd
Address reviews further
onurtemizkan Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 55 additions & 54 deletions ...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
);
});

@s1gr1ds1gr1dNov 12, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.

I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.

@onurtemizkanonurtemizkanNov 13, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍


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;

Expand Down
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

s1gr1d
merged 10 commits into

from

Nov 18, 2025
 Merged


fix(react): Prevent navigation span leaks for consecutive navigations
#18098
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
046216f

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


onurtemizkan Nov 5, 2025
14ce2fb

Reduce complexity in getNormalizedName function


onurtemizkan Nov 10, 2025
5144fa3

Fix tests


onurtemizkan Nov 10, 2025
7572a98

Use 100ms window for skipping cross-usage duplicates


onurtemizkan Nov 10, 2025
979d6e3

Fix lockfile


onurtemizkan Nov 11, 2025
ed53a1d

Move idle check to `shouldHandleNavigation`


onurtemizkan Nov 11, 2025
0cfe264

Address review comments from bots


onurtemizkan Nov 11, 2025
e9cab06

Edge case fixes


onurtemizkan Nov 12, 2025
3084371

Address review comments


onurtemizkan Nov 13, 2025
4ee07cd

Address reviews further


onurtemizkan Nov 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


109 changes: 55 additions & 54 deletions
...ackages/e2e-tests/test-applications/react-router-7-lazy-routes/tests/transactions.test.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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 &&
Expand All@@ -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
Expand All@@ -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();
Expand DownExpand Up@@ -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');
Expand DownExpand Up@@ -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 &&
Expand All@@ -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');
Expand All@@ -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
Expand DownExpand Up@@ -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 &&
Expand All@@ -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 &&
Expand All@@ -535,40 +522,54 @@ test('Creates separate transactions for rapid consecutive navigations', async ({
 );
 });
@s1gr1ds1gr1dNov 12, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could move the waitForTransaction calls to the beginning of the test and then do the .locator and .click calls for the navigations right after one another.
I am not sure how long the test takes in between the calls right now, so you can also leave it like it is if you think it's already very fast.
@onurtemizkanonurtemizkanNov 13, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved them up 👍

 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;

Expand Down
Loading
Loading