ref(replay): Update CLS web vitals to align with browserTracing

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),
  },
 };
 

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,6 +239,7 @@ export const ReplayRecordingData = [
  value: expect.any(Number),
  size: expect.any(Number),
  rating: expect.any(String),
+ nodeId: [],
  },
  },
  },
@@ -257,7 +258,7 @@ export const ReplayRecordingData = [
  value: expect.any(Number),
  size: expect.any(Number),
  rating: expect.any(String),
- nodeId: 10,
+ nodeId: [10],
  },
  },
  },

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[];
 }
 
 /**

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<WebVitalData> {
- // 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<WebVitalData> {
  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<WebVitalData> = {
  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,
  },
  };
 

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: [] },
  });
  });
  });