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

.size-limit.js

@@ -29,7 +29,7 @@ module.exports = [
     path: 'packages/browser/build/npm/esm/index.js',
     import: createImport('init', 'browserTracingIntegration', 'replayIntegration'),
     gzip: true,
-    limit: '66 KB',
+    limit: '67 KB',
     modifyWebpackConfig: function (config) {
       const webpack = require('webpack');
       config.plugins.push(

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

@@ -239,7 +239,7 @@ export const ReplayRecordingData = [
           value: expect.any(Number),
           size: expect.any(Number),
           rating: expect.any(String),
-          nodeIds: expect.any(Array),
+          layoutShift: 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
+   */
+  layoutShift?: { 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[] | PerformanceEventTiming[] | LayoutShift[];
+}
+
+interface LayoutShift extends PerformanceEntry {
+  value: number;
+  sources: LayoutShiftAttribution[];
+  hadRecentInput: boolean;
 }
 
 interface LayoutShiftAttribution {
@@ -191,18 +197,22 @@ 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> {
-  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);
+  const layoutShifts = [];
+  for (const entry of metric.entries) {
+    const layoutShift = entry as LayoutShift | undefined;
+    if (layoutShift) {
+      const sources = [];
+      for (const source of layoutShift.sources) {
+        const nodeId = record.mirror.getId(source.node);
+        if (nodeId) {
+          sources.push(nodeId);
+        }
       }
+      layoutShifts.push({ value: layoutShift.value, sources: sources.length ? sources : undefined });
     }
+
   }
-  return getWebVital(metric, 'cumulative-layout-shift', nodes);
+  return getWebVital(metric, 'cumulative-layout-shift', undefined, layoutShifts);
 }
 
 /**
@@ -226,7 +236,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,
+  layoutShift?: { value: number; sources: number[] | undefined }[],
+): ReplayPerformanceEntry<WebVitalData> {
   const value = metric.value;
   const rating = metric.rating;
 
@@ -242,6 +257,7 @@ function getWebVital(metric: Metric, name: string, nodes: Node[] | undefined): R
       size: value,
       rating,
       nodeIds: nodes ? nodes.map(node => record.mirror.getId(node)) : undefined,
+      layoutShift,
     },
   };
 

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