replay web vital breadcrumbs

Author: c298lee

packages/replay-internal/src/coreHandlers/performanceObserver.ts

@@ -1,7 +1,8 @@
-import { addLcpInstrumentationHandler, addPerformanceInstrumentationHandler } from '@sentry-internal/browser-utils';
+import { addClsInstrumentationHandler, addFidInstrumentationHandler, addLcpInstrumentationHandler, addPerformanceInstrumentationHandler } from '@sentry-internal/browser-utils';
 
 import type { ReplayContainer } from '../types';
-import { getLargestContentfulPaint } from '../util/createPerformanceEntries';
+import { getLargestContentfulPaint, getCumulativeLayoutShift, getFirstInputDelay, getInteractionToNextPaint } from '../util/createPerformanceEntries';
+import { addInpInstrumentationHandler } from '@sentry-internal/browser-utils/build/types/metrics/instrument';
 
 /**
  * Sets up a PerformanceObserver to listen to all performance entry types.
@@ -29,6 +30,15 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
     addLcpInstrumentationHandler(({ metric }) => {
       replay.replayPerformanceEntries.push(getLargestContentfulPaint(metric));
     }),
+    addClsInstrumentationHandler(({ metric }) => {
+      replay.replayPerformanceEntries.push(getCumulativeLayoutShift(metric));
+    }),
+    addFidInstrumentationHandler(({ metric }) => {
+      replay.replayPerformanceEntries.push(getFirstInputDelay(metric));
+    }),
+    addInpInstrumentationHandler(({ metric }) => {
+      replay.replayPerformanceEntries.push(getInteractionToNextPaint(metric));
+    }),
   );
 
   // A callback to cleanup all handlers

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

@@ -108,10 +108,46 @@ export interface LargestContentfulPaintData {
   nodeId?: number;
 }
 
+export interface CumulativeLayoutShiftData {
+  /**
+   * Render time (in ms) of the CLS
+   */
+  value: number;
+  size: number;
+  /**
+   * The recording id of the CLS node. -1 if not found
+   */
+  nodeId?: number;
+}
+
+export interface FirstInputDelayData {
+  /**
+   * Render time (in ms) of the FID
+   */
+  value: number;
+  size: number;
+  /**
+   * The recording id of the FID node. -1 if not found
+   */
+  nodeId?: number;
+}
+
+export interface InteractionToNextPaintData {
+  /**
+   * Render time (in ms) of the INP
+   */
+  value: number;
+  size: number;
+  /**
+   * The recording id of the INP node. -1 if not found
+   */
+  nodeId?: number;
+}
+
 /**
  * Entries that come from window.performance
  */
-export type AllPerformanceEntryData = PaintData | NavigationData | ResourceData | LargestContentfulPaintData;
+export type AllPerformanceEntryData = PaintData | NavigationData | ResourceData | LargestContentfulPaintData | CumulativeLayoutShiftData | FirstInputDelayData;
 
 export interface MemoryData {
   memory: {

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

@@ -3,6 +3,9 @@ import type { Breadcrumb } from '@sentry/types';
 import type {
   HistoryData,
   LargestContentfulPaintData,
+  CumulativeLayoutShiftData,
+  FirstInputDelayData,
+  InteractionToNextPaintData,
   MemoryData,
   NavigationData,
   NetworkRequestData,
@@ -167,6 +170,21 @@ interface ReplayLargestContentfulPaintFrame extends ReplayBaseSpanFrame {
   op: 'largest-contentful-paint';
 }
 
+interface ReplayCumulativeLayoutShiftFrame extends ReplayBaseSpanFrame {
+  data: CumulativeLayoutShiftData;
+  op: 'cumulative-layout-shift';
+}
+
+interface ReplayFirstInputDelayFrame extends ReplayBaseSpanFrame {
+  data: FirstInputDelayData;
+  op: 'first-input-delay';
+}
+
+interface ReplayInteractionToNextPaintFrame extends ReplayBaseSpanFrame {
+  data: InteractionToNextPaintData;
+  op: 'interaction-to-next-paint';
+}
+
 interface ReplayMemoryFrame extends ReplayBaseSpanFrame {
   data: MemoryData;
   op: 'memory';
@@ -197,6 +215,9 @@ export type ReplaySpanFrame =
   | ReplayHistoryFrame
   | ReplayRequestFrame
   | ReplayLargestContentfulPaintFrame
+  | ReplayCumulativeLayoutShiftFrame
+  | ReplayFirstInputDelayFrame
+  | ReplayInteractionToNextPaintFrame
   | ReplayMemoryFrame
   | ReplayNavigationFrame
   | ReplayPaintFrame

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

@@ -7,6 +7,9 @@ import type {
   AllPerformanceEntryData,
   ExperimentalPerformanceResourceTiming,
   LargestContentfulPaintData,
+  CumulativeLayoutShiftData,
+  FirstInputDelayData,
+  InteractionToNextPaintData,
   NavigationData,
   PaintData,
   ReplayPerformanceEntry,
@@ -141,7 +144,7 @@ function createResourceEntry(
 }
 
 /**
- * Add a LCP event to the replay based on an LCP metric.
+ * Add a LCP event to the replay based on a LCP metric.
  */
 export function getLargestContentfulPaint(metric: {
   value: number;
@@ -156,7 +159,7 @@ export function getLargestContentfulPaint(metric: {
   const end = getAbsoluteTime(value);
 
   const data: ReplayPerformanceEntry<LargestContentfulPaintData> = {
-    type: 'largest-contentful-paint',
+    type: 'web-vital',
     name: 'largest-contentful-paint',
     start: end,
     end,
@@ -169,3 +172,93 @@ export function getLargestContentfulPaint(metric: {
 
   return data;
 }
+
+/**
+ * Add a CLS event to the replay based on a CLS metric.
+ */
+export function getCumulativeLayoutShift(metric: {
+  value: number;
+  entries: PerformanceEntry[];
+}): ReplayPerformanceEntry<CumulativeLayoutShiftData> {
+  const entries = metric.entries;
+  const lastEntry = entries[entries.length - 1] as (PerformanceEntry & { element?: Element }) | undefined;
+  const element = lastEntry ? lastEntry.element : undefined;
+
+  const value = metric.value;
+
+  const end = getAbsoluteTime(value);
+
+  const data: ReplayPerformanceEntry<CumulativeLayoutShiftData> = {
+    type: 'web-vital',
+    name: 'cumulative-layout-shift',
+    start: end,
+    end,
+    data: {
+      value,
+      size: value,
+      nodeId: element ? record.mirror.getId(element) : undefined,
+    },
+  };
+
+  return data;
+}
+
+/**
+ * Add a FID event to the replay based on a FID metric.
+ */
+export function getFirstInputDelay(metric: {
+  value: number;
+  entries: PerformanceEntry[];
+}): ReplayPerformanceEntry<FirstInputDelayData> {
+  const entries = metric.entries;
+  const lastEntry = entries[entries.length - 1] as (PerformanceEntry & { element?: Element }) | undefined;
+  const element = lastEntry ? lastEntry.element : undefined;
+
+  const value = metric.value;
+
+  const end = getAbsoluteTime(value);
+
+  const data: ReplayPerformanceEntry<FirstInputDelayData> = {
+    type: 'web-vital',
+    name: 'first-input-delay',
+    start: end,
+    end,
+    data: {
+      value,
+      size: value,
+      nodeId: element ? record.mirror.getId(element) : undefined,
+    },
+  };
+
+  return data;
+}
+
+/**
+ * Add an INP event to the replay based on an INP metric.
+ */
+export function getInteractionToNextPaint(metric: {
+  value: number;
+  entries: PerformanceEntry[];
+}): ReplayPerformanceEntry<InteractionToNextPaintData> {
+  const entries = metric.entries;
+  const lastEntry = entries[entries.length - 1] as (PerformanceEntry & { element?: Element }) | undefined;
+  const element = lastEntry ? lastEntry.element : undefined;
+
+  const value = metric.value;
+
+  const end = getAbsoluteTime(value);
+
+  const data: ReplayPerformanceEntry<InteractionToNextPaintData> = {
+    type: 'web-vital',
+    name: 'interaction-to-next-paint',
+    start: end,
+    end,
+    data: {
+      value,
+      size: value,
+      nodeId: element ? record.mirror.getId(element) : undefined,
+    },
+  };
+
+  return data;
+}