feat(replay): Replay Web Vital Breadcrumbs (#12296)

Adds CLS, FID, and INP breadcrumbs. Updates all web vital breadcrumbs to
include rating

Closes #11639

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Luca Forstner <[email protected]>
Co-authored-by: Andrei <[email protected]>
Co-authored-by: Francesco Novy <[email protected]>
Co-authored-by: Lukas Stracke <[email protected]>
Co-authored-by: Yamagishi Kazutoshi <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 7 people

dev-packages/browser-integration-tests/suites/replay/customEvents/test.ts

@@ -2,8 +2,10 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
 import {
+  expectedCLSPerformanceSpan,
   expectedClickBreadcrumb,
   expectedFCPPerformanceSpan,
+  expectedFIDPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
   expectedMemoryPerformanceSpan,
@@ -62,6 +64,8 @@ sentryTest(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan, // two memory spans - once per flush

dev-packages/browser-integration-tests/suites/replay/multiple-pages/test.ts

@@ -2,8 +2,10 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
 import {
+  expectedCLSPerformanceSpan,
   expectedClickBreadcrumb,
   expectedFCPPerformanceSpan,
+  expectedFIDPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
   expectedMemoryPerformanceSpan,
@@ -78,11 +80,13 @@ sentryTest(
     const collectedPerformanceSpans = [...recording0.performanceSpans, ...recording1.performanceSpans];
     const collectedBreadcrumbs = [...recording0.breadcrumbs, ...recording1.breadcrumbs];
 
-    expect(collectedPerformanceSpans.length).toEqual(6);
+    expect(collectedPerformanceSpans.length).toEqual(8);
     expect(collectedPerformanceSpans).toEqual(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan, // two memory spans - once per flush
@@ -116,11 +120,13 @@ sentryTest(
     const collectedPerformanceSpansAfterReload = [...recording2.performanceSpans, ...recording3.performanceSpans];
     const collectedBreadcrumbsAdterReload = [...recording2.breadcrumbs, ...recording3.breadcrumbs];
 
-    expect(collectedPerformanceSpansAfterReload.length).toEqual(6);
+    expect(collectedPerformanceSpansAfterReload.length).toEqual(8);
     expect(collectedPerformanceSpansAfterReload).toEqual(
       expect.arrayContaining([
         expectedReloadPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,
@@ -188,6 +194,8 @@ sentryTest(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,
@@ -304,11 +312,13 @@ sentryTest(
     ];
     const collectedBreadcrumbsAfterIndexNavigation = [...recording8.breadcrumbs, ...recording9.breadcrumbs];
 
-    expect(collectedPerformanceSpansAfterIndexNavigation.length).toEqual(6);
+    expect(collectedPerformanceSpansAfterIndexNavigation.length).toEqual(8);
     expect(collectedPerformanceSpansAfterIndexNavigation).toEqual(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,

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

@@ -121,17 +121,56 @@ export const expectedMemoryPerformanceSpan = {
 };
 
 export const expectedLCPPerformanceSpan = {
-  op: 'largest-contentful-paint',
+  op: 'web-vital',
   description: 'largest-contentful-paint',
   startTimestamp: expect.any(Number),
   endTimestamp: expect.any(Number),
   data: {
     value: expect.any(Number),
     nodeId: expect.any(Number),
+    rating: expect.any(String),
     size: expect.any(Number),
   },
 };
 
+export const expectedCLSPerformanceSpan = {
+  op: 'web-vital',
+  description: 'cumulative-layout-shift',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+  data: {
+    value: expect.any(Number),
+    rating: expect.any(String),
+    size: expect.any(Number),
+  },
+};
+
+export const expectedFIDPerformanceSpan = {
+  op: 'web-vital',
+  description: 'first-input-delay',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+  data: {
+    value: expect.any(Number),
+    rating: expect.any(String),
+    size: expect.any(Number),
+    nodeId: expect.any(Number),
+  },
+};
+
+export const expectedINPPerformanceSpan = {
+  op: 'web-vital',
+  description: 'interaction-to-next-paint',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+  data: {
+    value: expect.any(Number),
+    rating: expect.any(String),
+    size: expect.any(Number),
+    nodeId: expect.any(Number),
+  },
+};
+
 export const expectedFCPPerformanceSpan = {
   op: 'paint',
   description: 'first-contentful-paint',

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

@@ -212,7 +212,7 @@ export const ReplayRecordingData = [
     data: {
       tag: 'performanceSpan',
       payload: {
-        op: 'largest-contentful-paint',
+        op: 'web-vital',
         description: 'largest-contentful-paint',
         startTimestamp: expect.any(Number),
         endTimestamp: expect.any(Number),

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

@@ -212,18 +212,56 @@ export const ReplayRecordingData = [
     data: {
       tag: 'performanceSpan',
       payload: {
-        op: 'largest-contentful-paint',
+        op: 'web-vital',
         description: 'largest-contentful-paint',
         startTimestamp: expect.any(Number),
         endTimestamp: expect.any(Number),
         data: {
           value: expect.any(Number),
           size: expect.any(Number),
+          rating: expect.any(String),
           nodeId: 16,
         },
       },
     },
   },
+  {
+    type: 5,
+    timestamp: expect.any(Number),
+    data: {
+      tag: 'performanceSpan',
+      payload: {
+        op: 'web-vital',
+        description: 'cumulative-layout-shift',
+        startTimestamp: expect.any(Number),
+        endTimestamp: expect.any(Number),
+        data: {
+          value: expect.any(Number),
+          size: expect.any(Number),
+          rating: expect.any(String),
+        },
+      },
+    },
+  },
+  {
+    type: 5,
+    timestamp: expect.any(Number),
+    data: {
+      tag: 'performanceSpan',
+      payload: {
+        op: 'web-vital',
+        description: 'first-input-delay',
+        startTimestamp: expect.any(Number),
+        endTimestamp: expect.any(Number),
+        data: {
+          value: expect.any(Number),
+          size: expect.any(Number),
+          rating: expect.any(String),
+          nodeId: 10,
+        },
+      },
+    },
+  },
   {
     type: 5,
     timestamp: expect.any(Number),

packages/browser-utils/src/index.ts

@@ -4,6 +4,7 @@ export {
   addFidInstrumentationHandler,
   addTtfbInstrumentationHandler,
   addLcpInstrumentationHandler,
+  addInpInstrumentationHandler,
 } from './metrics/instrument';
 
 export {

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

@@ -1,7 +1,18 @@
-import { addLcpInstrumentationHandler, addPerformanceInstrumentationHandler } from '@sentry-internal/browser-utils';
-
+import {
+  addClsInstrumentationHandler,
+  addFidInstrumentationHandler,
+  addInpInstrumentationHandler,
+  addLcpInstrumentationHandler,
+  addPerformanceInstrumentationHandler,
+} from '@sentry-internal/browser-utils';
 import type { ReplayContainer } from '../types';
-import { getLargestContentfulPaint } from '../util/createPerformanceEntries';
+import {
+  getCumulativeLayoutShift,
+  getFirstInputDelay,
+  getInteractionToNextPaint,
+  getLargestContentfulPaint,
+  webVitalHandler,
+} from '../util/createPerformanceEntries';
 
 /**
  * Sets up a PerformanceObserver to listen to all performance entry types.
@@ -26,9 +37,10 @@ export function setupPerformanceObserver(replay: ReplayContainer): () => void {
   });
 
   clearCallbacks.push(
-    addLcpInstrumentationHandler(({ metric }) => {
-      replay.replayPerformanceEntries.push(getLargestContentfulPaint(metric));
-    }),
+    addLcpInstrumentationHandler(webVitalHandler(getLargestContentfulPaint, replay)),
+    addClsInstrumentationHandler(webVitalHandler(getCumulativeLayoutShift, replay)),
+    addFidInstrumentationHandler(webVitalHandler(getFirstInputDelay, replay)),
+    addInpInstrumentationHandler(webVitalHandler(getInteractionToNextPaint, replay)),
   );
 
   // A callback to cleanup all handlers

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

@@ -96,12 +96,17 @@ export type ResourceData = Pick<PerformanceResourceTiming, 'decodedBodySize' | '
   statusCode?: number;
 };
 
-export interface LargestContentfulPaintData {
+export interface WebVitalData {
   /**
    * Render time (in ms) of the LCP
    */
   value: number;
   size: number;
+  /**
+   * The rating as to whether the metric value is within the "good",
+   * "needs improvement", or "poor" thresholds of the metric.
+   */
+  rating: 'good' | 'needs-improvement' | 'poor';
   /**
    * The recording id of the LCP node. -1 if not found
    */
@@ -111,7 +116,7 @@ export interface LargestContentfulPaintData {
 /**
  * Entries that come from window.performance
  */
-export type AllPerformanceEntryData = PaintData | NavigationData | ResourceData | LargestContentfulPaintData;
+export type AllPerformanceEntryData = PaintData | NavigationData | ResourceData | WebVitalData;
 
 export interface MemoryData {
   memory: {

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

@@ -2,12 +2,12 @@ import type { Breadcrumb } from '@sentry/types';
 
 import type {
   HistoryData,
-  LargestContentfulPaintData,
   MemoryData,
   NavigationData,
   NetworkRequestData,
   PaintData,
   ResourceData,
+  WebVitalData,
 } from './performance';
 import type { ReplayEventTypeCustom } from './rrweb';
 
@@ -162,9 +162,9 @@ interface ReplayHistoryFrame extends ReplayBaseSpanFrame {
   op: 'navigation.push';
 }
 
-interface ReplayLargestContentfulPaintFrame extends ReplayBaseSpanFrame {
-  data: LargestContentfulPaintData;
-  op: 'largest-contentful-paint';
+interface ReplayWebVitalFrame extends ReplayBaseSpanFrame {
+  data: WebVitalData;
+  op: 'largest-contentful-paint' | 'cumulative-layout-shift' | 'first-input-delay' | 'interaction-to-next-paint';
 }
 
 interface ReplayMemoryFrame extends ReplayBaseSpanFrame {
@@ -196,7 +196,7 @@ export type ReplaySpanFrame =
   | ReplayBaseSpanFrame
   | ReplayHistoryFrame
   | ReplayRequestFrame
-  | ReplayLargestContentfulPaintFrame
+  | ReplayWebVitalFrame
   | ReplayMemoryFrame
   | ReplayNavigationFrame
   | ReplayPaintFrame