ref(replay): refactor replayerStepper to be called less

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

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

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

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

@@ -0,0 +1,72 @@
+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 = {
+  /**
+   * Offsets where we should stop and take a snapshot of the rendered HTML
+   */
+  offsetMsToStopAt: number[];
+
+  /**
+   * The rrweb events that constitute the replay
+   */
+  rrwebEvents: RecordingFrame[] | undefined;
+
+  /**
+   * The replay startTimestampMs
+   */
+  startTimestampMs: number;
+};
+
+async function extractPageHtml({
+  offsetMsToStopAt,
+  rrwebEvents,
+  startTimestampMs,
+}: Args): Promise<[number, string][]> {
+  const frames: ReplayFrame[] = offsetMsToStopAt.map(offsetMs => ({
+    offsetMs,
+    timestamp: new Date(startTimestampMs + offsetMs),
+    timestampMs: startTimestampMs + offsetMs,
+  })) as ReplayFrame[]; // TODO Don't smash types into `as ReplayFrame[]`, instead make the object really conform
+  const results = await replayerStepper<ReplayFrame, string>({
+    frames,
+    rrwebEvents,
+    startTimestampMs,
+    visitFrameCallbacks: {
+      extractPageHtml: {
+        shouldVisitFrame: () => {
+          // Visit all the timestamps (converted to frames) that were passed in above
+          return true;
+        },
+        onVisitFrame: (frame, collection, replayer) => {
+          const doc = replayer.getMirror().getNode(1);
+          const html = (doc as Document)?.body.outerHTML ?? '';
+          collection.set(frame, html);
+        },
+      },
+    },
+  });
+  return Array.from(results.extractPageHtml.entries()).map(([frame, html]) => {
+    return [frame.offsetMs, html];
+  });
+}
+
+interface Props {
+  offsetMsToStopAt: number[];
+  replay: ReplayReader | null;
+}
+
+export default function useExtractedPageHtml({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}
+  );
+}