feat(replay): Change breadcrumbs to require click to view DOM nodes (#92229)

In replay details, change breadcrumbs to require a click to view the
extracted HTML. This is needed because the `replayerStepper` can still
cause perf issues because it is synchronous. I also think the HTML can
be a bit distracting when there are many breadcrumbs and some of the
info is duplicated.

Breadcrumbs list:

![image](https://github.com/user-attachments/assets/cac31990-51db-4c61-9f46-a056c3ff1716)

Once "View HTML" is clicked, the HTML will always be displayed (works w/
virtualization):

![image](https://github.com/user-attachments/assets/78ff2d69-bdb0-4a5f-ac72-7699e8b44250)

Timeline breadcrumbs are unaffected:

![image](https://github.com/user-attachments/assets/23642548-8452-4f12-9d1d-bb0d12c77ff7)

Closes #91331

Author: billyvg

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

@@ -28,6 +28,9 @@ describe('BreadcrumbItem', function () {
         onClick={mockClick}
         onInspectorExpanded={() => {}}
         startTimestampMs={MOCK_FRAME!.timestampMs}
+        allowShowSnippet={false}
+        onShowSnippet={() => {}}
+        showSnippet={false}
       />,
       {organization}
     );

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

@@ -1,5 +1,5 @@
 import type {CSSProperties, ReactNode} from 'react';
-import {isValidElement, useCallback} from 'react';
+import {isValidElement, useCallback, useEffect, useRef} from 'react';
 import styled from '@emotion/styled';
 import beautify from 'js-beautify';
 
@@ -9,16 +9,19 @@ import {Button} from 'sentry/components/core/button';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import Link from 'sentry/components/links/link';
+import Placeholder from 'sentry/components/placeholder';
 import {OpenReplayComparisonButton} from 'sentry/components/replays/breadcrumbs/openReplayComparisonButton';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {useReplayGroupContext} from 'sentry/components/replays/replayGroupContext';
 import StructuredEventData from 'sentry/components/structuredEventData';
 import {Timeline} from 'sentry/components/timeline';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import {getReplayDiffOffsetsFromFrame} from 'sentry/utils/replays/getDiffTimestamps';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
+import useExtractDomNodes from 'sentry/utils/replays/hooks/useExtractDomNodes';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 import type {
   ErrorFrame,
@@ -45,41 +48,91 @@ import {makeFeedbackPathname} from 'sentry/views/userFeedback/pathnames';
 type MouseCallback = (frame: ReplayFrame, nodeId?: number) => void;
 
 interface Props {
+  allowShowSnippet: boolean;
   frame: ReplayFrame;
   onClick: null | MouseCallback;
   onInspectorExpanded: OnExpandCallback;
   onMouseEnter: MouseCallback;
   onMouseLeave: MouseCallback;
+  onShowSnippet: () => void;
+  showSnippet: boolean;
   startTimestampMs: number;
   className?: string;
   expandPaths?: string[];
   extraction?: Extraction;
   ref?: React.Ref<HTMLDivElement>;
   style?: CSSProperties;
+  updateDimensions?: () => void;
 }
 
 function BreadcrumbItem({
   className,
-  extraction,
   frame,
   expandPaths,
   onClick,
   onInspectorExpanded,
   onMouseEnter,
   onMouseLeave,
+  showSnippet,
   startTimestampMs,
   style,
   ref,
+  onShowSnippet,
+  updateDimensions,
+  allowShowSnippet,
 }: Props) {
   const {color, description, title, icon} = getFrameDetails(frame);
   const {replay} = useReplayContext();
+  const organization = useOrganization();
+  const {data: extraction, isPending} = useExtractDomNodes({
+    replay,
+    frame,
+    enabled: showSnippet,
+  });
+
+  const prevExtractState = useRef(isPending);
+
+  useEffect(() => {
+    if (!updateDimensions) {
+      return;
+    }
+
+    if (isPending !== prevExtractState.current || showSnippet) {
+      prevExtractState.current = isPending;
+      updateDimensions();
+    }
+  }, [isPending, updateDimensions, showSnippet]);
+
+  const handleViewHtml = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      onShowSnippet();
+      e.preventDefault();
+      e.stopPropagation();
+      trackAnalytics('replay.view_html', {
+        organization,
+        breadcrumb_type: 'category' in frame ? frame.category : 'unknown',
+      });
+    },
+    [onShowSnippet, organization, frame]
+  );
 
   const renderDescription = useCallback(() => {
     return typeof description === 'string' ||
       (description !== undefined && isValidElement(description)) ? (
-      <Description title={description} showOnlyOnOverflow isHoverable>
-        {description}
-      </Description>
+      <DescriptionWrapper>
+        <Description title={description} showOnlyOnOverflow isHoverable>
+          {description}
+        </Description>
+
+        {allowShowSnippet &&
+          !showSnippet &&
+          frame.data?.nodeId !== undefined &&
+          (!isSpanFrame(frame) || !isWebVitalFrame(frame)) && (
+            <ViewHtmlButton priority="link" onClick={handleViewHtml} size="xs">
+              {t('View HTML')}
+            </ViewHtmlButton>
+          )}
+      </DescriptionWrapper>
     ) : (
       <Wrapper>
         <StructuredEventData
@@ -95,7 +148,15 @@ function BreadcrumbItem({
         />
       </Wrapper>
     );
-  }, [description, expandPaths, onInspectorExpanded]);
+  }, [
+    description,
+    expandPaths,
+    frame,
+    onInspectorExpanded,
+    showSnippet,
+    allowShowSnippet,
+    handleViewHtml,
+  ]);
 
   const renderComparisonButton = useCallback(() => {
     return isBreadcrumbFrame(frame) && isHydrationErrorFrame(frame) && replay ? (
@@ -124,8 +185,14 @@ function BreadcrumbItem({
   ]);
 
   const renderCodeSnippet = useCallback(() => {
+    if (showSnippet && isPending) {
+      return <Placeholder height="34px" />;
+    }
+
     return (
       (!isSpanFrame(frame) || !isWebVitalFrame(frame)) &&
+      !isPending &&
+      showSnippet &&
       extraction?.html?.map(html => (
         <CodeContainer key={html}>
           <CodeSnippet language="html" hideCopyButton>
@@ -134,7 +201,7 @@ function BreadcrumbItem({
         </CodeContainer>
       ))
     );
-  }, [extraction?.html, frame]);
+  }, [frame, isPending, extraction?.html, showSnippet]);
 
   const renderIssueLink = useCallback(() => {
     return isErrorFrame(frame) || isFeedbackFrame(frame) ? (
@@ -350,6 +417,16 @@ const Description = styled(Tooltip)`
   color: ${p => p.theme.subText};
 `;
 
+const DescriptionWrapper = styled('div')`
+  display: flex;
+  gap: ${space(1)};
+  justify-content: space-between;
+`;
+
+const ViewHtmlButton = styled(Button)`
+  white-space: nowrap;
+`;
+
 const StyledTimelineItem = styled(Timeline.Item)`
   width: 100%;
   position: relative;

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

@@ -76,8 +76,9 @@ function Event({
 
   const buttons = frames.map((frame, i) => (
     <BreadcrumbItem
+      allowShowSnippet={false}
       frame={frame}
-      extraction={undefined}
+      showSnippet={false}
       key={i}
       onClick={() => {
         onClickTimestamp(frame);
@@ -87,6 +88,7 @@ function Event({
       onMouseLeave={onMouseLeave}
       startTimestampMs={startTimestampMs}
       onInspectorExpanded={() => {}}
+      onShowSnippet={() => {}}
     />
   ));
   const title = <TooltipWrapper>{buttons}</TooltipWrapper>;

static/app/components/replays/replayContext.tsx

@@ -1,6 +1,7 @@
 import {createContext, useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import {Replayer, ReplayerEvents} from '@sentry-internal/rrweb';
+import type {Mirror} from '@sentry-internal/rrweb-snapshot';
 
 import useReplayHighlighting from 'sentry/components/replays/useReplayHighlighting';
 import {VideoReplayerWithInteractions} from 'sentry/components/replays/videoReplayerWithInteractions';
@@ -51,6 +52,11 @@ interface ReplayPlayerContextProps extends HighlightCallbacks {
    */
   fastForwardSpeed: number;
 
+  /**
+   * Returns the replay DOM mirror
+   */
+  getMirror: () => Mirror | null;
+
   /**
    * Set to true while the library is reconstructing the DOM
    */
@@ -132,6 +138,7 @@ const ReplayPlayerContext = createContext<ReplayPlayerContextProps>({
   setCurrentTime: () => {},
   setRoot: () => {},
   togglePlayPause: () => {},
+  getMirror: () => null,
 });
 
 type Props = {
@@ -611,6 +618,7 @@ export function Provider({
           restart,
           setCurrentTime,
           togglePlayPause,
+          getMirror: () => replayerRef.current?.getMirror() ?? null,
           ...value,
         }}
       >

static/app/utils/analytics/replayAnalyticsEvents.tsx

@@ -118,6 +118,9 @@ export type ReplayEventParameters = {
     fullscreen: boolean;
     user_email: string;
   };
+  'replay.view-html': {
+    breadcrumb_type: string;
+  };
 };
 
 type ReplayEventKey = keyof ReplayEventParameters;
@@ -151,4 +154,5 @@ export const replayEventMap: Record<ReplayEventKey, string | null> = {
   'replay.render-missing-replay-alert': 'Render Missing Replay Alert',
   'replay.search': 'Searched Replay',
   'replay.toggle-fullscreen': 'Toggled Replay Fullscreen',
+  'replay.view-html': 'Clicked "View HTML" in Replay Breadcrumb',
 };

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

@@ -1,20 +1,24 @@
-import {useQuery, type UseQueryResult} from 'sentry/utils/queryClient';
+import {useQuery} from 'sentry/utils/queryClient';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
 import type ReplayReader from 'sentry/utils/replays/replayReader';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
 
-export default function useExtractDomNodes({
-  replay,
-}: {
+interface Params {
+  enabled: boolean;
+  frame: ReplayFrame;
   replay: null | ReplayReader;
-}): UseQueryResult<Map<ReplayFrame, Extraction>> {
-  return useQuery({
-    queryKey: ['getDomNodes', replay],
+}
+
+export default function useExtractDomNodes({replay, frame, enabled = true}: Params) {
+  return useQuery<Extraction | null>({
+    queryKey: ['getDomNodes', frame, replay],
     // Note: we filter out `style` mutations due to perf issues.
     // We can do this as long as we only need the HTML and not need to
     // visualize the rendered elements
-    queryFn: () => replay?.getExtractDomNodes({withoutStyles: true}),
-    enabled: Boolean(replay),
+    queryFn: () => replay?.getDomNodesForFrame({frame}) ?? null,
+    enabled: Boolean(!replay?.isFetching() && enabled),
     gcTime: Infinity,
+    staleTime: Infinity,
+    retry: false,
   });
 }

static/app/utils/replays/replayReader.spec.tsx

@@ -567,7 +567,7 @@ describe('ReplayReader', () => {
         throw new Error('Failed to create ReplayReader instance');
       }
 
-      const result = reader.getRRWebFramesWithoutStyles();
+      const result = reader.getRRWebFramesForDomExtraction();
 
       expect(result).toEqual([
         {data: {node: {childNodes: [], tagName: 'html', type: 1}}, timestamp: 0, type: 2},