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