feat(browser): Emit web vitals as streamed spans (#19827)

## Summary

(Updated from @Lms24)

Closes #17931

When span streaming is enabled (`traceLifecycle: 'stream'`), emit web
vital values as non-standalone spans that flow through the v2 pipeline
(`afterSpanEnd` → `captureSpan()` → `SpanBuffer`).

- Emit LCP, CLS, INP as streamed spans when
`hasSpanStreamingEnabled(client)` is `true`
- LCP, CLS, INP v2 spans exclusively send new
`browser.web_vital.<vitalName>.*` attributes
- Disable standalone CLS/LCP spans when span streaming is enabled
(`!spanStreamingEnabled && enableStandaloneClsSpans`)
- Add `MAX_PLAUSIBLE_INP_DURATION` (60s) sanity check to streamed INP
path, matching the existing standalone handler
- TTFB, FCP, FP are **not** emitted as spans — they stay as pageload
span attributes but get sent with the new
`browser.web_vital.(ttfb|fcp|fp).value` attributes
- Performance meta attributes are sent with better names
(getsentry/sentry-conventions#321)
- Added integration tests
- LCP v2 spans now have a duration and are no longer point in time

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

Author: 3 people

.size-limit.js

@@ -38,21 +38,28 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '43 KB',
+    limit: '44 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',
     import: createImport('init', 'browserTracingIntegration', 'browserProfilingIntegration'),
     gzip: true,
-    limit: '48 KB',
+    limit: '49 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '82 KB',
+    limit: '83 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay) - with treeshaking flags',
@@ -82,14 +89,14 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'),
     gzip: true,
-    limit: '87 KB',
+    limit: '88 KB',
   },
   {
     name: '@sentry/browser (incl. Tracing, Replay, Feedback)',
     path: 'packages/browser/build/npm/esm/prod/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'feedbackIntegration'),
     gzip: true,
-    limit: '99 KB',
+    limit: '100 KB',
   },
   {
     name: '@sentry/browser (incl. Feedback)',
@@ -163,7 +170,7 @@ module.exports = [
     path: 'packages/vue/build/esm/index.js',
     import: createImport('init', 'browserTracingIntegration'),
     gzip: true,
-    limit: '45 KB',
+    limit: '46 KB',
   },
   // Svelte SDK (ESM)
   {
@@ -184,7 +191,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing)',
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: true,
-    limit: '44 KB',
+    limit: '45 KB',
   },
   {
     name: 'CDN Bundle (incl. Logs, Metrics)',
@@ -196,7 +203,7 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing, Logs, Metrics)',
     path: createCDNPath('bundle.tracing.logs.metrics.min.js'),
     gzip: true,
-    limit: '45 KB',
+    limit: '46 KB',
   },
   {
     name: 'CDN Bundle (incl. Replay, Logs, Metrics)',
@@ -208,25 +215,25 @@ module.exports = [
     name: 'CDN Bundle (incl. Tracing, Replay)',
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: true,
-    limit: '81 KB',
+    limit: '82 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Logs, Metrics)',
     path: createCDNPath('bundle.tracing.replay.logs.metrics.min.js'),
     gzip: true,
-    limit: '82 KB',
+    limit: '83 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback)',
     path: createCDNPath('bundle.tracing.replay.feedback.min.js'),
     gzip: true,
-    limit: '87 KB',
+    limit: '88 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics)',
     path: createCDNPath('bundle.tracing.replay.feedback.logs.metrics.min.js'),
     gzip: true,
-    limit: '88 KB',
+    limit: '89 KB',
   },
   // browser CDN bundles (non-gzipped)
   {
@@ -241,7 +248,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.min.js'),
     gzip: false,
     brotli: false,
-    limit: '130 KB',
+    limit: '134 KB',
   },
   {
     name: 'CDN Bundle (incl. Logs, Metrics) - uncompressed',
@@ -255,7 +262,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '134 KB',
+    limit: '138 KB',
   },
   {
     name: 'CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed',
@@ -269,14 +276,14 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.min.js'),
     gzip: false,
     brotli: false,
-    limit: '248 KB',
+    limit: '251 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed',
     path: createCDNPath('bundle.tracing.replay.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '251 KB',
+    limit: '255 KB',
   },
   {
     name: 'CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed',
@@ -290,7 +297,7 @@ module.exports = [
     path: createCDNPath('bundle.tracing.replay.feedback.logs.metrics.min.js'),
     gzip: false,
     brotli: false,
-    limit: '264 KB',
+    limit: '268 KB',
   },
   // Next.js SDK (ESM)
   {
@@ -299,7 +306,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['next/router', 'next/constants'],
     gzip: true,
-    limit: '48 KB',
+    limit: '49 KB',
   },
   // SvelteKit SDK (ESM)
   {
@@ -308,7 +315,7 @@ module.exports = [
     import: createImport('init'),
     ignore: ['$app/stores'],
     gzip: true,
-    limit: '44 KB',
+    limit: '45 KB',
   },
   // Node-Core SDK (ESM)
   {

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-streamed/test.ts

@@ -69,13 +69,17 @@ sentryTest('starts a streamed navigation span on page navigation', async ({ getL
 
   expect(navigationSpan).toEqual({
     attributes: {
-      effectiveConnectionType: {
+      'network.connection.effective_type': {
         type: 'string',
         value: expect.any(String),
       },
-      hardwareConcurrency: {
-        type: 'string',
-        value: expect.any(String),
+      'device.processor_count': {
+        type: expect.stringMatching(/^(integer)|(double)$/),
+        value: expect.any(Number),
+      },
+      'network.connection.rtt': {
+        type: expect.stringMatching(/^(integer)|(double)$/),
+        value: expect.any(Number),
       },
       'sentry.idle_span_finish_reason': {
         type: 'string',

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/pageload-streamed/test.ts

@@ -62,20 +62,34 @@ sentryTest(
 
     expect(pageloadSpan).toEqual({
       attributes: {
-        effectiveConnectionType: {
+        // formerly known as 'effectiveConnectionType'
+        'network.connection.effective_type': {
           type: 'string',
           value: expect.any(String),
         },
-        hardwareConcurrency: {
-          type: 'string',
-          value: expect.any(String),
+        // formerly known as 'hardwareConcurrency'
+        'device.processor_count': {
+          type: expect.stringMatching(/^(integer)|(double)$/),
+          value: expect.any(Number),
         },
-        'performance.activationStart': {
-          type: 'integer',
+        'browser.performance.navigation.activation_start': {
+          type: expect.stringMatching(/^(integer)|(double)$/),
+          value: expect.any(Number),
+        },
+        'browser.performance.time_origin': {
+          type: expect.stringMatching(/^(integer)|(double)$/),
+          value: expect.any(Number),
+        },
+        'network.connection.rtt': {
+          type: expect.stringMatching(/^(integer)|(double)$/),
+          value: expect.any(Number),
+        },
+        'browser.web_vital.ttfb.request_time': {
+          type: expect.stringMatching(/^(integer)|(double)$/),
           value: expect.any(Number),
         },
-        'performance.timeOrigin': {
-          type: 'double',
+        'browser.web_vital.ttfb.value': {
+          type: expect.stringMatching(/^(integer)|(double)$/),
           value: expect.any(Number),
         },
         'sentry.idle_span_finish_reason': {

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/init.js

@@ -0,0 +1,11 @@
+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(), Sentry.spanStreamingIntegration()],
+  traceLifecycle: 'stream',
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/subject.js

@@ -0,0 +1,17 @@
+import { simulateCLS } from '../../../../utils/web-vitals/cls.ts';
+
+// Simulate Layout shift right at the beginning of the page load, depending on the URL hash
+// don't run if expected CLS is NaN
+const expectedCLS = Number(location.hash.slice(1));
+if (expectedCLS && expectedCLS >= 0) {
+  simulateCLS(expectedCLS).then(() => window.dispatchEvent(new Event('cls-done')));
+}
+
+// Simulate layout shift whenever the trigger-cls event is dispatched
+// Cannot trigger via a button click because expected layout shift after
+// an interaction doesn't contribute to CLS.
+window.addEventListener('trigger-cls', () => {
+  simulateCLS(0.1).then(() => {
+    window.dispatchEvent(new Event('cls-done'));
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/template.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="content"></div>
+    <p>Some content</p>
+  </body>
+</html>

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-cls-streamed-spans/test.ts

@@ -0,0 +1,76 @@
+import type { Page } from '@playwright/test';
+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, page }) => {
+  if (shouldSkipTracingTest() || testingCdnBundle() || browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+
+  await page.setViewportSize({ width: 800, height: 1200 });
+});
+
+function waitForLayoutShift(page: Page): Promise<void> {
+  return page.evaluate(() => {
+    return new Promise(resolve => {
+      window.addEventListener('cls-done', () => resolve());
+    });
+  });
+}
+
+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' });
+  expect(clsSpan.attributes?.['sentry.exclusive_time']).toEqual({ type: 'integer', value: 0 });
+  expect(clsSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
+
+  // Check browser.web_vital.cls.source attributes
+  expect(clsSpan.attributes?.['browser.web_vital.cls.source.1']?.value).toEqual(
+    expect.stringContaining('body > div#content > p'),
+  );
+
+  // Check pageload span id is present
+  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 }) => {
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  const clsSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'ui.webvital.cls');
+
+  await page.goto(`${url}#0.1`);
+  await waitForLayoutShift(page);
+  await hidePage(page);
+
+  const clsSpan = await clsSpanPromise;
+
+  // The CLS value should be set as a browser.web_vital.cls.value attribute
+  expect(clsSpan.attributes?.['browser.web_vital.cls.value']?.type).toBe('double');
+  // Flakey value dependent on timings -> we check for a range
+  const clsValue = clsSpan.attributes?.['browser.web_vital.cls.value']?.value as number;
+  expect(clsValue).toBeGreaterThan(0.05);
+  expect(clsValue).toBeLessThan(0.15);
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-inp-streamed-spans/init.js

@@ -0,0 +1,10 @@
+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,
+});

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());

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>