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

We want to show the score for each layout shift as well as the all the
nodes that contributed to the score, so we're adding a new
`attributions` object to our web vitals data

Relates to getsentry/sentry#69881

---------

Co-authored-by: Billy Vong <billyvg@users.noreply.github.com>

Author: c298lee

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).sources !== 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 },
       });
     });
   });