feat(replay): Add layout shift to CLS replay data

dev-packages/browser-integration-tests/utils/replayEventTemplates.ts

@@ -141,6 +141,7 @@ export const expectedCLSPerformanceSpan = {
  data: {
  value: expect.any(Number),
  nodeIds: expect.any(Array),
+ attributions: expect.any(Array),
  rating: expect.any(String),
  size: expect.any(Number),
  },

dev-packages/e2e-tests/test-applications/react-router-6-use-routes/tests/fixtures/ReplayRecordingData.ts

@@ -219,7 +219,7 @@ export const ReplayRecordingData = [
  data: {
  value: expect.any(Number),
  size: expect.any(Number),
- nodeId: 16,
+ nodeIds: [16],
  },
  },
  },

dev-packages/e2e-tests/test-applications/react-send-to-sentry/tests/fixtures/ReplayRecordingData.ts

@@ -240,6 +240,7 @@ export const ReplayRecordingData = [
  size: expect.any(Number),
  rating: expect.any(String),
  nodeIds: expect.any(Array),
+ attributions: expect.any(Array),
  },
  },
  },

packages/replay-internal/src/types/performance.ts

@@ -111,6 +111,10 @@ export interface WebVitalData {
  * The recording id of the web vital nodes. -1 if not found
  */
  nodeIds?: number[];
+ /**
+ * The layout shifts of a CLS metric
+ */
+ attributions?: { value: number; sources?: number[] }[];
 }
 
 /**

packages/replay-internal/src/util/createPerformanceEntries.ts

@@ -43,7 +43,13 @@ export interface Metric {
  * The array may also be empty if the metric value was not based on any
  * entries (e.g. a CLS value of 0 given no layout shifts).
  */
- entries: PerformanceEntry[] | PerformanceEventTiming[];
+ entries: PerformanceEntry[] | LayoutShift[];
+}
+
+interface LayoutShift extends PerformanceEntry {
+ value: number;
+ sources: LayoutShiftAttribution[];
+ hadRecentInput: boolean;
 }
 
 interface LayoutShiftAttribution {
@@ -52,6 +58,11 @@ interface LayoutShiftAttribution {
  currentRect: DOMRectReadOnly;
 }
 
+interface Attribution {
+ value: number;
+ nodeIds?: number[];
+}
+
 /**
  * Handler creater for web vitals
  */
@@ -187,22 +198,32 @@ export function getLargestContentfulPaint(metric: Metric): ReplayPerformanceEntr
  return getWebVital(metric, 'largest-contentful-paint', node);
 }
 
+function isLayoutShift(entry: PerformanceEntry | LayoutShift): entry is LayoutShift {
+ return (entry as LayoutShift).value !== undefined;
+}
+
 /**
  * Add a CLS event to the replay based on a CLS metric.
  */
 export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry<WebVitalData> {
- const lastEntry = metric.entries[metric.entries.length - 1] as
- | (PerformanceEntry & { sources?: LayoutShiftAttribution[] })
- | undefined;
+ const layoutShifts: Attribution[] = [];
  const nodes: Node[] = [];
- if (lastEntry && lastEntry.sources) {
- for (const source of lastEntry.sources) {
- if (source.node) {
- nodes.push(source.node);
+ for (const entry of metric.entries) {
+ if (isLayoutShift(entry)) {
+ const nodeIds = [];
+ for (const source of entry.sources) {
+ if (source.node) {
+ nodes.push(source.node);
+ const nodeId = record.mirror.getId(source.node);
+ if (nodeId) {
+ nodeIds.push(nodeId);
+ }
+ }
  }
+ layoutShifts.push({ value: entry.value, nodeIds });
  }
  }
- return getWebVital(metric, 'cumulative-layout-shift', nodes);
+ return getWebVital(metric, 'cumulative-layout-shift', nodes, layoutShifts);
 }
 
 /**
@@ -226,7 +247,12 @@ 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<WebVitalData> {
+function getWebVital(
+ metric: Metric,
+ name: string,
+ nodes: Node[] | undefined,
+ attributions?: Attribution[],
+): ReplayPerformanceEntry<WebVitalData> {
  const value = metric.value;
  const rating = metric.rating;
 
@@ -242,6 +268,7 @@ function getWebVital(metric: Metric, name: string, nodes: Node[] | undefined): R
  size: value,
  rating,
  nodeIds: nodes ? nodes.map(node => record.mirror.getId(node)) : undefined,
+ attributions,
  },
  };
 

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, nodeIds: undefined },
+ data: { value: 5108.299, rating: 'good', size: 5108.299, nodeIds: undefined, attributions: 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', nodeIds: [] },
+ data: { value: 5108.299, size: 5108.299, rating: 'good', nodeIds: [], attributions: [] },
  });
  });
  });
@@ -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', nodeIds: undefined },
+ data: { value: 5108.299, size: 5108.299, rating: 'good', nodeIds: undefined, attributions: 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', nodeIds: undefined },
+ data: { value: 5108.299, size: 5108.299, rating: 'good', nodeIds: undefined, attributions: undefined },
  });
  });
  });