ref(replay): Consistently call useReplayReader() to get the ReplayReader instance (#95958)

There should only be one way to get the ReplayReader instance, this is
it.
The previous hook `useReplayContext()` was doing everything, and this
removes on job from it's list which will make it easier to
replace/breakup in followups.

Author: ryan953

static/app/components/events/eventReplay/replayPreviewPlayer.tsx

@@ -22,6 +22,7 @@ import {space} from 'sentry/styles/space';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
 import useMarkReplayViewed from 'sentry/utils/replays/hooks/useMarkReplayViewed';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useParams} from 'sentry/utils/useParams';
 import {useRoutes} from 'sentry/utils/useRoutes';
@@ -57,7 +58,8 @@ export default function ReplayPreviewPlayer({
   const routes = useRoutes();
   const organization = useOrganization();
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
-  const {replay, currentTime, isFetching, isFinished, isPlaying, isVideoReplay} =
+  const replay = useReplayReader();
+  const {currentTime, isFetching, isFinished, isPlaying, isVideoReplay} =
     useReplayContext();
 
   const fullscreenRef = useRef<HTMLDivElement | null>(null);

static/app/components/performance/waterfall/row.tsx

@@ -5,6 +5,7 @@ import {ROW_HEIGHT} from 'sentry/components/performance/waterfall/constants';
 import {getBackgroundColor} from 'sentry/components/performance/waterfall/utils';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import toPercent from 'sentry/utils/number/toPercent';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import useCurrentHoverTime from 'sentry/utils/replays/playback/providers/useCurrentHoverTime';
 
 interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -63,7 +64,8 @@ export const RowCell = styled('div')<RowCellProps>`
 `;
 
 export function RowReplayTimeIndicators() {
-  const {currentTime, replay} = useReplayContext();
+  const replay = useReplayReader();
+  const {currentTime} = useReplayContext();
   const [currentHoverTime] = useCurrentHoverTime();
   const durationMs = replay?.getDurationMs();
 

static/app/components/replays/breadcrumbs/breadcrumbItem.tsx

@@ -9,13 +9,13 @@ import {BreadcrumbComparisonButton} from 'sentry/components/replays/breadcrumbs/
 import {BreadcrumbDescription} from 'sentry/components/replays/breadcrumbs/breadcrumbDescription';
 import {BreadcrumbIssueLink} from 'sentry/components/replays/breadcrumbs/breadcrumbIssueLink';
 import {BreadcrumbWebVital} from 'sentry/components/replays/breadcrumbs/breadcrumbWebVital';
-import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {Timeline} from 'sentry/components/timeline';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
 import useExtractDomNodes from 'sentry/utils/replays/hooks/useExtractDomNodes';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
 import {isErrorFrame} from 'sentry/utils/replays/types';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -61,7 +61,7 @@ function BreadcrumbItem({
   const theme = useTheme();
   const {colorGraphicsToken, description, title, icon} = getFrameDetails(frame);
   const colorHex = theme.tokens.graphics[colorGraphicsToken];
-  const {replay} = useReplayContext();
+  const replay = useReplayReader();
   const organization = useOrganization();
   const {data: extraction, isPending} = useExtractDomNodes({
     replay,

static/app/components/replays/breadcrumbs/replayTimeline.tsx

@@ -16,10 +16,12 @@ import {useReplayContext} from 'sentry/components/replays/replayContext';
 import divide from 'sentry/utils/number/divide';
 import toPercent from 'sentry/utils/number/toPercent';
 import useTimelineScale from 'sentry/utils/replays/hooks/useTimelineScale';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import {useDimensions} from 'sentry/utils/useDimensions';
 
 export default function ReplayTimeline() {
-  const {replay, currentTime} = useReplayContext();
+  const replay = useReplayReader();
+  const {currentTime} = useReplayContext();
   const [timelineScale] = useTimelineScale();
 
   const panelRef = useRef<HTMLDivElement>(null);

static/app/components/replays/canvasSupportNotice.tsx

@@ -8,6 +8,7 @@ import {IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import useDismissAlert from 'sentry/utils/useDismissAlert';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
@@ -20,7 +21,8 @@ const LOCAL_STORAGE_KEY = 'replay-canvas-supported';
 export function CanvasSupportNotice() {
   const organization = useOrganization();
   const {dismiss, isDismissed} = useDismissAlert({key: LOCAL_STORAGE_KEY});
-  const {isFetching, replay} = useReplayContext();
+  const replay = useReplayReader();
+  const {isFetching} = useReplayContext();
   const projectId = replay?.getReplay().project_id;
   const {needsUpdate} = useProjectSdkNeedsUpdate({
     minVersion: '7.98.0',

static/app/components/replays/player/replayCurrentTime.tsx

@@ -5,6 +5,7 @@ import Duration from 'sentry/components/duration/duration';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import useReplayCurrentTime from 'sentry/utils/replays/playback/hooks/useReplayCurrentTime';
 import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import useOrganization from 'sentry/utils/useOrganization';
 
 export default function ReplayCurrentTime() {
@@ -25,7 +26,8 @@ function ReplayCurrentTimeNew() {
 }
 
 function OriginalReplayCurrentTime() {
-  const {currentTime, replay} = useReplayContext();
+  const replay = useReplayReader();
+  const {currentTime} = useReplayContext();
   const [prefs] = useReplayPrefs();
   const timestampType = prefs.timestampType;
   const startTimestamp = replay?.getStartTimestampMs() ?? 0;

static/app/components/replays/player/replayPlayer.tsx

@@ -39,7 +39,10 @@ function useReplayerInstance() {
       return () => {};
     }
 
-    const webFrames = replay.getRRWebFrames();
+    const webFrames = replay?.getRRWebFrames();
+    if (!webFrames) {
+      return () => {};
+    }
 
     const replayer = new Replayer(webFrames, {
       root,

static/app/components/replays/player/scrubber.tsx

@@ -14,6 +14,7 @@ import divide from 'sentry/utils/number/divide';
 import toPercent from 'sentry/utils/number/toPercent';
 import useTimelineScale from 'sentry/utils/replays/hooks/useTimelineScale';
 import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import useCurrentHoverTime from 'sentry/utils/replays/playback/providers/useCurrentHoverTime';
 
 type Props = {
@@ -22,7 +23,8 @@ type Props = {
 };
 
 function Scrubber({className, showZoomIndicators = false}: Props) {
-  const {replay, currentTime, setCurrentTime} = useReplayContext();
+  const replay = useReplayReader();
+  const {currentTime, setCurrentTime} = useReplayContext();
   const [prefs] = useReplayPrefs();
   const timestampType = prefs.timestampType;
   const [currentHoverTime] = useCurrentHoverTime();

static/app/components/replays/player/useScrubberMouseTracking.tsx

@@ -3,6 +3,7 @@ import {useCallback} from 'react';
 
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import divide from 'sentry/utils/number/divide';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import useCurrentHoverTime from 'sentry/utils/replays/playback/providers/useCurrentHoverTime';
 import useMouseTracking from 'sentry/utils/useMouseTracking';
 
@@ -11,7 +12,7 @@ type Opts<T extends Element> = {
 };
 
 export function useScrubberMouseTracking<T extends Element>({elem}: Opts<T>) {
-  const {replay} = useReplayContext();
+  const replay = useReplayReader();
   const [, setCurrentHoverTime] = useCurrentHoverTime();
   const durationMs = replay?.getDurationMs();
 
@@ -45,7 +46,8 @@ export function useTimelineScrubberMouseTracking<T extends Element>(
   {elem}: Opts<T>,
   scale: number
 ) {
-  const {replay, currentTime} = useReplayContext();
+  const replay = useReplayReader();
+  const {currentTime} = useReplayContext();
   const [, setCurrentHoverTime] = useCurrentHoverTime();
   const durationMs = replay?.getDurationMs();
 

static/app/components/replays/preferences/replayPreferenceDropdown.tsx

@@ -8,6 +8,7 @@ import {IconSettings} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import formatDuration from 'sentry/utils/duration/formatDuration';
 import {useReplayPrefs} from 'sentry/utils/replays/playback/providers/replayPreferencesContext';
+import {useReplayReader} from 'sentry/utils/replays/playback/providers/replayReaderProvider';
 import {toTitleCase} from 'sentry/utils/string/toTitleCase';
 
 const timestampOptions: Array<'relative' | 'absolute'> = ['relative', 'absolute'];
@@ -22,7 +23,8 @@ export default function ReplayPreferenceDropdown({
   isLoading?: boolean;
 }) {
   const [prefs, setPrefs] = useReplayPrefs();
-  const {isFetching, replay} = useReplayContext();
+  const replay = useReplayReader();
+  const {isFetching} = useReplayContext();
 
   const SKIP_OPTION_VALUE = 'skip';