+
+
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
new file mode 100644
index 000000000000..1f71cb8d76a7
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp-streamed-spans/test.ts
@@ -0,0 +1,65 @@
+import type { Route } 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 });
+});
+
+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) => {
+ return route.fulfill({
+ path: `${__dirname}/assets/sentry-logo-600x179.png`,
+ });
+ });
+
+ 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);
+
+ // Wait for LCP to be captured
+ await page.waitForTimeout(1000);
+
+ 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' });
+ expect(lcpSpan.attributes?.['sentry.exclusive_time']).toEqual({ type: 'integer', value: 0 });
+ expect(lcpSpan.attributes?.['user_agent.original']?.value).toEqual(expect.stringContaining('Chrome'));
+
+ // Check browser.web_vital.lcp.* attributes
+ expect(lcpSpan.attributes?.['browser.web_vital.lcp.element']?.value).toEqual(expect.stringContaining('body > img'));
+ expect(lcpSpan.attributes?.['browser.web_vital.lcp.url']?.value).toBe(
+ 'https://sentry-test-site.example/my/image.png',
+ );
+ 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).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).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/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/init.js b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/init.js
new file mode 100644
index 000000000000..d8da96d88a64
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/init.js
@@ -0,0 +1,12 @@
+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,
+ debug: true,
+});
diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/test.ts
new file mode 100644
index 000000000000..73f37f07a291
--- /dev/null
+++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-ttfb-streamed/test.ts
@@ -0,0 +1,36 @@
+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 ({ page }) => {
+ if (shouldSkipTracingTest() || testingCdnBundle()) {
+ sentryTest.skip();
+ }
+
+ await page.setViewportSize({ width: 800, height: 1200 });
+});
+
+sentryTest(
+ 'captures TTFB and TTFB request time as attributes on the streamed pageload span',
+ async ({ getLocalTestUrl, page }) => {
+ const url = await getLocalTestUrl({ testDir: __dirname });
+
+ const pageloadSpanPromise = waitForStreamedSpan(page, span => getSpanOp(span) === 'pageload');
+
+ await page.goto(url);
+ await hidePage(page);
+
+ const pageloadSpan = await pageloadSpanPromise;
+
+ // If responseStart === 0, TTFB is not reported.
+ // This seems to happen somewhat randomly, so we handle it.
+ const responseStart = await page.evaluate("performance.getEntriesByType('navigation')[0].responseStart;");
+ if (responseStart !== 0) {
+ expect(pageloadSpan.attributes?.['browser.web_vital.ttfb.value']?.type).toMatch(/^(double)|(integer)$/);
+ expect(pageloadSpan.attributes?.['browser.web_vital.ttfb.value']?.value).toBeGreaterThan(0);
+ }
+
+ expect(pageloadSpan.attributes?.['browser.web_vital.ttfb.request_time']?.type).toMatch(/^(double)|(integer)$/);
+ },
+);
diff --git a/packages/browser-utils/src/index.ts b/packages/browser-utils/src/index.ts
index 2b2d4b7f9397..888524ed7c21 100644
--- a/packages/browser-utils/src/index.ts
+++ b/packages/browser-utils/src/index.ts
@@ -20,6 +20,8 @@ export { elementTimingIntegration, startTrackingElementTiming } from './metrics/
export { extractNetworkProtocol } from './metrics/utils';
+export { trackClsAsSpan, trackInpAsSpan, trackLcpAsSpan } from './metrics/webVitalSpans';
+
export { addClickKeypressInstrumentationHandler } from './instrument/dom';
export { addHistoryInstrumentationHandler } from './instrument/history';
diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts
index 28d1f2bfaec8..9a00ab322e16 100644
--- a/packages/browser-utils/src/metrics/browserMetrics.ts
+++ b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -2,6 +2,7 @@
import type { Client, Measurements, Span, SpanAttributes, SpanAttributeValue, StartSpanOptions } from '@sentry/core';
import {
browserPerformanceTimeOrigin,
+ debug,
getActiveSpan,
getComponentName,
htmlTreeAsString,
@@ -27,7 +28,7 @@ import { getBrowserPerformanceAPI, isMeasurementValue, msToSec, startAndEndSpan
import { getActivationStart } from './web-vitals/lib/getActivationStart';
import { getNavigationEntry } from './web-vitals/lib/getNavigationEntry';
import { getVisibilityWatcher } from './web-vitals/lib/getVisibilityWatcher';
-
+import { DEBUG_BUILD } from '../debug-build';
interface NavigatorNetworkInformation {
readonly connection?: NetworkInformation;
}
@@ -75,8 +76,18 @@ let _lcpEntry: LargestContentfulPaint | undefined;
let _clsEntry: LayoutShift | undefined;
interface StartTrackingWebVitalsOptions {
- recordClsStandaloneSpans: boolean;
- recordLcpStandaloneSpans: boolean;
+ /**
+ * When `true`, CLS is tracked as a standalone span. When `false`, CLS is
+ * recorded as a measurement on the pageload span. When `undefined`, CLS
+ * tracking is skipped entirely (e.g. because span streaming handles it).
+ */
+ recordClsStandaloneSpans: boolean | undefined;
+ /**
+ * When `true`, LCP is tracked as a standalone span. When `false`, LCP is
+ * recorded as a measurement on the pageload span. When `undefined`, LCP
+ * tracking is skipped entirely (e.g. because span streaming handles it).
+ */
+ recordLcpStandaloneSpans: boolean | undefined;
client: Client;
}
@@ -84,6 +95,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({
@@ -97,13 +109,24 @@ export function startTrackingWebVitals({
if (performance.mark) {
WINDOW.performance.mark('sentry-tracing-init');
}
- const lcpCleanupCallback = recordLcpStandaloneSpans ? trackLcpAsStandaloneSpan(client) : _trackLCP();
+
+ const lcpCleanupCallback = recordLcpStandaloneSpans
+ ? trackLcpAsStandaloneSpan(client)
+ : recordLcpStandaloneSpans === false
+ ? _trackLCP()
+ : undefined;
+
+ const clsCleanupCallback = recordClsStandaloneSpans
+ ? trackClsAsStandaloneSpan(client)
+ : recordClsStandaloneSpans === false
+ ? _trackCLS()
+ : undefined;
+
const ttfbCleanupCallback = _trackTtfb();
- const clsCleanupCallback = recordClsStandaloneSpans ? trackClsAsStandaloneSpan(client) : _trackCLS();
return (): void => {
- lcpCleanupCallback?.();
ttfbCleanupCallback();
+ lcpCleanupCallback?.();
clsCleanupCallback?.();
};
}
@@ -314,6 +337,11 @@ interface AddPerformanceEntriesOptions {
* Default: []
*/
ignorePerformanceApiSpans: Array') // for the name
+ .mockReturnValueOnce('
') // for source 1
+ .mockReturnValueOnce(''); // for source 2
+
+ const mockPageloadSpan = createMockPageloadSpan('pageload-789');
+
+ _sendClsSpan(0.1, mockEntry, mockPageloadSpan as any, 'navigation');
+
+ expect(SentryCore.startInactiveSpan).toHaveBeenCalledWith(
+ expect.objectContaining({
+ name: '
',
+ attributes: expect.objectContaining({
+ 'sentry.origin': 'auto.http.browser.cls',
+ 'sentry.op': 'ui.webvital.cls',
+ 'sentry.pageload.span_id': 'pageload-789',
+ 'browser.web_vital.cls.source.1': '
',
+ 'browser.web_vital.cls.source.2': '',
+ 'browser.web_vital.cls.report_event': 'navigation',
+ 'sentry.transaction': 'test-route',
+ }),
+ parentSpan: mockPageloadSpan,
+ }),
+ );
+ });
+
+ it('sends a streamed CLS span without entry data', () => {
+ _sendClsSpan(0, undefined);
+
+ expect(SentryCore.timestampInSeconds).toHaveBeenCalled();
+ expect(SentryCore.startInactiveSpan).toHaveBeenCalledWith(
+ expect.objectContaining({
+ name: 'Layout shift',
+ startTime: 1.5,
+ }),
+ );
+ });
+});
+
+describe('_sendInpSpan', () => {
+ const mockSpan = {
+ end: vi.fn(),
+ };
+
+ const mockScope = {
+ getScopeData: vi.fn().mockReturnValue({
+ transactionName: 'test-route',
+ }),
+ };
+
+ beforeEach(() => {
+ vi.mocked(SentryCore.getCurrentScope).mockReturnValue(mockScope as any);
+ vi.mocked(SentryCore.browserPerformanceTimeOrigin).mockReturnValue(1000);
+ vi.mocked(SentryCore.htmlTreeAsString).mockReturnValue('