send wv spans as child spans of pageload/inp root span

Lms24 · Lms24 · commit 936f7f01dfcc · 2026-04-15T16:12:04.000+02:00
add INP tests
remove adding events
diff --git a/.size-limit.js b/.size-limit.js
@@ -40,6 +40,13 @@ module.exports = [
     gzip: true,
     limit: '43 KB',
   },
+  {
+    name: '@sentry/browser (incl. Tracing + Span Streaming)',
+    path: 'packages/browser/build/npm/esm/prod/index.js',
+    import: createImport('init', 'browserTracingIntegration', 'spanStreamingIntegration'),
+    gzip: true,
+    limit: '48 KB',
+  },
   {
     name: '@sentry/browser (incl. Tracing, Profiling)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/init.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/init.js
@@ -5,7 +5,7 @@ window._testBaseTimestamp = performance.timeOrigin / 1000;
 
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 9000 }), Sentry.spanStreamingIntegration()],
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
   traceLifecycle: 'stream',
   tracesSampleRate: 1,
 });
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/test.ts
@@ -1,7 +1,7 @@
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 import { sentryTest } from '../../../../utils/fixtures';
-import { shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
+import { hidePage, shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
 import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
 
 sentryTest.beforeEach(async ({ browserName, page }) => {
@@ -20,22 +20,18 @@ function waitForLayoutShift(page: Page): Promise<void> {
   });
 }
 
-function hidePage(page: Page): Promise<void> {
-  return page.evaluate(() => {
-    window.dispatchEvent(new Event('pagehide'));
-  });
-}
-
 sentryTest('captures CLS as a streamed span with source attributes', async ({ getLocalTestUrl, page }) => {
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   const clsSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'ui.webvital.cls');
+  const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
 
   await page.goto(`${url}#0.15`);
   await waitForLayoutShift(page);
   await hidePage(page);
 
   const clsSpan = await clsSpanPromise;
+  const pageloadSpan = await pageloadSpanPromise;
 
   expect(clsSpan.attributes?.['sentry.op']).toEqual({ type: 'string', value: 'ui.webvital.cls' });
   expect(clsSpan.attributes?.['sentry.origin']).toEqual({ type: 'string', value: 'auto.http.browser.cls' });
@@ -48,13 +44,16 @@ sentryTest('captures CLS as a streamed span with source attributes', async ({ ge
   );
 
   // Check pageload span id is present
-  expect(clsSpan.attributes?.['sentry.pageload.span_id']?.value).toMatch(/[\da-f]{16}/);
+  expect(clsSpan.attributes?.['sentry.pageload.span_id']?.value).toBe(pageloadSpan.span_id);
 
   // CLS is a point-in-time metric
   expect(clsSpan.start_timestamp).toEqual(clsSpan.end_timestamp);
 
   expect(clsSpan.span_id).toMatch(/^[\da-f]{16}$/);
   expect(clsSpan.trace_id).toMatch(/^[\da-f]{32}$/);
+
+  expect(clsSpan.parent_span_id).toBe(pageloadSpan.span_id);
+  expect(clsSpan.trace_id).toBe(pageloadSpan.trace_id);
 });
 
 sentryTest('CLS streamed span has web vital value attribute', async ({ getLocalTestUrl, page }) => {
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/init.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/init.js
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window._testBaseTimestamp = performance.timeOrigin / 1000;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({ idleTimeout: 4000 }),
+    Sentry.spanStreamingIntegration(),
+  ],
+  tracesSampleRate: 1,
+});
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/subject.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/subject.js
@@ -0,0 +1,19 @@
+const blockUI =
+  (delay = 70) =>
+  e => {
+    const startTime = Date.now();
+
+    function getElapsed() {
+      const time = Date.now();
+      return time - startTime;
+    }
+
+    while (getElapsed() < delay) {
+      //
+    }
+
+    e.target.classList.add('clicked');
+  };
+
+document.querySelector('[data-test-id=slow-button]').addEventListener('click', blockUI(450));
+document.querySelector('[data-test-id=normal-button]').addEventListener('click', blockUI());
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/template.html b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/template.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button data-test-id="slow-button" data-sentry-element="SlowButton">Slow</button>
+    <button data-test-id="normal-button" data-sentry-element="NormalButton">Click Me</button>
+  </body>
+</html>
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/test.ts
@@ -0,0 +1,79 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../utils/fixtures';
+import { hidePage, shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
+import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
+
+sentryTest.beforeEach(async ({ browserName }) => {
+  if (shouldSkipTracingTest() || testingCdnBundle() || browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+});
+
+sentryTest('captures INP click as a streamed span', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
+  const inpSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'ui.interaction.click');
+
+  await page.goto(url);
+
+  await page.locator('[data-test-id=normal-button]').click();
+  await page.locator('.clicked[data-test-id=normal-button]').isVisible();
+
+  await page.waitForTimeout(500);
+
+  await hidePage(page);
+
+  const inpSpan = await inpSpanPromise;
+  const pageloadSpan = await pageloadSpanPromise;
+
+  expect(inpSpan.attributes?.['sentry.op']).toEqual({ type: 'string', value: 'ui.interaction.click' });
+  expect(inpSpan.attributes?.['sentry.origin']).toEqual({ type: 'string', value: 'auto.http.browser.inp' });
+  expect(inpSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
+
+  const inpValue = inpSpan.attributes?.['browser.web_vital.inp.value']?.value as number;
+  expect(inpValue).toBeGreaterThan(0);
+
+  expect(inpSpan.attributes?.['sentry.exclusive_time']?.value).toBeGreaterThan(0);
+
+  expect(inpSpan.name).toBe('body > NormalButton');
+
+  expect(inpSpan.end_timestamp).toBeGreaterThan(inpSpan.start_timestamp);
+
+  expect(inpSpan.span_id).toMatch(/^[\da-f]{16}$/);
+  expect(inpSpan.trace_id).toMatch(/^[\da-f]{32}$/);
+
+  expect(inpSpan.parent_span_id).toBe(pageloadSpan.span_id);
+  expect(inpSpan.trace_id).toBe(pageloadSpan.trace_id);
+});
+
+sentryTest('captures the slowest interaction as streamed INP span', async ({ getLocalTestUrl, page }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+
+  await page.locator('[data-test-id=normal-button]').click();
+  await page.locator('.clicked[data-test-id=normal-button]').isVisible();
+
+  await page.waitForTimeout(500);
+
+  const inpSpanPromise = waitForStreamedSpan(page, span => {
+    const op = getSpanOp(span);
+    return op === 'ui.interaction.click';
+  });
+
+  await page.locator('[data-test-id=slow-button]').click();
+  await page.locator('.clicked[data-test-id=slow-button]').isVisible();
+
+  await page.waitForTimeout(500);
+
+  await hidePage(page);
+
+  const inpSpan = await inpSpanPromise;
+
+  expect(inpSpan.name).toBe('body > SlowButton');
+  expect(inpSpan.attributes?.['sentry.exclusive_time']?.value).toBeGreaterThan(400);
+
+  const inpValue = inpSpan.attributes?.['browser.web_vital.inp.value']?.value as number;
+  expect(inpValue).toBeGreaterThan(400);
+});
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp-streamed-spans/init.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp-streamed-spans/init.js
@@ -5,7 +5,7 @@ window._testBaseTimestamp = performance.timeOrigin / 1000;
 
 Sentry.init({
   dsn: 'https://public@dsn.ingest.sentry.io/1337',
-  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 9000 }), Sentry.spanStreamingIntegration()],
+  integrations: [Sentry.browserTracingIntegration(), Sentry.spanStreamingIntegration()],
   traceLifecycle: 'stream',
   tracesSampleRate: 1,
 });
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp-streamed-spans/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp-streamed-spans/test.ts
@@ -1,7 +1,7 @@
-import type { Page, Route } from '@playwright/test';
+import type { Route } from '@playwright/test';
 import { expect } from '@playwright/test';
 import { sentryTest } from '../../../../utils/fixtures';
-import { shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
+import { hidePage, shouldSkipTracingTest, testingCdnBundle } from '../../../../utils/helpers';
 import { getSpanOp, waitForStreamedSpan } from '../../../../utils/spanUtils';
 
 sentryTest.beforeEach(async ({ browserName, page }) => {
@@ -12,12 +12,6 @@ sentryTest.beforeEach(async ({ browserName, page }) => {
   await page.setViewportSize({ width: 800, height: 1200 });
 });
 
-function hidePage(page: Page): Promise<void> {
-  return page.evaluate(() => {
-    window.dispatchEvent(new Event('pagehide'));
-  });
-}
-
 sentryTest('captures LCP as a streamed span with element attributes', async ({ getLocalTestUrl, page }) => {
   page.route('**', route => route.continue());
   page.route('**/my/image.png', async (route: Route) => {
@@ -29,6 +23,7 @@ sentryTest('captures LCP as a streamed span with element attributes', async ({ g
   const url = await getLocalTestUrl({ testDir: __dirname });
 
   const lcpSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'ui.webvital.lcp');
+  const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
 
   await page.goto(url);
 
@@ -38,6 +33,7 @@ sentryTest('captures LCP as a streamed span with element attributes', async ({ g
   await hidePage(page);
 
   const lcpSpan = await lcpSpanPromise;
+  const pageloadSpan = await pageloadSpanPromise;
 
   expect(lcpSpan.attributes?.['sentry.op']).toEqual({ type: 'string', value: 'ui.webvital.lcp' });
   expect(lcpSpan.attributes?.['sentry.origin']).toEqual({ type: 'string', value: 'auto.http.browser.lcp' });
@@ -52,15 +48,18 @@ sentryTest('captures LCP as a streamed span with element attributes', async ({ g
   expect(lcpSpan.attributes?.['browser.web_vital.lcp.size']?.value).toEqual(expect.any(Number));
 
   // Check web vital value attribute
-  expect(lcpSpan.attributes?.['browser.web_vital.lcp.value']?.type).toBe('double');
+  expect(lcpSpan.attributes?.['browser.web_vital.lcp.value']?.type).toMatch(/^(double)|(integer)$/);
   expect(lcpSpan.attributes?.['browser.web_vital.lcp.value']?.value).toBeGreaterThan(0);
 
   // Check pageload span id is present
-  expect(lcpSpan.attributes?.['sentry.pageload.span_id']?.value).toMatch(/[\da-f]{16}/);
+  expect(lcpSpan.attributes?.['sentry.pageload.span_id']?.value).toBe(pageloadSpan.span_id);
 
   // Span should have meaningful duration (navigation start -> LCP event)
   expect(lcpSpan.end_timestamp).toBeGreaterThan(lcpSpan.start_timestamp);
 
   expect(lcpSpan.span_id).toMatch(/^[\da-f]{16}$/);
   expect(lcpSpan.trace_id).toMatch(/^[\da-f]{32}$/);
+
+  expect(lcpSpan.parent_span_id).toBe(pageloadSpan.span_id);
+  expect(lcpSpan.trace_id).toBe(pageloadSpan.trace_id);
 });
diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -94,6 +94,7 @@ interface StartTrackingWebVitalsOptions {
  * Start tracking web vitals.
  * The callback returned by this function can be used to stop tracking & ensure all measurements are final & captured.
  *
+ * @deprecated this function will be removed and streamlined once we stop supporting standalone v1
  * @returns A function that forces web vitals collection
  */
 export function startTrackingWebVitals({
@@ -108,25 +109,23 @@ export function startTrackingWebVitals({
       WINDOW.performance.mark('sentry-tracing-init');
     }
 
-    const lcpCleanupCallback =
-      recordLcpStandaloneSpans === true
-        ? trackLcpAsStandaloneSpan(client)
-        : recordLcpStandaloneSpans === false
-          ? _trackLCP()
-          : undefined;
+    const lcpCleanupCallback = recordLcpStandaloneSpans
+      ? trackLcpAsStandaloneSpan(client)
+      : recordLcpStandaloneSpans === false
+        ? _trackLCP()
+        : undefined;
 
-    const clsCleanupCallback =
-      recordClsStandaloneSpans === true
-        ? trackClsAsStandaloneSpan(client)
-        : recordClsStandaloneSpans === false
-          ? _trackCLS()
-          : undefined;
+    const clsCleanupCallback = recordClsStandaloneSpans
+      ? trackClsAsStandaloneSpan(client)
+      : recordClsStandaloneSpans === false
+        ? _trackCLS()
+        : undefined;
 
     const ttfbCleanupCallback = _trackTtfb();
 
     return (): void => {
-      lcpCleanupCallback?.();
       ttfbCleanupCallback();
+      lcpCleanupCallback?.();
       clsCleanupCallback?.();
     };
   }
diff --git a/packages/browser-utils/src/metrics/inp.ts b/packages/browser-utils/src/metrics/inp.ts
@@ -155,6 +155,14 @@ export const _onInp: InstrumentationHandlerCallback = ({ metric }) => {
   }
 };
 
+/**
+ * Look up a cached interaction context (element name + root span) by interactionId.
+ * Returns undefined if no context was cached for this interaction.
+ */
+export function getCachedInteractionContext(interactionId: number | undefined): InteractionContext | undefined {
+  return interactionId != null ? INTERACTIONS_SPAN_MAP.get(interactionId) : undefined;
+}
+
 /**
  * Register a listener to cache route information for INP interactions.
  */
diff --git a/packages/browser-utils/src/metrics/instrument.ts b/packages/browser-utils/src/metrics/instrument.ts
@@ -27,7 +27,7 @@ interface PerformanceEntry {
   readonly startTime: number;
   toJSON(): Record<string, unknown>;
 }
-interface PerformanceEventTiming extends PerformanceEntry {
+export interface PerformanceEventTiming extends PerformanceEntry {
   processingStart: number;
   processingEnd: number;
   duration: number;
@@ -114,6 +114,7 @@ let _previousCls: Metric | undefined;
 let _previousLcp: Metric | undefined;
 let _previousTtfb: Metric | undefined;
 let _previousInp: Metric | undefined;
+
 /**
  * Add a callback that will be triggered when a CLS metric is available.
  * Returns a cleanup callback which can be called to remove the instrumentation handler.
diff --git a/packages/browser-utils/src/metrics/utils.ts b/packages/browser-utils/src/metrics/utils.ts
@@ -203,17 +203,18 @@ export function supportsWebVital(entryType: 'layout-shift' | 'largest-contentful
  * @param collectorCallback the callback to be called when the first of these events is triggered. Parameters:
  * - event: the event that triggered the reporting of the web vital value.
  * - pageloadSpanId: the span id of the pageload span. This is used to link the web vital span to the pageload span.
+ * - pageloadSpan: the pageload span instance. This is used for full access to the pageload span for span streaming.
  */
 export function listenForWebVitalReportEvents(
   client: Client,
-  collectorCallback: (event: WebVitalReportEvent, pageloadSpanId: string) => void,
+  collectorCallback: (event: WebVitalReportEvent, pageloadSpanId: string, pageloadSpan?: Span) => void,
 ) {
-  let pageloadSpanId: string | undefined;
+  let pageloadSpan: Span | undefined;
 
   let collected = false;
   function _runCollectorCallbackOnce(event: WebVitalReportEvent) {
-    if (!collected && pageloadSpanId) {
-      collectorCallback(event, pageloadSpanId);
+    if (!collected && pageloadSpan) {
+      collectorCallback(event, pageloadSpan.spanContext().spanId, pageloadSpan);
     }
     collected = true;
   }
@@ -233,7 +234,7 @@ export function listenForWebVitalReportEvents(
   });
 
   const unsubscribeAfterStartPageLoadSpan = client.on('afterStartPageLoadSpan', span => {
-    pageloadSpanId = span.spanContext().spanId;
+    pageloadSpan = span;
     unsubscribeAfterStartPageLoadSpan();
   });
 }
diff --git a/packages/browser-utils/src/metrics/webVitalSpans.ts b/packages/browser-utils/src/metrics/webVitalSpans.ts
diff --git a/packages/browser-utils/test/metrics/webVitalSpans.test.ts b/packages/browser-utils/test/metrics/webVitalSpans.test.ts
diff --git a/packages/browser/src/integrations/spanstreaming.ts b/packages/browser/src/integrations/spanstreaming.ts
diff --git a/packages/browser/src/tracing/browserTracingIntegration.ts b/packages/browser/src/tracing/browserTracingIntegration.ts
