From ae2ae3e74173b621d62e99306915ae3ebe1239ec Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 15 Nov 2024 14:31:16 +0800 Subject: [PATCH 1/2] ref(replay): Refactor extractDomNodes stepper strategy into extractDomNodes.tsx --- static/app/utils/replays/extractHtml.tsx | 23 ++++++++++++++++++- .../replays/hooks/useExtractDomNodes.tsx | 4 +--- static/app/utils/replays/replayReader.tsx | 22 +----------------- 3 files changed, 24 insertions(+), 25 deletions(-) diff --git a/static/app/utils/replays/extractHtml.tsx b/static/app/utils/replays/extractHtml.tsx index aedc99f40d6a1a..2c6b74ee7bbaf1 100644 --- a/static/app/utils/replays/extractHtml.tsx +++ b/static/app/utils/replays/extractHtml.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} { diff --git a/static/app/utils/replays/hooks/useExtractDomNodes.tsx b/static/app/utils/replays/hooks/useExtractDomNodes.tsx index 2d0dfbcc8e13ac..d9a4fe65872061 100644 --- a/static/app/utils/replays/hooks/useExtractDomNodes.tsx +++ b/static/app/utils/replays/hooks/useExtractDomNodes.tsx @@ -10,9 +10,7 @@ export default function useExtractDomNodes({ }): UseQueryResult> { return useQuery({ queryKey: ['getDomNodes', replay], - queryFn: () => { - return replay?.getExtractDomNodes(); - }, + queryFn: () => replay?.getExtractDomNodes(), enabled: Boolean(replay), gcTime: Infinity, }); diff --git a/static/app/utils/replays/replayReader.tsx b/static/app/utils/replays/replayReader.tsx index fa08f69d7a14bd..e2fda40bd1c5a9 100644 --- a/static/app/utils/replays/replayReader.tsx +++ b/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/extractHtml'; 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, From 2752859028c8bfac3fffda148cf341542c57e61f Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Fri, 15 Nov 2024 14:35:03 +0800 Subject: [PATCH 2/2] rename file --- static/app/components/replays/breadcrumbs/breadcrumbItem.tsx | 2 +- .../app/utils/replays/{extractHtml.tsx => extractDomNodes.tsx} | 0 static/app/utils/replays/hooks/useExtractDomNodes.tsx | 2 +- static/app/utils/replays/replayReader.tsx | 2 +- static/app/views/replays/detail/breadcrumbs/breadcrumbRow.tsx | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) rename static/app/utils/replays/{extractHtml.tsx => extractDomNodes.tsx} (100%) diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx index 084f0e15310f57..c23ad1fe73963f 100644 --- a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx +++ b/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'; diff --git a/static/app/utils/replays/extractHtml.tsx b/static/app/utils/replays/extractDomNodes.tsx similarity index 100% rename from static/app/utils/replays/extractHtml.tsx rename to static/app/utils/replays/extractDomNodes.tsx diff --git a/static/app/utils/replays/hooks/useExtractDomNodes.tsx b/static/app/utils/replays/hooks/useExtractDomNodes.tsx index d9a4fe65872061..6a676364c119f4 100644 --- a/static/app/utils/replays/hooks/useExtractDomNodes.tsx +++ b/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'; diff --git a/static/app/utils/replays/replayReader.tsx b/static/app/utils/replays/replayReader.tsx index e2fda40bd1c5a9..0ea2165beaf490 100644 --- a/static/app/utils/replays/replayReader.tsx +++ b/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 extractDomNodes from 'sentry/utils/replays/extractHtml'; +import extractDomNodes from 'sentry/utils/replays/extractDomNodes'; import hydrateBreadcrumbs, { replayInitBreadcrumb, } from 'sentry/utils/replays/hydrateBreadcrumbs'; diff --git a/static/app/views/replays/detail/breadcrumbs/breadcrumbRow.tsx b/static/app/views/replays/detail/breadcrumbs/breadcrumbRow.tsx index f043f8d08e4e05..abb56d5e362a25 100644 --- a/static/app/views/replays/detail/breadcrumbs/breadcrumbRow.tsx +++ b/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';