+
+
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/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..39aeeb0aa460 100644
--- a/packages/browser-utils/src/metrics/browserMetrics.ts
+++ b/packages/browser-utils/src/metrics/browserMetrics.ts
@@ -75,8 +75,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 +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({
@@ -97,13 +108,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?.();
};
}
diff --git a/packages/browser-utils/src/metrics/inp.ts b/packages/browser-utils/src/metrics/inp.ts
index 831565f07408..3eb0b2920a75 100644
--- a/packages/browser-utils/src/metrics/inp.ts
+++ b/packages/browser-utils/src/metrics/inp.ts
@@ -37,7 +37,7 @@ const ELEMENT_NAME_TIMESTAMP_MAP = new Map') // for the name
+ .mockReturnValueOnce('
') // for source 1
+ .mockReturnValueOnce(''); // for source 2
+
+ _sendClsSpan(0.1, mockEntry, 'pageload-789', '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',
+ }),
+ }),
+ );
+
+ expect(mockSpan.addEvent).toHaveBeenCalledWith('cls', {
+ 'sentry.measurement_unit': '',
+ 'sentry.measurement_value': 0.1,
+ });
+ });
+
+ it('sends a streamedCLS span without entry data', () => {
+ _sendClsSpan(0, undefined, 'pageload-000');
+
+ expect(SentryCore.timestampInSeconds).toHaveBeenCalled();
+ expect(SentryCore.startInactiveSpan).toHaveBeenCalledWith(
+ expect.objectContaining({
+ name: 'Layout shift',
+ startTime: 1.5,
+ }),
+ );
+ });
+});
+
+describe('_sendInpSpan', () => {
+ const mockSpan = {
+ addEvent: vi.fn(),
+ 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('