diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html index 502f4dde80c2..bf7617ea8709 100644 --- a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html +++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html @@ -6,6 +6,5 @@
- diff --git a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts index 50a309d22272..84e93b54ac9b 100644 --- a/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts +++ b/dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts @@ -5,7 +5,14 @@ import type { Event } from '@sentry/types'; import { sentryTest } from '../../../../utils/fixtures'; import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers'; -sentryTest('should capture a LCP vital with element details.', async ({ browserName, getLocalTestUrl, page }) => { +/* + Because we "serve" the html test page as a static file, all requests for the image + are considered 3rd party requests. So the LCP value we obtain for the image is also + considered a 3rd party LCP value, meaning `renderTime` is only set if we also + return the `Timing-Allow-Origin` header. +*/ + +sentryTest('captures LCP vitals with element details.', async ({ browserName, getLocalTestUrl, page }) => { if (shouldSkipTracingTest() || browserName !== 'chromium') { sentryTest.skip(); } @@ -16,17 +23,50 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN }); const url = await getLocalTestUrl({ testDir: __dirname }); - const [eventData] = await Promise.all([ - getFirstSentryEnvelopeRequest(page), - page.goto(url), - page.locator('button').click(), - ]); + const [eventData] = await Promise.all([getFirstSentryEnvelopeRequest(page), page.goto(url)]); expect(eventData.measurements).toBeDefined(); expect(eventData.measurements?.lcp?.value).toBeDefined(); - // XXX: This should be body > img, but it can be flakey as sometimes it will report - // the button as LCP. expect(eventData.contexts?.trace?.data?.['lcp.element'].startsWith('body >')).toBe(true); expect(eventData.contexts?.trace?.data?.['lcp.size']).toBeGreaterThan(0); + expect(eventData.contexts?.trace?.data?.['lcp.loadTime']).toBeGreaterThan(0); + + // renderTime is 0 because we don't return the `Timing-Allow-Origin` header + // and the image is loaded from a 3rd party origin + expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBe(0); + + // The LCP value should be the loadTime because the renderTime is not set + expect(eventData.measurements?.lcp?.value).toBeCloseTo(eventData.contexts?.trace?.data?.['lcp.loadTime']); }); + +sentryTest( + 'captures LCP renderTime when returning Timing-Allow-Origin header.', + async ({ browserName, getLocalTestUrl, page }) => { + if (shouldSkipTracingTest() || browserName !== 'chromium') { + sentryTest.skip(); + } + + page.route('**', route => route.continue()); + page.route('**/my/image.png', async (route: Route) => { + return route.fulfill({ + path: `${__dirname}/assets/sentry-logo-600x179.png`, + headers: { 'Timing-Allow-Origin': '*' }, + }); + }); + + const url = await getLocalTestUrl({ testDir: __dirname }); + const [eventData] = await Promise.all([getFirstSentryEnvelopeRequest(page), page.goto(url)]); + + expect(eventData.measurements).toBeDefined(); + expect(eventData.measurements?.lcp?.value).toBeDefined(); + + expect(eventData.contexts?.trace?.data?.['lcp.element'].startsWith('body >')).toBe(true); + expect(eventData.contexts?.trace?.data?.['lcp.size']).toBeGreaterThan(0); + expect(eventData.contexts?.trace?.data?.['lcp.loadTime']).toBeGreaterThan(0); + expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBeGreaterThan(0); + + // The LCP value should be the renderTime because the renderTime is set + expect(eventData.measurements?.lcp?.value).toBeCloseTo(eventData.contexts?.trace?.data?.['lcp.renderTime']); + }, +); diff --git a/dev-packages/e2e-tests/test-applications/react-create-hash-router/tests/transactions.test.ts b/dev-packages/e2e-tests/test-applications/react-create-hash-router/tests/transactions.test.ts index cc5edc1fd878..7fd15646dff2 100644 --- a/dev-packages/e2e-tests/test-applications/react-create-hash-router/tests/transactions.test.ts +++ b/dev-packages/e2e-tests/test-applications/react-create-hash-router/tests/transactions.test.ts @@ -24,6 +24,8 @@ test('Captures a pageload transaction', async ({ page }) => { 'sentry.source': 'route', 'performance.timeOrigin': expect.any(Number), 'performance.activationStart': expect.any(Number), + 'lcp.renderTime': expect.any(Number), + 'lcp.loadTime': expect.any(Number), }, op: 'pageload', span_id: expect.any(String), diff --git a/packages/browser-utils/src/metrics/browserMetrics.ts b/packages/browser-utils/src/metrics/browserMetrics.ts index 9d7faeb4e9c4..d64bba34509a 100644 --- a/packages/browser-utils/src/metrics/browserMetrics.ts +++ b/packages/browser-utils/src/metrics/browserMetrics.ts @@ -635,6 +635,18 @@ function _setWebVitalAttributes(span: Span): void { span.setAttribute('lcp.url', _lcpEntry.url.trim().slice(0, 200)); } + if (_lcpEntry.loadTime != null) { + // loadTime is the time of LCP that's related to receiving the LCP element response.. + span.setAttribute('lcp.loadTime', _lcpEntry.loadTime); + } + + if (_lcpEntry.renderTime != null) { + // renderTime is loadTime + rendering time + // it's 0 if the LCP element is loaded from a 3rd party origin that doesn't send the + // `Timing-Allow-Origin` header. + span.setAttribute('lcp.renderTime', _lcpEntry.renderTime); + } + span.setAttribute('lcp.size', _lcpEntry.size); }