ref(replay): Refactor extractDomNodes stepper strategy into extractDomNodes.tsx (#80810)

Just wanted to move this replayStepper strategy outside of the
ReplayReader class. It's a big file that contains the class, and most of
the other stepper stuff isn't in here.

Author: ryan953

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

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

static/app/utils/replays/extractHtml.tsx renamed to static/app/utils/replays/extractDomNodes.tsx

@@ -1,6 +1,7 @@
 import type {Mirror} from '@sentry-internal/rrweb-snapshot';
 
 import type {ReplayFrame} from 'sentry/utils/replays/types';
+import {getNodeIds} from 'sentry/utils/replays/types';
 import constructSelector from 'sentry/views/replays/deadRageClick/constructSelector';
 
 export type Extraction = {
@@ -10,7 +11,27 @@ export type Extraction = {
   timestamp: number;
 };
 
-export default function extractHtmlAndSelector(
+const extractDomNodes = {
+  shouldVisitFrame: frame => {
+    const nodeIds = getNodeIds(frame);
+    return nodeIds.filter(nodeId => nodeId !== -1).length > 0;
+  },
+  onVisitFrame: (frame, collection, replayer) => {
+    const mirror = replayer.getMirror();
+    const nodeIds = getNodeIds(frame);
+    const {html, selectors} = extractHtmlAndSelector((nodeIds ?? []) as number[], mirror);
+    collection.set(frame as ReplayFrame, {
+      frame,
+      html,
+      selectors,
+      timestamp: frame.timestampMs,
+    });
+  },
+};
+
+export default extractDomNodes;
+
+function extractHtmlAndSelector(
   nodeIds: number[],
   mirror: Mirror
 ): {html: string[]; selectors: Map<number, string>} {

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

@@ -1,5 +1,5 @@
 import {useQuery, type UseQueryResult} from 'sentry/utils/queryClient';
-import type {Extraction} from 'sentry/utils/replays/extractHtml';
+import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
 
@@ -10,9 +10,7 @@ export default function useExtractDomNodes({
 }): UseQueryResult<Map<ReplayFrame, Extraction>> {
   return useQuery({
     queryKey: ['getDomNodes', replay],
-    queryFn: () => {
-      return replay?.getExtractDomNodes();
-    },
+    queryFn: () => replay?.getExtractDomNodes(),
     enabled: Boolean(replay),
     gcTime: Infinity,
   });

static/app/utils/replays/replayReader.tsx

@@ -6,7 +6,7 @@ import {defined} from 'sentry/utils';
 import domId from 'sentry/utils/domId';
 import localStorageWrapper from 'sentry/utils/localStorage';
 import clamp from 'sentry/utils/number/clamp';
-import extractHtmlandSelector from 'sentry/utils/replays/extractHtml';
+import extractDomNodes from 'sentry/utils/replays/extractDomNodes';
 import hydrateBreadcrumbs, {
   replayInitBreadcrumb,
 } from 'sentry/utils/replays/hydrateBreadcrumbs';
@@ -28,7 +28,6 @@ import type {
   MemoryFrame,
   OptionFrame,
   RecordingFrame,
-  ReplayFrame,
   serializedNodeWithId,
   SlowClickFrame,
   SpanFrame,
@@ -38,7 +37,6 @@ import type {
 import {
   BreadcrumbCategories,
   EventType,
-  getNodeIds,
   IncrementalSource,
   isCLSFrame,
   isConsoleFrame,
@@ -149,24 +147,6 @@ function removeDuplicateNavCrumbs(
   return otherBreadcrumbFrames.concat(uniqueNavCrumbs);
 }
 
-const extractDomNodes = {
-  shouldVisitFrame: frame => {
-    const nodeIds = getNodeIds(frame);
-    return nodeIds.filter(nodeId => nodeId !== -1).length > 0;
-  },
-  onVisitFrame: (frame, collection, replayer) => {
-    const mirror = replayer.getMirror();
-    const nodeIds = getNodeIds(frame);
-    const {html, selectors} = extractHtmlandSelector((nodeIds ?? []) as number[], mirror);
-    collection.set(frame as ReplayFrame, {
-      frame,
-      html,
-      selectors,
-      timestamp: frame.timestampMs,
-    });
-  },
-};
-
 export default class ReplayReader {
   static factory({
     attachments,

static/app/views/replays/detail/breadcrumbs/breadcrumbRow.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import BreadcrumbItem from 'sentry/components/replays/breadcrumbs/breadcrumbItem';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
-import type {Extraction} from 'sentry/utils/replays/extractHtml';
+import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
 import useCurrentHoverTime from 'sentry/utils/replays/playback/providers/useCurrentHoverTime';
 import type {ReplayFrame} from 'sentry/utils/replays/types';