chore(replay): Improve replay type (#78228)

Follow up to #78216 (comment)
getsentry · Sep 26, 2024 · 2fec4ff · 2fec4ff
1 parent 0bac3a4
commit 2fec4ff
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 22 deletions.
diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx
@@ -22,7 +22,6 @@ import {space} from 'sentry/styles/space';
 import type {Extraction} from 'sentry/utils/replays/extractHtml';
 import {getReplayDiffOffsetsFromFrame} from 'sentry/utils/replays/getDiffTimestamps';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
-import useExtractDomNodes from 'sentry/utils/replays/hooks/useExtractDomNodes';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 import type {
   ErrorFrame,
@@ -104,23 +103,30 @@ function BreadcrumbItem({
   }, [description, expandPaths, onInspectorExpanded]);
 
   const renderComparisonButton = useCallback(() => {
-    return isBreadcrumbFrame(frame) && isHydrationErrorFrame(frame) ? (
+    return isBreadcrumbFrame(frame) && isHydrationErrorFrame(frame) && replay ? (
       <CrumbHydrationButton replay={replay} frame={frame} />
     ) : null;
   }, [frame, replay]);
 
   const renderWebVital = useCallback(() => {
     return isSpanFrame(frame) && isWebVitalFrame(frame) ? (
       <WebVitalData
-        replay={replay}
+        selectors={extraction?.selectors}
         frame={frame}
         expandPaths={expandPaths}
         onInspectorExpanded={onInspectorExpanded}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       />
     ) : null;
-  }, [expandPaths, frame, onInspectorExpanded, onMouseEnter, onMouseLeave, replay]);
+  }, [
+    expandPaths,
+    extraction?.selectors,
+    frame,
+    onInspectorExpanded,
+    onMouseEnter,
+    onMouseLeave,
+  ]);
 
   const renderCodeSnippet = useCallback(() => {
     return (
@@ -221,7 +227,7 @@ function BreadcrumbItem({
 }
 
 function WebVitalData({
-  replay,
+  selectors,
   frame,
   expandPaths,
   onInspectorExpanded,
@@ -233,11 +239,8 @@ function WebVitalData({
   onInspectorExpanded: (path: string, expandedState: Record<string, boolean>) => void;
   onMouseEnter: MouseCallback;
   onMouseLeave: MouseCallback;
-  replay: ReplayReader | null;
+  selectors: Map<number, string> | undefined;
 }) {
-  const {data: frameToExtraction} = useExtractDomNodes({replay});
-  const selectors = frameToExtraction?.get(frame)?.selectors;
-
   const webVitalData = {value: frame.data.value};
   if (isCLSFrame(frame) && frame.data.attributions && selectors) {
     const layoutShifts: {[x: string]: ReactNode[]}[] = [];
@@ -277,7 +280,7 @@ function WebVitalData({
     if (layoutShifts.length) {
       webVitalData['Layout shifts'] = layoutShifts;
     }
-  } else if (selectors?.size) {
+  } else if (selectors) {
     selectors.forEach((key, value) => {
       webVitalData[key] = (
         <span
@@ -317,7 +320,7 @@ function CrumbHydrationButton({
   frame,
 }: {
   frame: HydrationErrorFrame;
-  replay: ReplayReader | null;
+  replay: ReplayReader;
 }) {
   const {leftOffsetMs, rightOffsetMs} = getReplayDiffOffsetsFromFrame(replay, frame);
 

diff --git a/static/app/components/replays/breadcrumbs/openReplayComparisonButton.tsx b/static/app/components/replays/breadcrumbs/openReplayComparisonButton.tsx
@@ -15,7 +15,7 @@ const LazyComparisonModal = lazy(
 interface Props {
   children: ReactNode;
   leftOffsetMs: number;
-  replay: null | ReplayReader;
+  replay: ReplayReader;
   rightOffsetMs: number;
   surface: string;
   size?: ButtonProps['size'];

diff --git a/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx b/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx
@@ -14,7 +14,7 @@ import {OrganizationContext} from 'sentry/views/organizationContext';
 interface Props extends ModalRenderProps {
   leftOffsetMs: number;
   organization: Organization;
-  replay: null | ReplayReader;
+  replay: ReplayReader;
   rightOffsetMs: number;
 }
 

diff --git a/static/app/components/replays/diff/replayDiffChooser.tsx b/static/app/components/replays/diff/replayDiffChooser.tsx
@@ -11,7 +11,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 
 interface Props {
   leftOffsetMs: number;
-  replay: null | ReplayReader;
+  replay: ReplayReader;
   rightOffsetMs: number;
   defaultTab?: DiffType;
 }

diff --git a/static/app/components/replays/diff/replaySideBySideImageDiff.tsx b/static/app/components/replays/diff/replaySideBySideImageDiff.tsx
@@ -12,7 +12,7 @@ import type ReplayReader from 'sentry/utils/replays/replayReader';
 
 interface Props {
   leftOffsetMs: number;
-  replay: null | ReplayReader;
+  replay: ReplayReader;
   rightOffsetMs: number;
 }
 

diff --git a/static/app/components/replays/diff/replaySliderDiff.tsx b/static/app/components/replays/diff/replaySliderDiff.tsx
@@ -19,7 +19,7 @@ import {useResizableDrawer} from 'sentry/utils/useResizableDrawer';
 
 interface Props {
   leftOffsetMs: number;
-  replay: null | ReplayReader;
+  replay: ReplayReader;
   rightOffsetMs: number;
   minHeight?: `${number}px` | `${number}%`;
 }
@@ -75,7 +75,7 @@ function DiffSides({
   width,
 }: {
   leftOffsetMs: number;
-  replay: ReplayReader | null;
+  replay: ReplayReader;
   rightOffsetMs: number;
   viewDimensions: {height: number; width: number};
   width: string | undefined;

diff --git a/static/app/components/replays/diff/replayTextDiff.tsx b/static/app/components/replays/diff/replayTextDiff.tsx
@@ -12,7 +12,7 @@ import type ReplayReader from 'sentry/utils/replays/replayReader';
 
 interface Props {
   leftOffsetMs: number;
-  replay: null | ReplayReader;
+  replay: ReplayReader;
   rightOffsetMs: number;
 }
 

diff --git a/static/app/utils/replays/playback/providers/replayPlayerEventsContext.tsx b/static/app/utils/replays/playback/providers/replayPlayerEventsContext.tsx
@@ -10,11 +10,9 @@ export function ReplayPlayerEventsContextProvider({
   replay,
 }: {
   children: React.ReactNode;
-  replay: ReplayReader | null;
+  replay: ReplayReader;
 }) {
-  return (
-    <context.Provider value={replay?.getRRWebFrames() ?? []}>{children}</context.Provider>
-  );
+  return <context.Provider value={replay.getRRWebFrames()}>{children}</context.Provider>;
 }
 
 export function useReplayPlayerEvents() {