From e5d157563e0493822c4aa8751dfb1f55217dfc5d Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 6 Sep 2024 17:11:53 -0400
Subject: [PATCH] fix(replays): Improve replay web vital types (#13602)

Removes optional types so that type mismatches would be caught by
typescript

Follow up to https://github.com/getsentry/sentry-javascript/pull/13573
---
 .../replay-internal/src/types/performance.ts     |  2 +-
 .../src/util/createPerformanceEntries.ts         | 16 +++++-----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/replay-internal/src/types/performance.ts b/packages/replay-internal/src/types/performance.ts
index b3dcab0e7dd7..f598581c93ab 100644
--- a/packages/replay-internal/src/types/performance.ts
+++ b/packages/replay-internal/src/types/performance.ts
@@ -114,7 +114,7 @@ export interface WebVitalData {
   /**
    * The layout shifts of a CLS metric
    */
-  attributions?: { value: number; nodeIds?: number[] }[];
+  attributions?: { value: number; nodeIds: number[] | undefined }[];
 }
 
 /**
diff --git a/packages/replay-internal/src/util/createPerformanceEntries.ts b/packages/replay-internal/src/util/createPerformanceEntries.ts
index 0c22ba73163a..c28e69caee00 100644
--- a/packages/replay-internal/src/util/createPerformanceEntries.ts
+++ b/packages/replay-internal/src/util/createPerformanceEntries.ts
@@ -58,11 +58,6 @@ interface LayoutShiftAttribution {
   currentRect: DOMRectReadOnly;
 }
 
-interface Attribution {
-  value: number;
-  nodeIds?: number[];
-}
-
 /**
  * Handler creater for web vitals
  */
@@ -206,7 +201,7 @@ function isLayoutShift(entry: PerformanceEntry): entry is LayoutShift {
  * Add a CLS event to the replay based on a CLS metric.
  */
 export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry<WebVitalData> {
-  const layoutShifts: Attribution[] = [];
+  const layoutShifts: WebVitalData['attributions'] = [];
   const nodes: Node[] = [];
   for (const entry of metric.entries) {
     if (isLayoutShift(entry)) {
@@ -220,9 +215,10 @@ export function getCumulativeLayoutShift(metric: Metric): ReplayPerformanceEntry
           }
         }
       }
-      layoutShifts.push({ value: entry.value, nodeIds });
+      layoutShifts.push({ value: entry.value, nodeIds: nodeIds.length ? nodeIds : undefined });
     }
   }
+
   return getWebVital(metric, 'cumulative-layout-shift', nodes, layoutShifts);
 }
 
@@ -251,14 +247,14 @@ function getWebVital(
   metric: Metric,
   name: string,
   nodes: Node[] | undefined,
-  attributions?: Attribution[],
+  attributions?: WebVitalData['attributions'],
 ): ReplayPerformanceEntry<WebVitalData> {
   const value = metric.value;
   const rating = metric.rating;
 
   const end = getAbsoluteTime(value);
 
-  const data: ReplayPerformanceEntry<WebVitalData> = {
+  return {
     type: 'web-vital',
     name,
     start: end,
@@ -271,6 +267,4 @@ function getWebVital(
       attributions,
     },
   };
-
-  return data;
 }