feat(replay): Web Vital Breadcrumb Design (#76320)

Implements the newest web vital breadcrumbs design:
https://www.figma.com/design/bZIT1O93bdxTNbNWDUvCyQ/Specs%3A-Breadcrumbs-%26-Web-Vitals?node-id=277-336&node-type=CANVAS&t=ccSNvPkjFTZWWpDY-0

For web vitals, `nodeId` was changed to `nodeIds`, which means there
could be multiple elements associated with a breadcrumb item.
Highlighting and code snippet extraction were updated to accept multiple
`nodeIds`. When hovering over a web vital breadcrumb, all the associated
elements will be highlighted, and when hovering over a selector, only
that associated element would be highlighted.

Since the SDK changes have not been merged and released yet, the CLS web
vital is currently using web vitals to show what they would look like.


https://github.com/user-attachments/assets/df881120-ddff-4b74-a9e7-6fb1c17ae04e

Closes #69881

---------

Co-authored-by: Ryan Albrecht <[email protected]>

Author: c298lee

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

@@ -1,9 +1,10 @@
-import type {CSSProperties, MouseEvent} from 'react';
+import type {CSSProperties, ReactNode} from 'react';
 import {isValidElement, memo, useCallback} from 'react';
 import styled from '@emotion/styled';
 import beautify from 'js-beautify';
 
 import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
+import {Button} from 'sentry/components/button';
 import {CodeSnippet} from 'sentry/components/codeSnippet';
 import {Flex} from 'sentry/components/container/flex';
 import ErrorBoundary from 'sentry/components/errorBoundary';
@@ -13,6 +14,7 @@ import PanelItem from 'sentry/components/panels/panelItem';
 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 {useHasNewTimelineUI} from 'sentry/components/timeline/utils';
 import {Tooltip} from 'sentry/components/tooltip';
@@ -21,37 +23,37 @@ import {space} from 'sentry/styles/space';
 import type {Extraction} from 'sentry/utils/replays/extractHtml';
 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,
   FeedbackFrame,
   HydrationErrorFrame,
   ReplayFrame,
+  WebVitalFrame,
 } from 'sentry/utils/replays/types';
 import {
   isBreadcrumbFrame,
   isErrorFrame,
   isFeedbackFrame,
   isHydrationErrorFrame,
+  isSpanFrame,
+  isWebVitalFrame,
 } from 'sentry/utils/replays/types';
 import type {Color} from 'sentry/utils/theme';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromSlug from 'sentry/utils/useProjectFromSlug';
 import IconWrapper from 'sentry/views/replays/detail/iconWrapper';
 import TimestampButton from 'sentry/views/replays/detail/timestampButton';
 
-type MouseCallback = (frame: ReplayFrame, e: React.MouseEvent<HTMLElement>) => void;
+type MouseCallback = (frame: ReplayFrame, nodeId?: number) => void;
 
 const FRAMES_WITH_BUTTONS = ['replay.hydrate-error'];
 
 interface Props {
   frame: ReplayFrame;
   onClick: null | MouseCallback;
-  onInspectorExpanded: (
-    path: string,
-    expandedState: Record<string, boolean>,
-    event: MouseEvent<HTMLDivElement>
-  ) => void;
+  onInspectorExpanded: (path: string, expandedState: Record<string, boolean>) => void;
   onMouseEnter: MouseCallback;
   onMouseLeave: MouseCallback;
   startTimestampMs: number;
@@ -105,15 +107,31 @@ function BreadcrumbItem({
     ) : null;
   }, [frame, replay]);
 
-  const renderCodeSnippet = useCallback(() => {
-    return extraction?.html ? (
-      <CodeContainer>
-        <CodeSnippet language="html" hideCopyButton>
-          {beautify.html(extraction?.html, {indent_size: 2})}
-        </CodeSnippet>
-      </CodeContainer>
+  const renderWebVital = useCallback(() => {
+    return isSpanFrame(frame) && isWebVitalFrame(frame) ? (
+      <WebVitalData
+        replay={replay}
+        frame={frame}
+        expandPaths={expandPaths}
+        onInspectorExpanded={onInspectorExpanded}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      />
     ) : null;
-  }, [extraction?.html]);
+  }, [expandPaths, frame, onInspectorExpanded, onMouseEnter, onMouseLeave, replay]);
+
+  const renderCodeSnippet = useCallback(() => {
+    return (
+      (!isSpanFrame(frame) || !isWebVitalFrame(frame)) &&
+      extraction?.html?.map(html => (
+        <CodeContainer key={html}>
+          <CodeSnippet language="html" hideCopyButton>
+            {beautify.html(html, {indent_size: 2})}
+          </CodeSnippet>
+        </CodeContainer>
+      ))
+    );
+  }, [extraction?.html, frame]);
 
   const renderIssueLink = useCallback(() => {
     return isErrorFrame(frame) || isFeedbackFrame(frame) ? (
@@ -143,13 +161,17 @@ function BreadcrumbItem({
         data-is-error-frame={isErrorFrame(frame)}
         style={style}
         className={className}
-        onClick={e => onClick?.(frame, e)}
-        onMouseEnter={e => onMouseEnter(frame, e)}
-        onMouseLeave={e => onMouseLeave(frame, e)}
+        onClick={event => {
+          event.stopPropagation();
+          onClick?.(frame);
+        }}
+        onMouseEnter={() => onMouseEnter(frame)}
+        onMouseLeave={() => onMouseLeave(frame)}
       >
         <ErrorBoundary mini>
           {renderDescription()}
           {renderComparisonButton()}
+          {renderWebVital()}
           {renderCodeSnippet()}
           {renderIssueLink()}
         </ErrorBoundary>
@@ -160,9 +182,12 @@ function BreadcrumbItem({
     <CrumbItem
       data-is-error-frame={isErrorFrame(frame)}
       as={onClick && !forceSpan ? 'button' : 'span'}
-      onClick={e => onClick?.(frame, e)}
-      onMouseEnter={e => onMouseEnter(frame, e)}
-      onMouseLeave={e => onMouseLeave(frame, e)}
+      onClick={event => {
+        event.stopPropagation();
+        onClick?.(frame);
+      }}
+      onMouseEnter={() => onMouseEnter(frame)}
+      onMouseLeave={() => onMouseLeave(frame)}
       style={style}
       className={className}
     >
@@ -184,6 +209,7 @@ function BreadcrumbItem({
             {renderDescription()}
           </Flex>
           {renderComparisonButton()}
+          {renderWebVital()}
           {renderCodeSnippet()}
           {renderIssueLink()}
         </CrumbDetails>
@@ -192,6 +218,100 @@ function BreadcrumbItem({
   );
 }
 
+function WebVitalData({
+  replay,
+  frame,
+  expandPaths,
+  onInspectorExpanded,
+  onMouseEnter,
+  onMouseLeave,
+}: {
+  expandPaths: string[] | undefined;
+  frame: WebVitalFrame;
+  onInspectorExpanded: (path: string, expandedState: Record<string, boolean>) => void;
+  onMouseEnter: MouseCallback;
+  onMouseLeave: MouseCallback;
+  replay: ReplayReader | null;
+}) {
+  const {data: frameToExtraction} = useExtractDomNodes({replay});
+  const selectors = frameToExtraction?.get(frame)?.selectors;
+
+  const webVitalData = {value: frame.data.value};
+  if (
+    frame.description === 'cumulative-layout-shift' &&
+    frame.data.attributions &&
+    selectors
+  ) {
+    const layoutShifts: {[x: string]: ReactNode[]}[] = [];
+    for (const attr of frame.data.attributions) {
+      const elements: ReactNode[] = [];
+      if ('nodeIds' in attr && Array.isArray(attr.nodeIds)) {
+        attr.nodeIds.forEach(nodeId => {
+          selectors.get(nodeId)
+            ? elements.push(
+                <span
+                  key={nodeId}
+                  onMouseEnter={() => onMouseEnter(frame, nodeId)}
+                  onMouseLeave={() => onMouseLeave(frame, nodeId)}
+                >
+                  <ValueObjectKey>{t('element')}</ValueObjectKey>
+                  <span>{': '}</span>
+                  <span>
+                    <SelectorButton>{selectors.get(nodeId)}</SelectorButton>
+                  </span>
+                </span>
+              )
+            : null;
+        });
+      }
+      // if we can't find the elements associated with the layout shift, we still show the score with element: unknown
+      if (!elements.length) {
+        elements.push(
+          <span>
+            <ValueObjectKey>{t('element')}</ValueObjectKey>
+            <span>{': '}</span>
+            <ValueNull>{t('unknown')}</ValueNull>
+          </span>
+        );
+      }
+      layoutShifts.push({[`score ${attr.value}`]: elements});
+    }
+    if (layoutShifts.length) {
+      webVitalData['Layout shifts'] = layoutShifts;
+    }
+  } else if (selectors?.size) {
+    selectors.forEach((key, value) => {
+      webVitalData[key] = (
+        <span
+          key={key}
+          onMouseEnter={() => onMouseEnter(frame, value)}
+          onMouseLeave={() => onMouseLeave(frame, value)}
+        >
+          <ValueObjectKey>{t('element')}</ValueObjectKey>
+          <span>{': '}</span>
+          <SelectorButton size="zero" borderless>
+            {key}
+          </SelectorButton>
+        </span>
+      );
+    });
+  }
+
+  return (
+    <StructuredEventData
+      initialExpandedPaths={expandPaths ?? []}
+      onToggleExpand={(expandedPaths, path) => {
+        onInspectorExpanded(
+          path,
+          Object.fromEntries(expandedPaths.map(item => [item, true]))
+        );
+      }}
+      data={webVitalData}
+      withAnnotatedText
+    />
+  );
+}
+
 function CrumbHydrationButton({
   replay,
   frame,
@@ -381,4 +501,27 @@ const CodeContainer = styled('div')`
   overflow: auto;
 `;
 
+const ValueObjectKey = styled('span')`
+  color: var(--prism-keyword);
+`;
+
+const ValueNull = styled('span')`
+  font-weight: ${p => p.theme.fontWeightBold};
+  color: var(--prism-property);
+`;
+
+const SelectorButton = styled(Button)`
+  background: none;
+  border: none;
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: ${p => p.theme.fontWeightNormal};
+  box-shadow: none;
+  font-size: ${p => p.theme.fontSizeSmall};
+  color: ${p => p.theme.subText};
+  margin: 0 ${space(0.5)};
+  height: auto;
+  min-height: auto;
+`;
+
 export default memo(BreadcrumbItem);

static/app/utils/replays/extractHtml.tsx

@@ -1,25 +1,72 @@
 import type {Mirror} from '@sentry-internal/rrweb-snapshot';
 
 import type {ReplayFrame} from 'sentry/utils/replays/types';
+import constructSelector from 'sentry/views/replays/deadRageClick/constructSelector';
 
 export type Extraction = {
   frame: ReplayFrame;
-  html: string | null;
+  html: string[];
+  selectors: Map<number, string>;
   timestamp: number;
 };
 
-export default function extractHtml(nodeId: number, mirror: Mirror): string | null {
-  const node = mirror.getNode(nodeId);
+export default function extractHtmlAndSelector(
+  nodeIds: number[],
+  mirror: Mirror
+): {html: string[]; selectors: Map<number, string>} {
+  const htmlStrings: string[] = [];
+  const selectors = new Map<number, string>();
+  for (const nodeId of nodeIds) {
+    const node = mirror.getNode(nodeId);
+    if (node) {
+      const html = extractHtml(node);
+      if (html) {
+        htmlStrings.push(html);
+      }
+
+      const selector = extractSelector(node);
+      if (selector) {
+        selectors.set(nodeId, selector);
+      }
+    }
+  }
+  return {html: htmlStrings, selectors};
+}
 
+function extractHtml(node: Node): string | null {
   const html =
-    (node && 'outerHTML' in node ? (node.outerHTML as string) : node?.textContent) || '';
+    ('outerHTML' in node ? (node.outerHTML as string) : node.textContent) || '';
   // Limit document node depth to 2
   let truncated = removeNodesAtLevel(html, 2);
   // If still very long and/or removeNodesAtLevel failed, truncate
   if (truncated.length > 1500) {
     truncated = truncated.substring(0, 1500);
   }
-  return truncated ? truncated : null;
+  if (truncated) {
+    return truncated;
+  }
+  return null;
+}
+
+function extractSelector(node: Node): string | null {
+  const element = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : null;
+
+  if (element) {
+    return constructSelector({
+      alt: element.attributes.getNamedItem('alt')?.nodeValue ?? '',
+      aria_label: element.attributes.getNamedItem('aria-label')?.nodeValue ?? '',
+      class: element.attributes.getNamedItem('class')?.nodeValue?.split(' ') ?? [],
+      component_name:
+        element.attributes.getNamedItem('data-sentry-component')?.nodeValue ?? '',
+      id: element.id,
+      role: element.attributes.getNamedItem('role')?.nodeValue ?? '',
+      tag: element.tagName.toLowerCase(),
+      testid: element.attributes.getNamedItem('data-test-id')?.nodeValue ?? '',
+      title: element.attributes.getNamedItem('title')?.nodeValue ?? '',
+    }).selector;
+  }
+
+  return null;
 }
 
 function removeChildLevel(max: number, collection: HTMLCollection, current: number = 0) {

static/app/utils/replays/getFrameDetails.tsx

@@ -286,31 +286,31 @@ const MAPPER_FOR_FRAME: Record<string, (frame) => Details> = {
       case 'good':
         return {
           color: 'green300',
-          description: tct('Good [value]ms', {
+          description: tct('[value]ms (Good)', {
             value: frame.data.value.toFixed(2),
           }),
           tabKey: TabKey.NETWORK,
-          title: toTitleCase(explodeSlug(frame.description)),
+          title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)),
           icon: <IconHappy size="xs" />,
         };
       case 'needs-improvement':
         return {
           color: 'yellow300',
-          description: tct('Meh [value]ms', {
+          description: tct('[value]ms (Meh)', {
             value: frame.data.value.toFixed(2),
           }),
           tabKey: TabKey.NETWORK,
-          title: toTitleCase(explodeSlug(frame.description)),
+          title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)),
           icon: <IconMeh size="xs" />,
         };
       default:
         return {
           color: 'red300',
-          description: tct('Poor [value]ms', {
+          description: tct('[value]ms (Poor)', {
             value: frame.data.value.toFixed(2),
           }),
           tabKey: TabKey.NETWORK,
-          title: toTitleCase(explodeSlug(frame.description)),
+          title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)),
           icon: <IconSad size="xs" />,
         };
     }