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

Open
wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

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 number Diff line number Diff 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 Down Expand 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 Down Expand 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 Down Expand 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 ({
);
});
Copy link
Member

@s1gr1d s1gr1d Nov 12, 2025

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.

Copy link
Collaborator Author

@onurtemizkan onurtemizkan Nov 13, 2025

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