update tests and refactor

Author: c298lee

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

@@ -6,6 +6,9 @@ import {
   expectedFCPPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
+  expectedCLSPerformanceSpan,
+  expectedFIDPerformanceSpan,
+  expectedINPPerformanceSpan,
   expectedMemoryPerformanceSpan,
   expectedNavigationPerformanceSpan,
   getExpectedReplayEvent,
@@ -62,6 +65,9 @@ sentryTest(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
+        expectedINPPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan, // two memory spans - once per flush

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

@@ -6,6 +6,9 @@ import {
   expectedFCPPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
+  expectedCLSPerformanceSpan,
+  expectedFIDPerformanceSpan,
+  expectedINPPerformanceSpan,
   expectedMemoryPerformanceSpan,
   expectedNavigationBreadcrumb,
   expectedNavigationPerformanceSpan,
@@ -83,6 +86,9 @@ sentryTest(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
+        expectedINPPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan, // two memory spans - once per flush
@@ -121,6 +127,9 @@ sentryTest(
       expect.arrayContaining([
         expectedReloadPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
+        expectedINPPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,
@@ -188,6 +197,9 @@ sentryTest(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
+        expectedINPPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,
@@ -309,6 +321,9 @@ sentryTest(
       expect.arrayContaining([
         expectedNavigationPerformanceSpan,
         expectedLCPPerformanceSpan,
+        expectedCLSPerformanceSpan,
+        expectedFIDPerformanceSpan,
+        expectedINPPerformanceSpan,
         expectedFPPerformanceSpan,
         expectedFCPPerformanceSpan,
         expectedMemoryPerformanceSpan,

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

@@ -128,6 +128,46 @@ export const expectedLCPPerformanceSpan = {
   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),
+    nodeId: 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),
+    nodeId: expect.any(Number),
+    rating: expect.any(String),
+    size: 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),
+    nodeId: expect.any(Number),
+    rating: expect.any(String),
     size: expect.any(Number),
   },
 };

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

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

@@ -96,58 +96,27 @@ 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 recording id of the LCP node. -1 if not found
-   */
-  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
+   * The rating as to whether the metric value is within the "good",
+   * "needs improvement", or "poor" thresholds of the metric.
    */
-  nodeId?: number;
-}
-
-export interface FirstInputDelayData {
+  rating: 'good' | 'needs-improvement' | 'poor';
   /**
-   * 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
+   * The recording id of the LCP node. -1 if not found
    */
   nodeId?: number;
 }
 
 /**
  * Entries that come from window.performance
  */
-export type AllPerformanceEntryData = PaintData | NavigationData | ResourceData | LargestContentfulPaintData | CumulativeLayoutShiftData | FirstInputDelayData;
+export type AllPerformanceEntryData = PaintData | NavigationData | ResourceData | WebVitalData;
 
 export interface MemoryData {
   memory: {

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

@@ -2,15 +2,12 @@ import type { Breadcrumb } from '@sentry/types';
 
 import type {
   HistoryData,
-  LargestContentfulPaintData,
-  CumulativeLayoutShiftData,
-  FirstInputDelayData,
-  InteractionToNextPaintData,
   MemoryData,
   NavigationData,
   NetworkRequestData,
   PaintData,
   ResourceData,
+  WebVitalData,
 } from './performance';
 import type { ReplayEventTypeCustom } from './rrweb';
 
@@ -166,22 +163,22 @@ interface ReplayHistoryFrame extends ReplayBaseSpanFrame {
 }
 
 interface ReplayLargestContentfulPaintFrame extends ReplayBaseSpanFrame {
-  data: LargestContentfulPaintData;
+  data: WebVitalData;
   op: 'largest-contentful-paint';
 }
 
 interface ReplayCumulativeLayoutShiftFrame extends ReplayBaseSpanFrame {
-  data: CumulativeLayoutShiftData;
+  data: WebVitalData;
   op: 'cumulative-layout-shift';
 }
 
 interface ReplayFirstInputDelayFrame extends ReplayBaseSpanFrame {
-  data: FirstInputDelayData;
+  data: WebVitalData;
   op: 'first-input-delay';
 }
 
 interface ReplayInteractionToNextPaintFrame extends ReplayBaseSpanFrame {
-  data: InteractionToNextPaintData;
+  data: WebVitalData;
   op: 'interaction-to-next-paint';
 }
 

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

@@ -6,14 +6,11 @@ import type {
   AllPerformanceEntry,
   AllPerformanceEntryData,
   ExperimentalPerformanceResourceTiming,
-  LargestContentfulPaintData,
-  CumulativeLayoutShiftData,
-  FirstInputDelayData,
-  InteractionToNextPaintData,
   NavigationData,
   PaintData,
   ReplayPerformanceEntry,
   ResourceData,
+  WebVitalData,
 } from '../types';
 
 // Map entryType -> function to normalize data for event
@@ -148,114 +145,71 @@ function createResourceEntry(
  */
 export function getLargestContentfulPaint(metric: {
   value: number;
+  rating: 'good' | 'needs-improvement' | 'poor';
   entries: PerformanceEntry[];
-}): ReplayPerformanceEntry<LargestContentfulPaintData> {
-  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<LargestContentfulPaintData> = {
-    type: 'web-vital',
-    name: 'largest-contentful-paint',
-    start: end,
-    end,
-    data: {
-      value,
-      size: value,
-      nodeId: element ? record.mirror.getId(element) : undefined,
-    },
-  };
-
-  return data;
+}): ReplayPerformanceEntry<WebVitalData> {
+  return getWebVital(metric, 'largest-contentful-paint');
 }
 
 /**
  * Add a CLS event to the replay based on a CLS metric.
  */
 export function getCumulativeLayoutShift(metric: {
   value: number;
+  rating: 'good' | 'needs-improvement' | 'poor';
   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;
+}): ReplayPerformanceEntry<WebVitalData> {
+  return getWebVital(metric, 'cumulative-layout-shift');
 }
 
 /**
  * Add a FID event to the replay based on a FID metric.
  */
 export function getFirstInputDelay(metric: {
   value: number;
+  rating: 'good' | 'needs-improvement' | 'poor';
   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;
+}): ReplayPerformanceEntry<WebVitalData> {
+  return getWebVital(metric, 'first-input-delay');
 }
 
 /**
  * Add an INP event to the replay based on an INP metric.
  */
 export function getInteractionToNextPaint(metric: {
   value: number;
+  rating: 'good' | 'needs-improvement' | 'poor';
+  entries: PerformanceEntry[];
+}): ReplayPerformanceEntry<WebVitalData> {
+  return getWebVital(metric, 'interaction-to-next-paint');
+}
+
+/**
+ * Add an web vital event to the replay based on the web vital metric.
+ */
+export function getWebVital(metric: {
+  value: number;
+  rating: 'good' | 'needs-improvement' | 'poor';
   entries: PerformanceEntry[];
-}): ReplayPerformanceEntry<InteractionToNextPaintData> {
+}, name: string): ReplayPerformanceEntry<WebVitalData> {
   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 rating = metric.rating;
 
   const end = getAbsoluteTime(value);
 
-  const data: ReplayPerformanceEntry<InteractionToNextPaintData> = {
+  const data: ReplayPerformanceEntry<WebVitalData> = {
     type: 'web-vital',
-    name: 'interaction-to-next-paint',
+    name,
     start: end,
     end,
     data: {
       value,
       size: value,
+      rating,
       nodeId: element ? record.mirror.getId(element) : undefined,
     },
   };