getsentry · logaretm · Jun 3, 2026 · May 28, 2026 · May 29, 2026 · May 29, 2026
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+ dsn: 'https://public@dsn.ingest.sentry.io/1337',
+ integrations: [
+ Sentry.browserTracingIntegration({
+ idleTimeout: 1000,
+ }),
+ ],
+ tracesSampleRate: 1,
+});
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ </head>
+ <body>
+ <div>Rendered</div>
+ </body>
+</html>
@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest.beforeEach(({ browserName }) => {
+ if (shouldSkipTracingTest() || browserName !== 'chromium') {
+ sentryTest.skip();
+ }
+});
+
+// `connection.rtt` is recorded as a measurement, which is only flushed on the pageload
+// transaction. It must not leak onto navigation transactions.
+sentryTest(
+ 'records `connection.rtt` as a measurement on pageload but not on navigation transactions',
+ async ({ getLocalTestUrl, page }) => {
+ const pageloadRequestPromise = waitForTransactionRequest(page, event => event.contexts?.trace?.op === 'pageload');
+ const url = await getLocalTestUrl({ testDir: __dirname });
+ await page.goto(url);
+
+ const pageloadRequest = envelopeRequestParser(await pageloadRequestPromise) as Event;
+
+ const navigationRequestPromise = waitForTransactionRequest(
+ page,
+ event => event.contexts?.trace?.op === 'navigation',
+ );
+ await page.goto(`${url}#foo`);
+
+ const navigationRequest = envelopeRequestParser(await navigationRequestPromise) as Event;
+
+ expect(pageloadRequest.contexts?.trace?.op).toBe('pageload');
+ expect(navigationRequest.contexts?.trace?.op).toBe('navigation');
+
+ expect(pageloadRequest.measurements?.['connection.rtt']?.value).toBeDefined();
+ expect(navigationRequest.measurements?.['connection.rtt']).toBeUndefined();
+ },
+);
@@ -8,6 +8,7 @@ export {
 
 export {
  addPerformanceEntries,
+ addWebVitalsToSpan,
  startTrackingInteractions,
  startTrackingLongTasks,
  startTrackingLongAnimationFrames,

@@ -123,9 +123,11 @@ export function startTrackingWebVitals({
  : undefined;
 
  const ttfbCleanupCallback = _trackTtfb();
+ const fpFcpCleanupCallback = _trackFpFcp();
 
  return (): void => {
  ttfbCleanupCallback();
+ fpFcpCleanupCallback();
  lcpCleanupCallback?.();
  clsCleanupCallback?.();
  };
@@ -303,7 +305,47 @@ function _trackTtfb(): () => void {
  });
 }
 
+/** Starts tracking First Paint and First Contentful Paint on the current page. */
+function _trackFpFcp(): () => void {
+ return addPerformanceInstrumentationHandler('paint', ({ entries }) => {
+ const firstHidden = getVisibilityWatcher();
+ for (const entry of entries) {
+ // Only report if the page wasn't hidden prior to the web vital.
+ const shouldRecord = entry.startTime < firstHidden.firstHiddenTime;
+ if (entry.name === 'first-paint' && shouldRecord) {
+ _measurements['fp'] = { value: entry.startTime, unit: 'millisecond' };
+ }
+ if (entry.name === 'first-contentful-paint' && shouldRecord) {
+ _measurements['fcp'] = { value: entry.startTime, unit: 'millisecond' };
+ }
+ }
+ });
+}
+
 interface AddPerformanceEntriesOptions {
+ /**
+ * Resource spans with `op`s matching strings in the array will not be emitted.
+ *
+ * Default: []
+ */
+ ignoreResourceSpans: Array<'resouce.script' | 'resource.css' | 'resource.img' | 'resource.other' | string>;
+
+ /**
+ * Performance spans created from browser Performance APIs,
+ * `performance.mark(...)` nand `performance.measure(...)`
+ * with `name`s matching strings in the array will not be emitted.
+ *
+ * Default: []
+ */
+ ignorePerformanceApiSpans: Array<string | RegExp>;
+
+ /**
+ * Whether span streaming is enabled.
+ */
+ spanStreamingEnabled?: boolean;
+}
+
+interface AddWebVitalsToSpanOptions {
  /**
  * Flag to determine if CLS should be recorded as a measurement on the pageload span or
  * sent as a standalone span instead.
@@ -322,22 +364,6 @@ interface AddPerformanceEntriesOptions {
  */
  recordLcpOnPageloadSpan: boolean;
 
- /**
- * Resource spans with `op`s matching strings in the array will not be emitted.
- *
- * Default: []
- */
- ignoreResourceSpans: Array<'resouce.script' | 'resource.css' | 'resource.img' | 'resource.other' | string>;
-
- /**
- * Performance spans created from browser Performance APIs,
- * `performance.mark(...)` nand `performance.measure(...)`
- * with `name`s matching strings in the array will not be emitted.
- *
- * Default: []
- */
- ignorePerformanceApiSpans: Array<string | RegExp>;
-
  /**
  * Whether span streaming is enabled.
  */
@@ -353,13 +379,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
  return;
  }
 
- const {
- spanStreamingEnabled,
- ignorePerformanceApiSpans,
- ignoreResourceSpans,
- recordClsOnPageloadSpan,
- recordLcpOnPageloadSpan,
- } = options;
+ const { spanStreamingEnabled, ignorePerformanceApiSpans, ignoreResourceSpans } = options;
 
  const timeOrigin = msToSec(origin);
 
@@ -390,18 +410,6 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
  case 'paint':
  case 'measure': {
  _addMeasureSpans(span, entry, startTime, duration, timeOrigin, ignorePerformanceApiSpans);
-
- // capture web vitals
- const firstHidden = getVisibilityWatcher();
- // Only report if the page wasn't hidden prior to the web vital.
- const shouldRecord = entry.startTime < firstHidden.firstHiddenTime;
-
- if (entry.name === 'first-paint' && shouldRecord) {
- _measurements['fp'] = { value: entry.startTime, unit: 'millisecond' };
- }
- if (entry.name === 'first-contentful-paint' && shouldRecord) {
- _measurements['fcp'] = { value: entry.startTime, unit: 'millisecond' };
- }
  break;
  }
  case 'resource': {
@@ -423,9 +431,29 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
  _performanceCursor = Math.max(performanceEntries.length - 1, 0);
 
  _trackNavigator(span, spanStreamingEnabled);
+}
+
+/**
+ * Writes the collected web vitals (LCP, CLS, INP, TTFB, FP, FCP) onto the pageload span,
+ * either as measurements/attributes (v1) or as web vital attributes (span streaming).
+ *
+ * This should be called when the pageload span ends, after the web vitals have been finalized.
+ * It is a no-op for non-pageload spans, but always resets the collected web vital state so it
+ * doesn't leak into a subsequent navigation.
+ */
+export function addWebVitalsToSpan(span: Span, options: AddWebVitalsToSpanOptions): void {
+ const origin = browserPerformanceTimeOrigin();
+ if (!getBrowserPerformanceAPI()?.getEntries || !origin) {
+ // Gatekeeper if performance API not available
+ resetWebVitalState();
+ return;
+ }
+
+ const { spanStreamingEnabled, recordClsOnPageloadSpan, recordLcpOnPageloadSpan } = options;
+ const timeOrigin = msToSec(origin);
 
  // Measurements are only available for pageload transactions
- if (op === 'pageload') {
+ if (spanToJSON(span).op === 'pageload') {
  _addTtfbRequestTimeToMeasurements(_measurements);
 
  if (spanStreamingEnabled) {
@@ -458,7 +486,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
  }
 
  Object.entries(_measurements).forEach(([measurementName, measurement]) => {
- setMeasurement(measurementName, measurement.value, measurement.unit);
+ setMeasurement(measurementName, measurement.value, measurement.unit, span);
  });
 
  _setWebVitalAttributes(span, options);
@@ -479,6 +507,10 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
  );
  }
 
+ resetWebVitalState();
+}
+
+function resetWebVitalState(): void {
  _lcpEntry = undefined;
  _clsEntry = undefined;
  _measurements = {};
@@ -794,9 +826,12 @@ function _trackNavigator(span: Span, spanStreamingEnabled: boolean | undefined):
  }
 
  if (isMeasurementValue(connection.rtt)) {
- _measurements['connection.rtt'] = { value: connection.rtt, unit: 'millisecond' };
  if (spanStreamingEnabled) {
  span.setAttribute('network.connection.rtt', connection.rtt);
+ } else if (spanToJSON(span).op === 'pageload') {
+ // Measurements are only recorded on the pageload span, matching the historical
+ // behavior where `connection.rtt` was only flushed for pageload transactions.
+ setMeasurement('connection.rtt', connection.rtt, 'millisecond');
  }
  }
  }
@@ -819,7 +854,7 @@ function _trackNavigator(span: Span, spanStreamingEnabled: boolean | undefined):
 }
 
 /** Add LCP / CLS data to span to allow debugging */
-function _setWebVitalAttributes(span: Span, options: AddPerformanceEntriesOptions): void {
+function _setWebVitalAttributes(span: Span, options: AddWebVitalsToSpanOptions): void {
  // Only add LCP attributes if LCP is being recorded on the pageload span
  if (_lcpEntry && options.recordLcpOnPageloadSpan) {
  // Capture Properties of the LCP element that contributes to the LCP.

@@ -9,12 +9,14 @@ import {
  setCurrentClient,
  spanToJSON,
 } from '@sentry/core';
-import { afterAll, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import {
  _addMeasureSpans,
  _addNavigationSpans,
  _addResourceSpans,
  _setResourceRequestAttributes,
+ addWebVitalsToSpan,
+ startTrackingWebVitals,
 } from '../../src/metrics/browserMetrics';
 import { WINDOW } from '../../src/types';
 import { getDefaultClientOptions, TestClient } from '../utils/TestClient';
@@ -47,6 +49,102 @@ function mockPerformanceResourceTiming(
  return data as PerformanceResourceTiming & AdditionalPerformanceResourceTiming;
 }
 
+describe('addWebVitalsToSpan', () => {
+ beforeEach(() => {
+ vi.restoreAllMocks();
+ getCurrentScope().clear();
+ getIsolationScope().clear();
+
+ const client = new TestClient(
+ getDefaultClientOptions({
+ tracesSampleRate: 1,
+ }),
+ );
+ setCurrentClient(client);
+ client.init();
+ });
+
+ afterEach(() => {
+ vi.unstubAllGlobals();
+ vi.restoreAllMocks();
+ });
+
+ it('clears pending measurements when the performance API is unavailable', async () => {
+ let performanceObserverCallback: ((list: PerformanceObserverEntryList) => void) | undefined;
+ class MockPerformanceObserver {
+ public static supportedEntryTypes = ['paint'];
+
+ public constructor(callback: (list: PerformanceObserverEntryList) => void) {
+ performanceObserverCallback = callback;
+ }
+
+ public observe(): void {
+ // noop
+ }
+
+ public disconnect(): void {
+ // noop
+ }
+ }
+
+ vi.stubGlobal('PerformanceObserver', MockPerformanceObserver);
+ vi.stubGlobal('addEventListener', vi.fn());
+ vi.stubGlobal('removeEventListener', vi.fn());
+ vi.stubGlobal('document', {
+ prerendering: false,
+ readyState: 'complete',
+ visibilityState: 'visible',
+ });
+
+ const cleanupWebVitals = startTrackingWebVitals({
+ recordClsStandaloneSpans: undefined,
+ recordLcpStandaloneSpans: undefined,
+ client: getClient()!,
+ });
+
+ performanceObserverCallback?.({
+ getEntries: () => [
+ {
+ entryType: 'paint',
+ name: 'first-paint',
+ duration: 0,
+ startTime: 12,
+ toJSON: () => ({}),
+ },
+ {
+ entryType: 'paint',
+ name: 'first-contentful-paint',
+ duration: 0,
+ startTime: 18,
+ toJSON: () => ({}),
+ },
+ ],
+ } as PerformanceObserverEntryList);
+ await Promise.resolve();
+ cleanupWebVitals();
+
+ vi.stubGlobal('addEventListener', undefined);
+ const spanWithPendingMeasurements = new SentrySpan({ op: 'pageload', name: '/', sampled: true });
+ addWebVitalsToSpan(spanWithPendingMeasurements, {
+ recordClsOnPageloadSpan: true,
+ recordLcpOnPageloadSpan: true,
+ spanStreamingEnabled: true,
+ });
+
+ vi.stubGlobal('addEventListener', vi.fn());
+
+ const nextPageloadSpan = new SentrySpan({ op: 'pageload', name: '/', sampled: true });
+ addWebVitalsToSpan(nextPageloadSpan, {
+ recordClsOnPageloadSpan: true,
+ recordLcpOnPageloadSpan: true,
+ spanStreamingEnabled: true,
+ });
+
+ expect(spanToJSON(nextPageloadSpan).data['browser.web_vital.fp.value']).toBeUndefined();
+ expect(spanToJSON(nextPageloadSpan).data['browser.web_vital.fcp.value']).toBeUndefined();
+ });
+});
+
 describe('_addMeasureSpans', () => {
  const span = new SentrySpan({ op: 'pageload', name: '/', sampled: true });
 

@@ -32,6 +32,7 @@ export { setActiveSpanInBrowser } from './tracing/setActiveSpan';
 
 export { spanStreamingIntegration } from './integrations/spanstreaming';
 export { fetchStreamPerformanceIntegration } from './integrations/fetchStreamPerformance';
+export { webVitalsIntegration } from './integrations/webVitals';
 
 export {
  feedbackIntegrationShim as feedbackAsyncIntegration,

@@ -32,6 +32,7 @@ export { setActiveSpanInBrowser } from './tracing/setActiveSpan';
 
 export { spanStreamingIntegration } from './integrations/spanstreaming';
 export { fetchStreamPerformanceIntegration } from './integrations/fetchStreamPerformance';
+export { webVitalsIntegration } from './integrations/webVitals';
 
 export { getFeedback, sendFeedback } from '@sentry-internal/feedback';