ref(replay): refactor replayerStepper calls to be memoized

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

@@ -18,7 +18,7 @@ import {useHasNewTimelineUI} from 'sentry/components/timeline/utils';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
+import type {Extraction} from 'sentry/utils/replays/extractHtml';
 import {getReplayDiffOffsetsFromFrame} from 'sentry/utils/replays/getDiffTimestamps';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
 import type ReplayReader from 'sentry/utils/replays/replayReader';

static/app/components/replays/diff/replayTextDiff.tsx

@@ -7,7 +7,7 @@ import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
 import SplitDiff from 'sentry/components/splitDiff';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import useExtractedPageHtml from 'sentry/utils/replays/hooks/useExtractedPageHtml';
+import useExtractPageHtml from 'sentry/utils/replays/hooks/useExtractPageHtml';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 
 interface Props {
@@ -16,8 +16,8 @@ interface Props {
   rightOffsetMs: number;
 }
 
-export function ReplayTextDiff({leftOffsetMs, replay, rightOffsetMs}: Props) {
-  const {data} = useExtractedPageHtml({
+export function ReplayTextDiff({replay, leftOffsetMs, rightOffsetMs}: Props) {
+  const {data} = useExtractPageHtml({
     replay,
     offsetMsToStopAt: [leftOffsetMs, rightOffsetMs],
   });

static/app/utils/replays/extractDomNodes.tsx → static/app/utils/replays/extractHtml.tsx

@@ -1,62 +1,14 @@
 import type {Mirror} from '@sentry-internal/rrweb-snapshot';
 
-import replayerStepper from 'sentry/utils/replays/replayerStepper';
-import {
-  getNodeId,
-  type RecordingFrame,
-  type ReplayFrame,
-} from 'sentry/utils/replays/types';
+import type {ReplayFrame} from 'sentry/utils/replays/types';
 
 export type Extraction = {
   frame: ReplayFrame;
   html: string | null;
   timestamp: number;
 };
 
-type Args = {
-  /**
-   * Frames where we should stop and extract html for a given dom node
-   */
-  frames: ReplayFrame[] | undefined;
-
-  /**
-   * The rrweb events that constitute the replay
-   */
-  rrwebEvents: RecordingFrame[] | undefined;
-
-  /**
-   * The replay start time, in ms
-   */
-  startTimestampMs: number;
-};
-
-export default function extractDomNodes({
-  frames,
-  rrwebEvents,
-  startTimestampMs,
-}: Args): Promise<Map<ReplayFrame, Extraction>> {
-  return replayerStepper({
-    frames,
-    rrwebEvents,
-    startTimestampMs,
-    shouldVisitFrame: frame => {
-      const nodeId = getNodeId(frame);
-      return nodeId !== undefined && nodeId !== -1;
-    },
-    onVisitFrame: (frame, collection, replayer) => {
-      const mirror = replayer.getMirror();
-      const nodeId = getNodeId(frame);
-      const html = extractHtml(nodeId as number, mirror);
-      collection.set(frame as ReplayFrame, {
-        frame,
-        html,
-        timestamp: frame.timestampMs,
-      });
-    },
-  });
-}
-
-function extractHtml(nodeId: number, mirror: Mirror): string | null {
+export default function extractHtml(nodeId: number, mirror: Mirror): string | null {
   const node = mirror.getNode(nodeId);
 
   const html =

static/app/utils/replays/hooks/useCountDomNodes.tsx

@@ -0,0 +1,26 @@
+import {useQuery, type UseQueryResult} from 'sentry/utils/queryClient';
+import type ReplayReader from 'sentry/utils/replays/replayReader';
+import type {RecordingFrame} from 'sentry/utils/replays/types';
+
+export type DomNodeChartDatapoint = {
+  added: number;
+  count: number;
+  endTimestampMs: number;
+  removed: number;
+  startTimestampMs: number;
+  timestampMs: number;
+};
+
+export default function useCountDomNodes({
+  replay,
+}: {
+  replay: null | ReplayReader;
+}): UseQueryResult<Map<RecordingFrame, DomNodeChartDatapoint>> {
+  return useQuery(
+    ['countDomNodes', replay],
+    () => {
+      return replay?.getCountDomNodes();
+    },
+    {enabled: Boolean(replay), cacheTime: Infinity}
+  );
+}

static/app/utils/replays/hooks/useExtractDomNodes.tsx

@@ -0,0 +1,18 @@
+import {useQuery, type UseQueryResult} from 'sentry/utils/queryClient';
+import type {Extraction} from 'sentry/utils/replays/extractHtml';
+import type ReplayReader from 'sentry/utils/replays/replayReader';
+import type {ReplayFrame} from 'sentry/utils/replays/types';
+
+export default function useExtractDomNodes({
+  replay,
+}: {
+  replay: null | ReplayReader;
+}): UseQueryResult<Map<ReplayFrame, Extraction>> {
+  return useQuery(
+    ['getDomNodes', replay],
+    () => {
+      return replay?.getExtractDomNodes();
+    },
+    {enabled: Boolean(replay), cacheTime: Infinity}
+  );
+}

static/app/utils/replays/extractPageHtml.tsx → static/app/utils/replays/hooks/useExtractPageHtml.tsx

@@ -1,4 +1,6 @@
+import {useQuery} from 'sentry/utils/queryClient';
 import replayerStepper from 'sentry/utils/replays/replayerStepper';
+import type ReplayReader from 'sentry/utils/replays/replayReader';
 import type {RecordingFrame, ReplayFrame} from 'sentry/utils/replays/types';
 
 type Args = {
@@ -18,7 +20,7 @@ type Args = {
   startTimestampMs: number;
 };
 
-export default async function extactPageHtml({
+async function extractPageHtml({
   offsetMsToStopAt,
   rrwebEvents,
   startTimestampMs,
@@ -32,11 +34,11 @@ export default async function extactPageHtml({
     frames,
     rrwebEvents,
     startTimestampMs,
-    shouldVisitFrame(_frame) {
+    shouldVisitFrame: () => {
       // Visit all the timestamps (converted to frames) that were passed in above
       return true;
     },
-    onVisitFrame(frame, collection, replayer) {
+    onVisitFrame: (frame, collection, replayer) => {
       const doc = replayer.getMirror().getNode(1);
       const html = (doc as Document)?.body.outerHTML ?? '';
       collection.set(frame, html);
@@ -46,3 +48,21 @@ export default async function extactPageHtml({
     return [frame.offsetMs, html];
   });
 }
+
+interface Props {
+  offsetMsToStopAt: number[];
+  replay: ReplayReader | null;
+}
+
+export default function useExtractPageHtml({replay, offsetMsToStopAt}: Props) {
+  return useQuery(
+    ['extactPageHtml', replay, offsetMsToStopAt],
+    () =>
+      extractPageHtml({
+        offsetMsToStopAt,
+        rrwebEvents: replay?.getRRWebFrames(),
+        startTimestampMs: replay?.getReplay().started_at.getTime() ?? 0,
+      }),
+    {enabled: Boolean(replay), cacheTime: Infinity}
+  );
+}