From a83dcfd527fa37d91b9166d543f73830abbbcae0 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Fri, 19 Jul 2024 19:47:57 -0400 Subject: [PATCH 1/6] update cls and add ttfb --- .../utils/replayEventTemplates.ts | 13 ++++++ .../src/coreHandlers/performanceObserver.ts | 3 ++ .../replay-internal/src/types/performance.ts | 2 +- .../replay-internal/src/types/replayFrame.ts | 2 +- .../src/util/createPerformanceEntries.ts | 43 ++++++++++++++----- .../unit/util/createPerformanceEntry.test.ts | 21 +++++++++ 6 files changed, 72 insertions(+), 12 deletions(-) diff --git a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts index 257c47fbfa9b..070590da9e8f 100644 --- a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts +++ b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts @@ -171,6 +171,19 @@ export const expectedINPPerformanceSpan = { }, }; +export const expectedTTFB = { + op: 'web-vital', + description: 'time-to-first-byte', + startTimestamp: expect.any(Number), + endTimestamp: expect.any(Number), + data: { + value: expect.any(Number), + rating: expect.any(String), + size: expect.any(Number), + nodeId: expect.any(Number), + }, +}; + export const expectedFCPPerformanceSpan = { op: 'paint', description: 'first-contentful-paint', diff --git a/packages/replay-internal/src/coreHandlers/performanceObserver.ts b/packages/replay-internal/src/coreHandlers/performanceObserver.ts index 638ef53b05fb..ea6ac6eed869 100644 --- a/packages/replay-internal/src/coreHandlers/performanceObserver.ts +++ b/packages/replay-internal/src/coreHandlers/performanceObserver.ts @@ -4,6 +4,7 @@ import { addInpInstrumentationHandler, addLcpInstrumentationHandler, addPerformanceInstrumentationHandler, + addTtfbInstrumentationHandler, } from '@sentry-internal/browser-utils'; import type { ReplayContainer } from '../types'; import { @@ -11,6 +12,7 @@ import { getFirstInputDelay, getInteractionToNextPaint, getLargestContentfulPaint, + getTimeToFirstByte, webVitalHandler, } from '../util/createPerformanceEntries'; @@ -41,6 +43,7 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void { addClsInstrumentationHandler(webVitalHandler(getCumulativeLayoutShift, replay)), addFidInstrumentationHandler(webVitalHandler(getFirstInputDelay, replay)), addInpInstrumentationHandler(webVitalHandler(getInteractionToNextPaint, replay)), + addTtfbInstrumentationHandler(webVitalHandler(getTimeToFirstByte, replay)), ); // A callback to cleanup all handlers diff --git a/packages/replay-internal/src/types/performance.ts b/packages/replay-internal/src/types/performance.ts index 5241c12d847a..a3a73cc0289e 100644 --- a/packages/replay-internal/src/types/performance.ts +++ b/packages/replay-internal/src/types/performance.ts @@ -110,7 +110,7 @@ export interface WebVitalData { /** * The recording id of the LCP node. -1 if not found */ - nodeId?: number; + nodeId?: number | number[]; } /** diff --git a/packages/replay-internal/src/types/replayFrame.ts b/packages/replay-internal/src/types/replayFrame.ts index 0fa43ff41eb2..d2070d193f16 100644 --- a/packages/replay-internal/src/types/replayFrame.ts +++ b/packages/replay-internal/src/types/replayFrame.ts @@ -173,7 +173,7 @@ interface ReplayHistoryFrame extends ReplayBaseSpanFrame { interface ReplayWebVitalFrame extends ReplayBaseSpanFrame { data: WebVitalData; - op: 'largest-contentful-paint' | 'cumulative-layout-shift' | 'first-input-delay' | 'interaction-to-next-paint'; + op: 'largest-contentful-paint' | 'cumulative-layout-shift' | 'first-input-delay' | 'interaction-to-next-paint' | 'time-to-first-byte'; } interface ReplayMemoryFrame extends ReplayBaseSpanFrame { diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 28ccf60280e8..695b4fc4e618 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -191,14 +191,17 @@ export function getLargestContentfulPaint(metric: Metric): ReplayPerformanceEntr * Add a CLS event to the replay based on a CLS metric. */ export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry { - // get first node that shifts - const firstEntry = metric.entries[0] as (PerformanceEntry & { sources?: LayoutShiftAttribution[] }) | undefined; - const node = firstEntry - ? firstEntry.sources && firstEntry.sources[0] - ? firstEntry.sources[0].node - : undefined - : undefined; - return getWebVital(metric, 'cumulative-layout-shift', node); + const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { sources?: LayoutShiftAttribution[] }) | undefined; + const nodes: Node[] = []; + if (lastEntry && lastEntry.sources) { + for (const source of lastEntry.sources) { + if (source.node) { + nodes.push(source.node) + } + + } + } + return getWebVital(metric, 'cumulative-layout-shift', nodes); } /** @@ -219,19 +222,39 @@ export function getInteractionToNextPaint(metric: Metric): ReplayPerformanceEntr return getWebVital(metric, 'interaction-to-next-paint', node); } +/** + * Add a TTFB event to the replay based on an INP metric. + */ +export function getTimeToFirstByte(metric: Metric): ReplayPerformanceEntry { + const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { target?: Node }) | undefined; + const node = lastEntry ? lastEntry.target : undefined; + return getWebVital(metric, 'time-to-first-byte', node); +} + /** * Add an web vital event to the replay based on the web vital metric. */ export function getWebVital( metric: Metric, name: string, - node: Node | undefined, + node: Node | Node[] | undefined, ): ReplayPerformanceEntry { const value = metric.value; const rating = metric.rating; const end = getAbsoluteTime(value); + const nodeIds: number[] = []; + if (Array.isArray(node)) { + for (const n of node) { + nodeIds.push(record.mirror.getId(n)); + } + } else { + if (node) { + nodeIds.push(record.mirror.getId(node)) + } + } + const data: ReplayPerformanceEntry = { type: 'web-vital', name, @@ -241,7 +264,7 @@ export function getWebVital( value, size: value, rating, - nodeId: node ? record.mirror.getId(node) : undefined, + nodeId: nodeIds ? nodeIds : undefined, }, }; diff --git a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts index f13d72feecf4..e2d44ed687f6 100644 --- a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts +++ b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts @@ -17,6 +17,7 @@ import { getFirstInputDelay, getInteractionToNextPaint, getLargestContentfulPaint, + getTimeToFirstByte, } from '../../../src/util/createPerformanceEntries'; import { PerformanceEntryNavigation } from '../../fixtures/performanceEntry/navigation'; @@ -147,4 +148,24 @@ describe('Unit | util | createPerformanceEntries', () => { }); }); }); + + describe('getTimeToFirstByte', () => { + it('works with an TTFB metric', async () => { + const metric = { + value: 5108.299, + rating: 'good' as const, + entries: [], + }; + + const event = getTimeToFirstByte(metric); + + expect(event).toEqual({ + type: 'web-vital', + name: 'time-to-first-byte', + start: 1672531205.108299, + end: 1672531205.108299, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: undefined }, + }); + }); + }); }); From 77a12ac9937e82a8a0c05b87eccf41c24a21cb35 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jul 2024 12:15:11 -0400 Subject: [PATCH 2/6] add tests --- .../suites/replay/customEvents/test.ts | 2 ++ .../suites/replay/multiple-pages/test.ts | 5 ++++ .../utils/replayEventTemplates.ts | 11 +++++---- .../tests/fixtures/ReplayRecordingData.ts | 24 +++++++++++++++++-- .../unit/util/createPerformanceEntry.test.ts | 10 ++++---- 5 files changed, 40 insertions(+), 12 deletions(-) diff --git a/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts b/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts index 053c31c3881e..a77539643738 100644 --- a/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts @@ -8,6 +8,7 @@ import { expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedLCPPerformanceSpan, + expectedTTFBPerformanceSpan, expectedMemoryPerformanceSpan, expectedNavigationPerformanceSpan, getExpectedReplayEvent, @@ -65,6 +66,7 @@ sentryTest( expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, + expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, diff --git a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index 7bacf5a8ae17..bbcf7e4400dd 100644 --- a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -8,6 +8,7 @@ import { expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedLCPPerformanceSpan, + expectedTTFBPerformanceSpan, expectedMemoryPerformanceSpan, expectedNavigationBreadcrumb, expectedNavigationPerformanceSpan, @@ -86,6 +87,7 @@ sentryTest( expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, + expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, @@ -126,6 +128,7 @@ sentryTest( expectedReloadPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, + expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, @@ -195,6 +198,7 @@ sentryTest( expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, + expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, @@ -318,6 +322,7 @@ sentryTest( expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, + expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, diff --git a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts index 070590da9e8f..c15eb57be429 100644 --- a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts +++ b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts @@ -127,7 +127,7 @@ export const expectedLCPPerformanceSpan = { endTimestamp: expect.any(Number), data: { value: expect.any(Number), - nodeId: expect.any(Number), + nodeId: expect.any(Array), rating: expect.any(String), size: expect.any(Number), }, @@ -142,6 +142,7 @@ export const expectedCLSPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), + nodeId: expect.any(Array), }, }; @@ -154,7 +155,7 @@ export const expectedFIDPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Number), + nodeId: expect.any(Array), }, }; @@ -167,11 +168,11 @@ export const expectedINPPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Number), + nodeId: expect.any(Array), }, }; -export const expectedTTFB = { +export const expectedTTFBPerformanceSpan = { op: 'web-vital', description: 'time-to-first-byte', startTimestamp: expect.any(Number), @@ -180,7 +181,7 @@ export const expectedTTFB = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Number), + nodeId: expect.any(Array), }, }; diff --git a/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts b/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts index 156c2775f5ff..37a3de460259 100644 --- a/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts +++ b/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts @@ -220,7 +220,26 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: 16, + nodeId: [16], + }, + }, + }, + }, + { + type: 5, + timestamp: expect.any(Number), + data: { + tag: 'performanceSpan', + payload: { + op: 'web-vital', + description: 'time-to-first-byte', + startTimestamp: expect.any(Number), + endTimestamp: expect.any(Number), + data: { + value: expect.any(Number), + size: expect.any(Number), + rating: expect.any(String), + nodeId: [], }, }, }, @@ -239,6 +258,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), + nodeId: [], }, }, }, @@ -257,7 +277,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: 10, + nodeId: [10], }, }, }, diff --git a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts index e2d44ed687f6..f63bae23d1b2 100644 --- a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts +++ b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts @@ -84,7 +84,7 @@ describe('Unit | util | createPerformanceEntries', () => { name: 'largest-contentful-paint', start: 1672531205.108299, end: 1672531205.108299, - data: { value: 5108.299, rating: 'good', size: 5108.299, nodeId: undefined }, + data: { value: 5108.299, rating: 'good', size: 5108.299, nodeId: [] }, }); }); }); @@ -104,7 +104,7 @@ describe('Unit | util | createPerformanceEntries', () => { name: 'cumulative-layout-shift', start: 1672531205.108299, end: 1672531205.108299, - data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: undefined }, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: [] }, }); }); }); @@ -124,7 +124,7 @@ describe('Unit | util | createPerformanceEntries', () => { name: 'first-input-delay', start: 1672531205.108299, end: 1672531205.108299, - data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: undefined }, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: [] }, }); }); }); @@ -144,7 +144,7 @@ describe('Unit | util | createPerformanceEntries', () => { name: 'interaction-to-next-paint', start: 1672531205.108299, end: 1672531205.108299, - data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: undefined }, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: [] }, }); }); }); @@ -164,7 +164,7 @@ describe('Unit | util | createPerformanceEntries', () => { name: 'time-to-first-byte', start: 1672531205.108299, end: 1672531205.108299, - data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: undefined }, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: [] }, }); }); }); From 477f926db38a2f3f2ebe04f8e438b714397f1bac Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jul 2024 14:59:56 -0400 Subject: [PATCH 3/6] fix test + lint --- packages/replay-internal/src/types/replayFrame.ts | 7 ++++++- .../replay-internal/src/util/createPerformanceEntries.ts | 8 +++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/replay-internal/src/types/replayFrame.ts b/packages/replay-internal/src/types/replayFrame.ts index d2070d193f16..07e6392d1fd0 100644 --- a/packages/replay-internal/src/types/replayFrame.ts +++ b/packages/replay-internal/src/types/replayFrame.ts @@ -173,7 +173,12 @@ interface ReplayHistoryFrame extends ReplayBaseSpanFrame { interface ReplayWebVitalFrame extends ReplayBaseSpanFrame { data: WebVitalData; - op: 'largest-contentful-paint' | 'cumulative-layout-shift' | 'first-input-delay' | 'interaction-to-next-paint' | 'time-to-first-byte'; + op: + | 'largest-contentful-paint' + | 'cumulative-layout-shift' + | 'first-input-delay' + | 'interaction-to-next-paint' + | 'time-to-first-byte'; } interface ReplayMemoryFrame extends ReplayBaseSpanFrame { diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 695b4fc4e618..be30459ad867 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -191,12 +191,14 @@ export function getLargestContentfulPaint(metric: Metric): ReplayPerformanceEntr * Add a CLS event to the replay based on a CLS metric. */ export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry { - const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { sources?: LayoutShiftAttribution[] }) | undefined; + const lastEntry = metric.entries[metric.entries.length - 1] as + | (PerformanceEntry & { sources?: LayoutShiftAttribution[] }) + | undefined; const nodes: Node[] = []; if (lastEntry && lastEntry.sources) { for (const source of lastEntry.sources) { if (source.node) { - nodes.push(source.node) + nodes.push(source.node); } } @@ -251,7 +253,7 @@ export function getWebVital( } } else { if (node) { - nodeIds.push(record.mirror.getId(node)) + nodeIds.push(record.mirror.getId(node)); } } From 65b84febc22b7f2cd0d2068c5df26d80edb814f7 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jul 2024 15:44:51 -0400 Subject: [PATCH 4/6] commit all test fixes and lint --- .../suites/replay/customEvents/test.ts | 2 +- .../suites/replay/multiple-pages/test.ts | 8 ++++---- .../tests/fixtures/ReplayRecordingData.ts | 8 ++++---- .../replay-internal/src/util/createPerformanceEntries.ts | 1 - 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts b/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts index a77539643738..86eba72c956d 100644 --- a/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts @@ -8,9 +8,9 @@ import { expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedLCPPerformanceSpan, - expectedTTFBPerformanceSpan, expectedMemoryPerformanceSpan, expectedNavigationPerformanceSpan, + expectedTTFBPerformanceSpan, getExpectedReplayEvent, } from '../../../utils/replayEventTemplates'; import type { PerformanceSpan } from '../../../utils/replayHelpers'; diff --git a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index bbcf7e4400dd..dc99f7de57f7 100644 --- a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -8,12 +8,12 @@ import { expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedLCPPerformanceSpan, - expectedTTFBPerformanceSpan, expectedMemoryPerformanceSpan, expectedNavigationBreadcrumb, expectedNavigationPerformanceSpan, expectedNavigationPushPerformanceSpan, expectedReloadPerformanceSpan, + expectedTTFBPerformanceSpan, getExpectedReplayEvent, } from '../../../utils/replayEventTemplates'; import { @@ -81,7 +81,7 @@ sentryTest( const collectedPerformanceSpans = [...recording0.performanceSpans, ...recording1.performanceSpans]; const collectedBreadcrumbs = [...recording0.breadcrumbs, ...recording1.breadcrumbs]; - expect(collectedPerformanceSpans.length).toEqual(8); + expect(collectedPerformanceSpans.length).toEqual(9); expect(collectedPerformanceSpans).toEqual( expect.arrayContaining([ expectedNavigationPerformanceSpan, @@ -122,7 +122,7 @@ sentryTest( const collectedPerformanceSpansAfterReload = [...recording2.performanceSpans, ...recording3.performanceSpans]; const collectedBreadcrumbsAdterReload = [...recording2.breadcrumbs, ...recording3.breadcrumbs]; - expect(collectedPerformanceSpansAfterReload.length).toEqual(8); + expect(collectedPerformanceSpansAfterReload.length).toEqual(9); expect(collectedPerformanceSpansAfterReload).toEqual( expect.arrayContaining([ expectedReloadPerformanceSpan, @@ -316,7 +316,7 @@ sentryTest( ]; const collectedBreadcrumbsAfterIndexNavigation = [...recording8.breadcrumbs, ...recording9.breadcrumbs]; - expect(collectedPerformanceSpansAfterIndexNavigation.length).toEqual(8); + expect(collectedPerformanceSpansAfterIndexNavigation.length).toEqual(9); expect(collectedPerformanceSpansAfterIndexNavigation).toEqual( expect.arrayContaining([ expectedNavigationPerformanceSpan, diff --git a/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts b/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts index 37a3de460259..9f3a4427310c 100644 --- a/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts +++ b/dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts @@ -213,14 +213,14 @@ export const ReplayRecordingData = [ tag: 'performanceSpan', payload: { op: 'web-vital', - description: 'largest-contentful-paint', + description: 'time-to-first-byte', startTimestamp: expect.any(Number), endTimestamp: expect.any(Number), data: { value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: [16], + nodeId: [], }, }, }, @@ -232,14 +232,14 @@ export const ReplayRecordingData = [ tag: 'performanceSpan', payload: { op: 'web-vital', - description: 'time-to-first-byte', + description: 'largest-contentful-paint', startTimestamp: expect.any(Number), endTimestamp: expect.any(Number), data: { value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: [], + nodeId: [16], }, }, }, diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index be30459ad867..dfcc3ec08c6f 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -200,7 +200,6 @@ export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry if (source.node) { nodes.push(source.node); } - } } return getWebVital(metric, 'cumulative-layout-shift', nodes); From 1bc7b092d02c8ca2d502a400cdc31d2091c96b44 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jul 2024 16:39:04 -0400 Subject: [PATCH 5/6] fix tests again --- .size-limit.js | 2 +- .../suites/replay/customEvents/test.ts | 2 -- .../suites/replay/multiple-pages/test.ts | 3 +-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 2e7899cb934a..5a2ff44cc32d 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -48,7 +48,7 @@ module.exports = [ path: 'packages/browser/build/npm/esm/index.js', import: createImport('init', 'browserTracingIntegration', 'replayIntegration', 'replayCanvasIntegration'), gzip: true, - limit: '76 KB', + limit: '77 KB', }, { name: '@sentry/browser (incl. Tracing, Replay, Feedback)', diff --git a/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts b/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts index 86eba72c956d..053c31c3881e 100644 --- a/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts @@ -10,7 +10,6 @@ import { expectedLCPPerformanceSpan, expectedMemoryPerformanceSpan, expectedNavigationPerformanceSpan, - expectedTTFBPerformanceSpan, getExpectedReplayEvent, } from '../../../utils/replayEventTemplates'; import type { PerformanceSpan } from '../../../utils/replayHelpers'; @@ -66,7 +65,6 @@ sentryTest( expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, - expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, diff --git a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index dc99f7de57f7..677490860f63 100644 --- a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -81,13 +81,12 @@ sentryTest( const collectedPerformanceSpans = [...recording0.performanceSpans, ...recording1.performanceSpans]; const collectedBreadcrumbs = [...recording0.breadcrumbs, ...recording1.breadcrumbs]; - expect(collectedPerformanceSpans.length).toEqual(9); + expect(collectedPerformanceSpans.length).toEqual(8); expect(collectedPerformanceSpans).toEqual( expect.arrayContaining([ expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, - expectedTTFBPerformanceSpan, expectedFIDPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, From 0053ab597eea6f790c1f232dc3737e48ea76f18e Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 22 Jul 2024 16:48:49 -0400 Subject: [PATCH 6/6] add ttfb back to test --- .../suites/replay/multiple-pages/test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index 677490860f63..2e4b0bdf61bd 100644 --- a/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -81,13 +81,14 @@ sentryTest( const collectedPerformanceSpans = [...recording0.performanceSpans, ...recording1.performanceSpans]; const collectedBreadcrumbs = [...recording0.breadcrumbs, ...recording1.breadcrumbs]; - expect(collectedPerformanceSpans.length).toEqual(8); + expect(collectedPerformanceSpans.length).toEqual(9); expect(collectedPerformanceSpans).toEqual( expect.arrayContaining([ expectedNavigationPerformanceSpan, expectedLCPPerformanceSpan, expectedCLSPerformanceSpan, expectedFIDPerformanceSpan, + expectedTTFBPerformanceSpan, expectedFPPerformanceSpan, expectedFCPPerformanceSpan, expectedMemoryPerformanceSpan, // two memory spans - once per flush