From 7a64638d254c4ff1baba0ff3f3cabf6972d4ace7 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Thu, 25 Jul 2024 16:54:33 -0400 Subject: [PATCH 01/11] updated CLS web vital --- .../replay-internal/src/types/performance.ts | 2 +- .../src/util/createPerformanceEntries.ts | 35 +++++++++++++------ 2 files changed, 26 insertions(+), 11 deletions(-) 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/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 28ccf60280e8..d481816e8a6b 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -191,14 +191,18 @@ 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); } /** @@ -225,13 +229,24 @@ export function getInteractionToNextPaint(metric: Metric): ReplayPerformanceEntr 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 +256,7 @@ export function getWebVital( value, size: value, rating, - nodeId: node ? record.mirror.getId(node) : undefined, + nodeId: node ? nodeIds : undefined, }, }; From c501a3c67c81284eb997a4e3cf162c670aabce08 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Thu, 25 Jul 2024 17:12:32 -0400 Subject: [PATCH 02/11] fix tests --- .size-limit.js | 2 +- .../utils/replayEventTemplates.ts | 7 ++++--- .../tests/fixtures/ReplayRecordingData.ts | 4 ++-- 3 files changed, 7 insertions(+), 6 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/utils/replayEventTemplates.ts b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts index 257c47fbfa9b..ec41ad82b767 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), }, @@ -140,6 +140,7 @@ export const expectedCLSPerformanceSpan = { endTimestamp: expect.any(Number), data: { value: expect.any(Number), + nodeId: expect.any(Array), rating: expect.any(String), size: expect.any(Number), }, @@ -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,7 +168,7 @@ export const expectedINPPerformanceSpan = { 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..e3cae170057b 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,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: 16, + nodeId: [16], }, }, }, @@ -257,7 +257,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: 10, + nodeId: [10], }, }, }, From 669016dee83ec1bf826df691279135c6aea89fa6 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 29 Jul 2024 00:36:05 -0400 Subject: [PATCH 03/11] fix test --- .../react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts | 1 + 1 file changed, 1 insertion(+) 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 e3cae170057b..a2cdbf304145 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 @@ -239,6 +239,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), + nodeId: [], }, }, }, From 33146ff42f921831116c028ba90fd8ad88f6112f Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 29 Jul 2024 01:25:01 -0400 Subject: [PATCH 04/11] fix browser test --- .../test/unit/util/createPerformanceEntry.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts index f1f9f71bc85c..2ef9cbcdbac6 100644 --- a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts +++ b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts @@ -89,7 +89,7 @@ describe('Unit | util | createPerformanceEntries', () => { }); describe('getCumulativeLayoutShift', () => { - it('works with an CLS metric', async () => { + it('works with a CLS metric', async () => { const metric = { value: 5108.299, rating: 'good' as const, @@ -103,7 +103,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: [] }, }); }); }); From b5b23e238cd37506e54e416cbb563cade228be80 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 29 Jul 2024 18:57:09 -0400 Subject: [PATCH 05/11] PR comments --- .../utils/replayEventTemplates.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts index ec41ad82b767..941c50e343e8 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(Array), + nodeId: expect.any(Number), rating: expect.any(String), size: expect.any(Number), }, @@ -140,7 +140,8 @@ export const expectedCLSPerformanceSpan = { endTimestamp: expect.any(Number), data: { value: expect.any(Number), - nodeId: expect.any(Array), + nodeId: expect.any(Number), + clsNodeIds: expect.any(Array), rating: expect.any(String), size: expect.any(Number), }, @@ -155,7 +156,7 @@ export const expectedFIDPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Array), + nodeId: expect.any(Number), }, }; @@ -168,7 +169,7 @@ export const expectedINPPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Array), + nodeId: expect.any(Number), }, }; From 4aaff0c4019bf28fe9fda7fb4759119ed07ad445 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 29 Jul 2024 18:57:30 -0400 Subject: [PATCH 06/11] PR comments --- .../tests/fixtures/ReplayRecordingData.ts | 5 ++-- .../replay-internal/src/types/performance.ts | 8 +++++-- .../src/util/createPerformanceEntries.ts | 24 +++++++------------ .../unit/util/createPerformanceEntry.test.ts | 2 +- 4 files changed, 17 insertions(+), 22 deletions(-) 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 a2cdbf304145..156c2775f5ff 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,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: [16], + nodeId: 16, }, }, }, @@ -239,7 +239,6 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: [], }, }, }, @@ -258,7 +257,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/src/types/performance.ts b/packages/replay-internal/src/types/performance.ts index a3a73cc0289e..0966fcf47c0f 100644 --- a/packages/replay-internal/src/types/performance.ts +++ b/packages/replay-internal/src/types/performance.ts @@ -108,9 +108,13 @@ export interface WebVitalData { */ rating: 'good' | 'needs-improvement' | 'poor'; /** - * The recording id of the LCP node. -1 if not found + * The recording id of the web vital node. -1 if not found */ - nodeId?: number | number[]; + nodeId?: number; + /** + * The recording id of the CLS nodes. -1 if not found + */ + clsNodeIds?: number[]; } /** diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index d481816e8a6b..100fa7a5f4c2 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -183,7 +183,7 @@ function createResourceEntry( */ export function getLargestContentfulPaint(metric: Metric): ReplayPerformanceEntry { const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { element?: Node }) | undefined; - const node = lastEntry ? lastEntry.element : undefined; + const node = lastEntry && lastEntry.element ? [lastEntry.element] : undefined; return getWebVital(metric, 'largest-contentful-paint', node); } @@ -210,7 +210,7 @@ export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry */ export function getFirstInputDelay(metric: Metric): ReplayPerformanceEntry { const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { target?: Node }) | undefined; - const node = lastEntry ? lastEntry.target : undefined; + const node = lastEntry && lastEntry.target ? [lastEntry.target] : undefined; return getWebVital(metric, 'first-input-delay', node); } @@ -219,33 +219,24 @@ export function getFirstInputDelay(metric: Metric): ReplayPerformanceEntry { const lastEntry = metric.entries[metric.entries.length - 1] as (PerformanceEntry & { target?: Node }) | undefined; - const node = lastEntry ? lastEntry.target : undefined; + const node = lastEntry && lastEntry.target ? [lastEntry.target] : undefined; return getWebVital(metric, 'interaction-to-next-paint', node); } /** * Add an web vital event to the replay based on the web vital metric. */ -export function getWebVital( +function getWebVital( metric: Metric, name: string, - node: Node | Node[] | undefined, + nodes: 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 nodeIds = nodes ? nodes.map(node => record.mirror.getId(node)) : undefined; const data: ReplayPerformanceEntry = { type: 'web-vital', @@ -256,7 +247,8 @@ export function getWebVital( value, size: value, rating, - nodeId: node ? nodeIds : undefined, + nodeId: nodeIds ? nodeIds.pop() : undefined, + clsNodeIds: nodeIds, }, }; diff --git a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts index 2ef9cbcdbac6..00917e3a58c9 100644 --- a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts +++ b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts @@ -103,7 +103,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: [] }, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeId: undefined }, }); }); }); From 5ff2469389b35ba98b355fd5fa2474cc14a97ffd Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:16:55 -0400 Subject: [PATCH 07/11] lint --- .../src/util/createPerformanceEntries.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 100fa7a5f4c2..0cf25dd1831f 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -226,11 +226,7 @@ export function getInteractionToNextPaint(metric: Metric): ReplayPerformanceEntr /** * Add an web vital event to the replay based on the web vital metric. */ -function getWebVital( - metric: Metric, - name: string, - nodes: Node[] | undefined, -): ReplayPerformanceEntry { +function getWebVital( metric: Metric, name: string, nodes: Node[] | undefined): ReplayPerformanceEntry { const value = metric.value; const rating = metric.rating; @@ -247,8 +243,8 @@ function getWebVital( value, size: value, rating, - nodeId: nodeIds ? nodeIds.pop() : undefined, - clsNodeIds: nodeIds, + nodeId: nodeIds ? nodeIds[0] : undefined, + clsNodeIds: name === 'cumulative-layout-shift' ? nodeIds : undefined, }, }; From 7034a7dd77ceb5ab24914ca826dad3b78fdb313d Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Tue, 30 Jul 2024 01:18:41 -0400 Subject: [PATCH 08/11] fix CI --- .size-limit.js | 2 +- .../react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts | 1 + packages/replay-internal/src/util/createPerformanceEntries.ts | 2 +- .../test/unit/util/createPerformanceEntry.test.ts | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index dc85fffe40af..72050f7225f3 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -149,7 +149,7 @@ module.exports = [ name: 'CDN Bundle (incl. Tracing, Replay)', path: createCDNPath('bundle.tracing.replay.min.js'), gzip: true, - limit: '72 KB', + limit: '73 KB', }, { name: 'CDN Bundle (incl. Tracing, Replay, Feedback)', 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..0553abe53ac3 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 @@ -239,6 +239,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), + clsNodeIds: [], }, }, }, diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 0cf25dd1831f..935ff795b540 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -226,7 +226,7 @@ export function getInteractionToNextPaint(metric: Metric): ReplayPerformanceEntr /** * Add an web vital event to the replay based on the web vital metric. */ -function getWebVital( metric: Metric, name: string, nodes: Node[] | undefined): ReplayPerformanceEntry { +function getWebVital(metric: Metric, name: string, nodes: Node[] | undefined): ReplayPerformanceEntry { const value = metric.value; const rating = metric.rating; diff --git a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts index 00917e3a58c9..816c40ad4fed 100644 --- a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts +++ b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts @@ -103,7 +103,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: undefined, clsNodeIds: [] }, }); }); }); From 57c093e23935b68d9d359e2d855de9c2cadbaac7 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Tue, 30 Jul 2024 01:33:35 -0400 Subject: [PATCH 09/11] finally fix all tests? --- .../browser-integration-tests/utils/replayEventTemplates.ts | 1 - .../react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts index 941c50e343e8..fd42e8fe7209 100644 --- a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts +++ b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts @@ -140,7 +140,6 @@ export const expectedCLSPerformanceSpan = { endTimestamp: expect.any(Number), data: { value: expect.any(Number), - nodeId: expect.any(Number), clsNodeIds: expect.any(Array), rating: expect.any(String), size: expect.any(Number), 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 0553abe53ac3..ac1c6a913493 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 @@ -239,7 +239,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - clsNodeIds: [], + clsNodeIds: expect.any(Array), }, }, }, From 5e4d28a5b67b6bbe2cc9e269363139eb0bcb8914 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Tue, 30 Jul 2024 12:31:23 -0400 Subject: [PATCH 10/11] only keep nodeIds --- .../utils/replayEventTemplates.ts | 8 ++++---- .../tests/fixtures/ReplayRecordingData.ts | 6 +++--- packages/replay-internal/src/types/performance.ts | 8 ++------ .../replay-internal/src/util/createPerformanceEntries.ts | 3 +-- .../test/unit/util/createPerformanceEntry.test.ts | 8 ++++---- 5 files changed, 14 insertions(+), 19 deletions(-) diff --git a/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts b/dev-packages/browser-integration-tests/utils/replayEventTemplates.ts index fd42e8fe7209..f4defc27182c 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), + nodeIds: expect.any(Array), rating: expect.any(String), size: expect.any(Number), }, @@ -140,7 +140,7 @@ export const expectedCLSPerformanceSpan = { endTimestamp: expect.any(Number), data: { value: expect.any(Number), - clsNodeIds: expect.any(Array), + nodeIds: expect.any(Array), rating: expect.any(String), size: expect.any(Number), }, @@ -155,7 +155,7 @@ export const expectedFIDPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Number), + nodeIds: expect.any(Array), }, }; @@ -168,7 +168,7 @@ export const expectedINPPerformanceSpan = { value: expect.any(Number), rating: expect.any(String), size: expect.any(Number), - nodeId: expect.any(Number), + nodeIds: 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 ac1c6a913493..1b054c099b3d 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,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: 16, + nodeIds: [16], }, }, }, @@ -239,7 +239,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - clsNodeIds: expect.any(Array), + nodeIds: expect.any(Array), }, }, }, @@ -258,7 +258,7 @@ export const ReplayRecordingData = [ value: expect.any(Number), size: expect.any(Number), rating: expect.any(String), - nodeId: 10, + nodeIds: [10], }, }, }, diff --git a/packages/replay-internal/src/types/performance.ts b/packages/replay-internal/src/types/performance.ts index 0966fcf47c0f..6b264a44ee9c 100644 --- a/packages/replay-internal/src/types/performance.ts +++ b/packages/replay-internal/src/types/performance.ts @@ -108,13 +108,9 @@ export interface WebVitalData { */ rating: 'good' | 'needs-improvement' | 'poor'; /** - * The recording id of the web vital node. -1 if not found + * The recording id of the web vital nodes. -1 if not found */ - nodeId?: number; - /** - * The recording id of the CLS nodes. -1 if not found - */ - clsNodeIds?: number[]; + nodeIds?: number[]; } /** diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 935ff795b540..5bc96d852a19 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -243,8 +243,7 @@ function getWebVital(metric: Metric, name: string, nodes: Node[] | undefined): R value, size: value, rating, - nodeId: nodeIds ? nodeIds[0] : undefined, - clsNodeIds: name === 'cumulative-layout-shift' ? nodeIds : undefined, + nodeIds, }, }; diff --git a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts index 816c40ad4fed..d85698d1be1d 100644 --- a/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts +++ b/packages/replay-internal/test/unit/util/createPerformanceEntry.test.ts @@ -83,7 +83,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, nodeIds: undefined }, }); }); }); @@ -103,7 +103,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, clsNodeIds: [] }, + data: { value: 5108.299, size: 5108.299, rating: 'good', nodeIds: [] }, }); }); }); @@ -123,7 +123,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', nodeIds: undefined }, }); }); }); @@ -143,7 +143,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', nodeIds: undefined }, }); }); }); From a9b6eec65464d971713f4efc6ea862067b117327 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Tue, 30 Jul 2024 12:52:55 -0400 Subject: [PATCH 11/11] inline --- packages/replay-internal/src/util/createPerformanceEntries.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts index 5bc96d852a19..d55c2269d0f4 100644 --- a/packages/replay-internal/src/util/createPerformanceEntries.ts +++ b/packages/replay-internal/src/util/createPerformanceEntries.ts @@ -232,8 +232,6 @@ function getWebVital(metric: Metric, name: string, nodes: Node[] | undefined): R const end = getAbsoluteTime(value); - const nodeIds = nodes ? nodes.map(node => record.mirror.getId(node)) : undefined; - const data: ReplayPerformanceEntry = { type: 'web-vital', name, @@ -243,7 +241,7 @@ function getWebVital(metric: Metric, name: string, nodes: Node[] | undefined): R value, size: value, rating, - nodeIds, + nodeIds: nodes ? nodes.map(node => record.mirror.getId(node)) : undefined, }, };