test(e2e): Cover soft navigation web vitals across router instrumentations

dev-packages/e2e-tests/test-applications/angular-22/tests/soft-navigation-web-vitals.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { collectStreamedSpans, getSpanOp, hidePage } from '@sentry-internal/test-utils';
+
+// The correlation between a soft navigation and the SDK's navigation span hangs off the interaction
+// that triggered it, so it only holds while the navigation span is started before the interaction's
+// Event Timing entry is delivered. Angular's router instrumentation starts the navigation span off the router's own event stream.
+test('attributes soft navigation web vitals to the navigation span they were measured on', async ({ page }) => {
+  const spansPromise = collectStreamedSpans(
+    'angular-22',
+    spansOfTrace =>
+      spansOfTrace.some(span => getSpanOp(span) === 'navigation' && span.is_segment) &&
+      spansOfTrace.some(span => getSpanOp(span) === 'ui.webvital.cls'),
+  );
+
+  await page.goto('/');
+  await page.locator('#navLink').click();
+
+  // A soft navigation's vitals are finalized at the next soft navigation or on pagehide, so nothing
+  // is reported for it until the page goes away.
+  await hidePage(page);
+
+  const spans = await spansPromise;
+
+  const navigationSpan = spans.find(span => getSpanOp(span) === 'navigation' && span.is_segment)!;
+  const clsSpan = spans.find(span => getSpanOp(span) === 'ui.webvital.cls')!;
+
+  expect(navigationSpan.name).toBe('/users/:id/');
+
+  const softNavigationId = navigationSpan.attributes['browser.navigation.id']?.value;
+  expect(softNavigationId).toEqual(expect.any(Number));
+
+  // Both sides of the correlation carry the id, so the navigation and its vitals are joinable.
+  expect(clsSpan.attributes).toMatchObject({
+    'browser.navigation.id': { value: softNavigationId, type: 'integer' },
+    'browser.navigation.type': { value: 'soft-navigation', type: 'string' },
+  });
+  expect(clsSpan.parent_span_id).toBe(navigationSpan.span_id);
+});

dev-packages/e2e-tests/test-applications/react-17-static/tests/transactions.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan, waitForTransaction } from '@sentry-internal/test-utils';
+import { getSpanOp, hidePage, waitForStreamedSpan, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('sends a pageload transaction with a parameterized URL', async ({ page }) => {
   const transactionPromise = waitForTransaction('react-17-static', async transactionEvent => {
@@ -76,17 +76,8 @@ test('sends an INP span', async ({ page }) => {
 
   await page.click('#exception-button');
 
-  // web-vitals defers processing the interaction's event entries to a
-  // `requestIdleCallback(..., { timeout: 1000 })`. Chromium only runs that on the timeout here, so
-  // hiding the page any earlier forces a report before the interaction has been processed and no
-  // INP is emitted at all.
-  await page.waitForTimeout(1500);
-
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  await hidePage(page);
 
   const inpSpan = await inpSpanPromise;
 

dev-packages/e2e-tests/test-applications/react-17/tests/spans.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { getSpanOp, hidePage, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('sends a pageload span with a parameterized URL', async ({ page }) => {
   const spanPromise = waitForStreamedSpan('react-17', span => {
@@ -58,17 +58,8 @@ test('sends an INP span', async ({ page }) => {
 
   await page.click('#exception-button');
 
-  // web-vitals defers processing the interaction's event entries to a
-  // `requestIdleCallback(..., { timeout: 1000 })`. Chromium only runs that on the timeout here, so
-  // hiding the page any earlier forces a report before the interaction has been processed and no
-  // INP is emitted at all.
-  await page.waitForTimeout(1500);
-
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  await hidePage(page);
 
   const inpSpan = await inpSpanPromise;
 

dev-packages/e2e-tests/test-applications/react-create-browser-router/tests/soft-navigation-web-vitals.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+import { collectStreamedSpans, getSpanOp, hidePage } from '@sentry-internal/test-utils';
+
+// The correlation between a soft navigation and the SDK's navigation span hangs off the interaction
+// that triggered it, so it only holds while the navigation span is started before the interaction's
+// Event Timing entry is delivered. `reactRouterV6BrowserTracingIntegration` on a data router defers the navigation span until the
+// router's navigation state goes idle, i.e. after loaders resolve, which is the latest any of our
+// instrumentations starts one.
+test('attributes soft navigation web vitals to the navigation span they were measured on', async ({ page }) => {
+  const spansPromise = collectStreamedSpans(
+    'react-create-browser-router',
+    spansOfTrace =>
+      spansOfTrace.some(span => getSpanOp(span) === 'navigation' && span.is_segment) &&
+      spansOfTrace.some(span => getSpanOp(span) === 'ui.webvital.cls'),
+  );
+
+  await page.goto('/');
+  await page.locator('#navigation').click();
+
+  // A soft navigation's vitals are finalized at the next soft navigation or on pagehide, so nothing
+  // is reported for it until the page goes away.
+  await hidePage(page);
+
+  const spans = await spansPromise;
+
+  const navigationSpan = spans.find(span => getSpanOp(span) === 'navigation' && span.is_segment)!;
+  const clsSpan = spans.find(span => getSpanOp(span) === 'ui.webvital.cls')!;
+
+  expect(navigationSpan.name).toBe('/user/:id');
+
+  const softNavigationId = navigationSpan.attributes['browser.navigation.id']?.value;
+  expect(softNavigationId).toEqual(expect.any(Number));
+
+  // Both sides of the correlation carry the id, so the navigation and its vitals are joinable.
+  expect(clsSpan.attributes).toMatchObject({
+    'browser.navigation.id': { value: softNavigationId, type: 'integer' },
+    'browser.navigation.type': { value: 'soft-navigation', type: 'string' },
+  });
+  expect(clsSpan.parent_span_id).toBe(navigationSpan.span_id);
+});

dev-packages/e2e-tests/test-applications/react-router-6/tests/soft-navigation-web-vitals.test.ts

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+import { collectStreamedSpans, getSpanOp, hidePage } from '@sentry-internal/test-utils';
+
+// The correlation between a soft navigation and the SDK's navigation span hangs off the interaction
+// that triggered it, so it only holds while the navigation span is started before the interaction's
+// Event Timing entry is delivered. `reactRouterV6BrowserTracingIntegration` starts it from a layout
+// effect rather than from the history change, which is what this exercises.
+test('attributes soft navigation web vitals to the navigation span they were measured on', async ({ page }) => {
+  const spansPromise = collectStreamedSpans(
+    'react-router-6',
+    spansOfTrace =>
+      spansOfTrace.some(span => getSpanOp(span) === 'navigation' && span.is_segment) &&
+      spansOfTrace.some(span => getSpanOp(span) === 'ui.webvital.cls'),
+  );
+
+  await page.goto('/');
+  await page.click('#navigation');
+
+  // A soft navigation's vitals are finalized at the next soft navigation or on pagehide, so nothing
+  // is reported for it until the page goes away.
+  await hidePage(page);
+
+  const spans = await spansPromise;
+
+  const navigationSpan = spans.find(span => getSpanOp(span) === 'navigation' && span.is_segment)!;
+  const clsSpan = spans.find(span => getSpanOp(span) === 'ui.webvital.cls')!;
+
+  expect(navigationSpan.name).toBe('/user/:id');
+
+  const softNavigationId = navigationSpan.attributes['browser.navigation.id']?.value;
+  expect(softNavigationId).toEqual(expect.any(Number));
+
+  // Both sides of the correlation carry the id, so the navigation and its vitals are joinable.
+  expect(clsSpan.attributes).toMatchObject({
+    'browser.navigation.id': { value: softNavigationId, type: 'integer' },
+    'browser.navigation.type': { value: 'soft-navigation', type: 'string' },
+  });
+  expect(clsSpan.parent_span_id).toBe(navigationSpan.span_id);
+  expect(clsSpan.attributes['sentry.pageload.span_id']).toBeUndefined();
+});

dev-packages/e2e-tests/test-applications/react-router-6/tests/spans.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { getSpanOp, hidePage, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('sends a pageload span with a parameterized URL', async ({ page }) => {
   const spanPromise = waitForStreamedSpan('react-router-6', span => {
@@ -58,17 +58,8 @@ test('sends an INP span', async ({ page }) => {
 
   await page.click('#exception-button');
 
-  // web-vitals defers processing the interaction's event entries to a
-  // `requestIdleCallback(..., { timeout: 1000 })`. Chromium only runs that on the timeout here, so
-  // hiding the page any earlier forces a report before the interaction has been processed and no
-  // INP is emitted at all.
-  await page.waitForTimeout(1500);
-
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  await hidePage(page);
 
   const inpSpan = await inpSpanPromise;
 

dev-packages/e2e-tests/test-applications/react-router-7-spa-streaming/tests/spans.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { getSpanOp, hidePage, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('sends a pageload span with a parameterized URL', async ({ page }) => {
   const spanPromise = waitForStreamedSpan('react-router-7-spa-streaming', span => {
@@ -56,17 +56,8 @@ test('sends an INP span', async ({ page }) => {
 
   await page.click('#exception-button');
 
-  // web-vitals defers processing the interaction's event entries to a
-  // `requestIdleCallback(..., { timeout: 1000 })`. Chromium only runs that on the timeout here, so
-  // hiding the page any earlier forces a report before the interaction has been processed and no
-  // INP is emitted at all.
-  await page.waitForTimeout(1500);
-
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  await hidePage(page);
 
   const inpSpan = await inpSpanPromise;
 

dev-packages/e2e-tests/test-applications/react-router-7-spa/tests/spans.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { getSpanOp, hidePage, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('sends a pageload span with a parameterized URL', async ({ page }) => {
   const spanPromise = waitForStreamedSpan('react-router-7-spa', span => {
@@ -58,17 +58,8 @@ test('sends an INP span', async ({ page }) => {
 
   await page.click('#exception-button');
 
-  // web-vitals defers processing the interaction's event entries to a
-  // `requestIdleCallback(..., { timeout: 1000 })`. Chromium only runs that on the timeout here, so
-  // hiding the page any earlier forces a report before the interaction has been processed and no
-  // INP is emitted at all.
-  await page.waitForTimeout(1500);
-
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  await hidePage(page);
 
   const inpSpan = await inpSpanPromise;
 

dev-packages/e2e-tests/test-applications/react-router-8-spa/tests/spans.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+import { getSpanOp, hidePage, waitForStreamedSpan } from '@sentry-internal/test-utils';
 
 test('sends a pageload span with a parameterized URL', async ({ page }) => {
   const spanPromise = waitForStreamedSpan('react-router-8-spa', span => {
@@ -58,17 +58,8 @@ test('sends an INP span', async ({ page }) => {
 
   await page.click('#exception-button');
 
-  // web-vitals defers processing the interaction's event entries to a
-  // `requestIdleCallback(..., { timeout: 1000 })`. Chromium only runs that on the timeout here, so
-  // hiding the page any earlier forces a report before the interaction has been processed and no
-  // INP is emitted at all.
-  await page.waitForTimeout(1500);
-
   // Page hide to trigger INP
-  await page.evaluate(() => {
-    Object.defineProperty(document, 'visibilityState', { value: 'hidden', configurable: true });
-    document.dispatchEvent(new Event('visibilitychange'));
-  });
+  await hidePage(page);
 
   const inpSpan = await inpSpanPromise;
 

dev-packages/e2e-tests/test-applications/vue-3/tests/soft-navigation-web-vitals.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { collectStreamedSpans, getSpanOp, hidePage } from '@sentry-internal/test-utils';
+
+// The correlation between a soft navigation and the SDK's navigation span hangs off the interaction
+// that triggered it, so it only holds while the navigation span is started before the interaction's
+// Event Timing entry is delivered. `vueIntegration` starts the navigation span from a `router.beforeEach` guard.
+test('attributes soft navigation web vitals to the navigation span they were measured on', async ({ page }) => {
+  const spansPromise = collectStreamedSpans(
+    'vue-3',
+    spansOfTrace =>
+      spansOfTrace.some(span => getSpanOp(span) === 'navigation' && span.is_segment) &&
+      spansOfTrace.some(span => getSpanOp(span) === 'ui.webvital.cls'),
+  );
+
+  await page.goto('/');
+  await page.locator('#navLink').click();
+
+  // A soft navigation's vitals are finalized at the next soft navigation or on pagehide, so nothing
+  // is reported for it until the page goes away.
+  await hidePage(page);
+
+  const spans = await spansPromise;
+
+  const navigationSpan = spans.find(span => getSpanOp(span) === 'navigation' && span.is_segment)!;
+  const clsSpan = spans.find(span => getSpanOp(span) === 'ui.webvital.cls')!;
+
+  expect(navigationSpan.name).toBe('/users/:id');
+
+  const softNavigationId = navigationSpan.attributes['browser.navigation.id']?.value;
+  expect(softNavigationId).toEqual(expect.any(Number));
+
+  // Both sides of the correlation carry the id, so the navigation and its vitals are joinable.
+  expect(clsSpan.attributes).toMatchObject({
+    'browser.navigation.id': { value: softNavigationId, type: 'integer' },
+    'browser.navigation.type': { value: 'soft-navigation', type: 'string' },
+  });
+  expect(clsSpan.parent_span_id).toBe(navigationSpan.span_id);
+});

dev-packages/test-utils/src/index.ts

@@ -30,6 +30,7 @@ export type { OutputScanOptions } from './build-output';
 export { assertBundlerInstrumentation } from './bundler-instrumentation';
 export type { InstrumentationFixture } from './bundler-instrumentation';
 
+export { hidePage } from './page';
 export { getPlaywrightConfig } from './playwright-config';
 export { createBasicSentryServer, createTestServer } from './server';
 

dev-packages/test-utils/src/page.ts

@@ -0,0 +1,35 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * Hides the page so the SDK reports the web vitals that are only finalized on pagehide.
+ */
+export async function hidePage(page: Page): Promise<void> {
+  // web-vitals defers processing an interaction's event entries into
+  // `requestIdleCallback(..., { timeout: 1000 })`, and Chromium only reaches idle here once that
+  // timeout elapses. Hiding the page first forces a report while the metric is still unset, so no
+  // vital is emitted at all. Idle callbacks run in scheduling order, so waiting for one queued now
+  // means web-vitals' earlier callback has already run.
+  await page.evaluate(() => {
+    return new Promise<void>(resolve => {
+      if (typeof requestIdleCallback !== 'function') {
+        resolve();
+        return;
+      }
+      requestIdleCallback(() => resolve(), { timeout: 1000 });
+    });
+  });
+
+  // The callback below runs in the page, so `document` is the browser's, not Node's.
+  /* oxlint-disable no-restricted-globals */
+  await page.evaluate(() => {
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      get: function () {
+        return 'hidden';
+      },
+    });
+
+    document.dispatchEvent(new Event('visibilitychange'));
+  });
+  /* oxlint-enable no-restricted-globals */
+}