ref(replay): Refactor Replay Details>Console tab to use the new *Frames types (#53660)

Refactored to use the `*Frame` types.

Also, we are now also rendering custom breadcrumbs in the console tab!
see screen shot and `redux.action` rows.

| Note | Before | After |
| --- | --- | --- |
| Console Breadcrumbs |
![SCR-20230726-mcrc](https://github.com/getsentry/sentry/assets/187460/d30d0419-a0f3-4621-b91b-e0bc490f7327)
|
![SCR-20230726-mcsc](https://github.com/getsentry/sentry/assets/187460/1805793a-5f8d-4696-b83f-d7740931c4ea)
|
| Custom breadcrumbs | n/a |
![SCR-20230726-miiq](https://github.com/getsentry/sentry/assets/187460/fdc4b5b5-01a8-462c-a49d-61494aa53ddc)
|


relates to #47991

Author: ryan953

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

@@ -133,7 +133,10 @@ describe('ReplayReader', () => {
       },
       {
         method: 'getConsoleFrames',
-        expected: [expect.objectContaining({category: 'console'})],
+        expected: [
+          expect.objectContaining({category: 'console'}),
+          expect.objectContaining({category: 'redux.action'}),
+        ],
       },
       {
         method: 'getNetworkFrames',

static/app/utils/replays/replayReader.tsx

@@ -31,7 +31,11 @@ import type {
   SlowClickFrame,
   SpanFrame,
 } from 'sentry/utils/replays/types';
-import {isDeadClick, isDeadRageClick} from 'sentry/utils/replays/types';
+import {
+  BreadcrumbCategories,
+  isDeadClick,
+  isDeadRageClick,
+} from 'sentry/utils/replays/types';
 import type {
   RecordingEvent,
   ReplayCrumb,
@@ -212,7 +216,10 @@ export default class ReplayReader {
   getErrorFrames = () => this._errors;
 
   getConsoleFrames = memoize(() =>
-    this._sortedBreadcrumbFrames.filter(frame => frame.category === 'console')
+    this._sortedBreadcrumbFrames.filter(
+      frame =>
+        frame.category === 'console' || !BreadcrumbCategories.includes(frame.category)
+    )
   );
 
   getNavigationFrames = memoize(() =>
@@ -302,10 +309,6 @@ export default class ReplayReader {
   /*********************/
   /** OLD STUFF BELOW **/
   /*********************/
-  getConsoleCrumbs = memoize(() =>
-    this.breadcrumbs.filter(crumb => crumb.category === 'console')
-  );
-
   getNonConsoleCrumbs = memoize(() =>
     this.breadcrumbs.filter(crumb => crumb.category !== 'console')
   );

static/app/utils/replays/types.tsx

@@ -81,6 +81,10 @@ export function getFrameOpOrCategory(frame: ReplayFrame) {
   return val;
 }
 
+export function isConsoleFrame(frame: BreadcrumbFrame): frame is ConsoleFrame {
+  return frame.category === 'console';
+}
+
 export function isDeadClick(frame: SlowClickFrame) {
   return frame.data.endReason === 'timeout';
 }
@@ -163,17 +167,20 @@ export type MutationFrame = HydratedBreadcrumb<'replay.mutations'>;
 export type NavFrame = HydratedBreadcrumb<'navigation'>;
 export type SlowClickFrame = HydratedBreadcrumb<'ui.slowClickDetected'>;
 
-// This list should match each of the categories used in `HydratedBreadcrumb` above.
+// This list must match each of the categories used in `HydratedBreadcrumb` above
+// and any app-specific types that we hydrate (ie: replay.init).
 export const BreadcrumbCategories = [
   'console',
-  'ui.click',
-  'ui.input',
+  'navigation',
+  'replay.init',
   'replay.mutations',
-  'ui.keyDown',
   'ui.blur',
+  'ui.click',
   'ui.focus',
-  'ui.slowClickDetected',
+  'ui.input',
+  'ui.keyDown',
   'ui.multiClick',
+  'ui.slowClickDetected',
 ];
 
 // Spans
@@ -195,23 +202,26 @@ export type ResourceFrame = HydratedSpan<
   | 'resource.script'
 >;
 
-// This list should match each of the operations used in `HydratedSpan` above.
+// This list should match each of the operations used in `HydratedSpan` above
+// And any app-specific types that we hydrate (ie: replay.start & replay.end).
 export const SpanOps = [
-  'navigation.push',
   'largest-contentful-paint',
   'memory',
+  'navigation.back_forward',
   'navigation.navigate',
+  'navigation.push',
   'navigation.reload',
-  'navigation.back_forward',
   'paint',
-  'resource.fetch',
-  'resource.xhr',
+  'replay.end',
+  'replay.start',
   'resource.css',
+  'resource.fetch',
   'resource.iframe',
   'resource.img',
   'resource.link',
   'resource.other',
   'resource.script',
+  'resource.xhr',
 ];
 
 /**

static/app/views/replays/detail/console/consoleFilters.tsx

@@ -1,16 +1,15 @@
 import {CompactSelect} from 'sentry/components/compactSelect';
 import SearchBar from 'sentry/components/searchBar';
 import {t} from 'sentry/locale';
-import type {Crumb} from 'sentry/types/breadcrumbs';
 import useConsoleFilters from 'sentry/views/replays/detail/console/useConsoleFilters';
 import FiltersGrid from 'sentry/views/replays/detail/filtersGrid';
 
 type Props = {
-  breadcrumbs: undefined | Crumb[];
+  frames: undefined | unknown[];
 } & ReturnType<typeof useConsoleFilters>;
 
 function Filters({
-  breadcrumbs,
+  frames,
   getLogLevels,
   logLevel,
   searchTerm,
@@ -35,7 +34,7 @@ function Filters({
         placeholder={t('Search Console Logs')}
         size="sm"
         query={searchTerm}
-        disabled={!breadcrumbs || !breadcrumbs.length}
+        disabled={!frames || !frames.length}
       />
     </FiltersGrid>
   );

static/app/views/replays/detail/console/consoleLogRow.tsx

@@ -1,25 +1,22 @@
-import {CSSProperties, memo, useCallback, useMemo} from 'react';
+import {CSSProperties, memo, useCallback} from 'react';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 
 import ErrorBoundary from 'sentry/components/errorBoundary';
-import {relativeTimeInMs} from 'sentry/components/replays/utils';
-import {IconFire, IconWarning} from 'sentry/icons';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconClose, IconInfo, IconWarning} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
-import type {BreadcrumbTypeDefault, Crumb} from 'sentry/types/breadcrumbs';
 import {BreadcrumbLevelType} from 'sentry/types/breadcrumbs';
 import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
+import type {BreadcrumbFrame, ConsoleFrame} from 'sentry/utils/replays/types';
 import MessageFormatter from 'sentry/views/replays/detail/console/messageFormatter';
-import {breadcrumbHasIssue} from 'sentry/views/replays/detail/console/utils';
-import ViewIssueLink from 'sentry/views/replays/detail/console/viewIssueLink';
 import TimestampButton from 'sentry/views/replays/detail/timestampButton';
-
-import {OnDimensionChange} from '../useVirtualizedInspector';
+import {OnDimensionChange} from 'sentry/views/replays/detail/useVirtualizedInspector';
 
 type Props = {
-  breadcrumb: Extract<Crumb, BreadcrumbTypeDefault>;
   currentHoverTime: number | undefined;
   currentTime: number;
+  frame: BreadcrumbFrame;
   index: number;
   startTimestampMs: number;
   style: CSSProperties;
@@ -29,7 +26,7 @@ type Props = {
 
 function UnmemoizedConsoleLogRow({
   index,
-  breadcrumb,
+  frame,
   currentTime,
   currentHoverTime,
   startTimestampMs,
@@ -40,30 +37,24 @@ function UnmemoizedConsoleLogRow({
   const {handleMouseEnter, handleMouseLeave, handleClick} =
     useCrumbHandlers(startTimestampMs);
 
-  const onClickTimestamp = useCallback(
-    () => handleClick(breadcrumb),
-    [handleClick, breadcrumb]
-  );
+  const onClickTimestamp = useCallback(() => handleClick(frame), [handleClick, frame]);
   const onMouseEnter = useCallback(
-    () => handleMouseEnter(breadcrumb),
-    [handleMouseEnter, breadcrumb]
+    () => handleMouseEnter(frame),
+    [handleMouseEnter, frame]
   );
   const onMouseLeave = useCallback(
-    () => handleMouseLeave(breadcrumb),
-    [handleMouseLeave, breadcrumb]
+    () => handleMouseLeave(frame),
+    [handleMouseLeave, frame]
   );
   const handleDimensionChange = useCallback(
     (path, expandedState, e) =>
       onDimensionChange && onDimensionChange(index, path, expandedState, e),
     [onDimensionChange, index]
   );
 
-  const crumbTime = useMemo(
-    () => relativeTimeInMs(breadcrumb.timestamp || 0, startTimestampMs),
-    [breadcrumb.timestamp, startTimestampMs]
-  );
-  const hasOccurred = currentTime >= crumbTime;
-  const isBeforeHover = currentHoverTime === undefined || currentHoverTime >= crumbTime;
+  const hasOccurred = currentTime >= frame.offsetMs;
+  const isBeforeHover =
+    currentHoverTime === undefined || currentHoverTime >= frame.offsetMs;
 
   return (
     <ConsoleLog
@@ -74,61 +65,53 @@ function UnmemoizedConsoleLogRow({
         afterHoverTime: currentHoverTime !== undefined && !isBeforeHover,
       })}
       hasOccurred={hasOccurred}
-      level={breadcrumb.level}
+      level={(frame as ConsoleFrame).level}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       style={style}
     >
-      <Icon level={breadcrumb.level} />
+      <ConsoleLevelIcon level={(frame as ConsoleFrame).level} />
       <Message>
-        {breadcrumbHasIssue(breadcrumb) ? (
-          <IssueLinkWrapper>
-            <ViewIssueLink breadcrumb={breadcrumb} />
-          </IssueLinkWrapper>
-        ) : null}
         <ErrorBoundary mini>
           <MessageFormatter
             expandPaths={expandPaths}
-            breadcrumb={breadcrumb}
+            frame={frame}
             onExpand={handleDimensionChange}
           />
         </ErrorBoundary>
       </Message>
       <TimestampButton
         onClick={onClickTimestamp}
         startTimestampMs={startTimestampMs}
-        timestampMs={breadcrumb.timestamp || ''}
+        timestampMs={frame.timestampMs}
       />
     </ConsoleLog>
   );
 }
 
-const IssueLinkWrapper = styled('div')`
-  float: right;
-`;
-
 const ConsoleLog = styled('div')<{
   hasOccurred: boolean;
-  level: string;
+  level: undefined | string;
 }>`
   display: grid;
   grid-template-columns: 12px 1fr max-content;
   gap: ${space(0.75)};
+  align-items: baseline;
   padding: ${space(0.5)} ${space(1)};
   font-size: ${p => p.theme.fontSizeSmall};
 
   background-color: ${p =>
-    ['warning', 'error'].includes(p.level)
-      ? p.theme.alert[p.level].backgroundLight
+    ['warning', 'error'].includes(String(p.level))
+      ? p.theme.alert[String(p.level)].backgroundLight
       : 'inherit'};
 
   /* Overridden in TabItemContainer, depending on *CurrentTime and *HoverTime classes */
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
 
   color: ${p =>
-    ['warning', 'error'].includes(p.level)
-      ? p.theme.alert[p.level].iconColor
+    ['warning', 'error'].includes(String(p.level))
+      ? p.theme.alert[String(p.level)].iconColor
       : p.hasOccurred
       ? 'inherit'
       : p.theme.gray300};
@@ -144,18 +127,35 @@ const ConsoleLog = styled('div')<{
 `;
 
 const ICONS = {
-  [BreadcrumbLevelType.ERROR]: <IconFire size="xs" />,
-  [BreadcrumbLevelType.WARNING]: <IconWarning size="xs" />,
+  [BreadcrumbLevelType.ERROR]: (
+    <Tooltip title={BreadcrumbLevelType.ERROR}>
+      <IconClose size="xs" isCircled />
+    </Tooltip>
+  ),
+  [BreadcrumbLevelType.WARNING]: (
+    <Tooltip title={BreadcrumbLevelType.WARNING}>
+      <IconWarning size="xs" />
+    </Tooltip>
+  ),
+  [BreadcrumbLevelType.INFO]: (
+    <Tooltip title={BreadcrumbLevelType.INFO}>
+      <IconInfo size="xs" />
+    </Tooltip>
+  ),
 };
 
-const Icon = styled(
-  ({level, className}: {level: BreadcrumbLevelType; className?: string}) => (
-    <span className={className}>{ICONS[level]}</span>
-  )
-)`
+const MediumFontSize = styled('span')`
   font-size: ${p => p.theme.fontSizeMedium};
 `;
 
+function ConsoleLevelIcon({level}: {level: string | undefined}) {
+  return level && level in ICONS ? (
+    <MediumFontSize>{ICONS[level]}</MediumFontSize>
+  ) : (
+    <i />
+  );
+}
+
 const Message = styled('div')`
   font-family: ${p => p.theme.text.familyMono};
 

static/app/views/replays/detail/console/index.tsx

@@ -9,7 +9,7 @@ import {
 import Placeholder from 'sentry/components/placeholder';
 import {useReplayContext} from 'sentry/components/replays/replayContext';
 import {t} from 'sentry/locale';
-import type {Crumb} from 'sentry/types/breadcrumbs';
+import type {BreadcrumbFrame} from 'sentry/utils/replays/types';
 import ConsoleFilters from 'sentry/views/replays/detail/console/consoleFilters';
 import ConsoleLogRow from 'sentry/views/replays/detail/console/consoleLogRow';
 import useConsoleFilters from 'sentry/views/replays/detail/console/useConsoleFilters';
@@ -21,7 +21,7 @@ import useVirtualizedList from 'sentry/views/replays/detail/useVirtualizedList';
 import useVirtualizedInspector from '../useVirtualizedInspector';
 
 interface Props {
-  breadcrumbs: undefined | Crumb[];
+  frames: undefined | BreadcrumbFrame[];
   startTimestampMs: number;
 }
 
@@ -32,8 +32,8 @@ const cellMeasurer = {
   minHeight: 24,
 };
 
-function Console({breadcrumbs, startTimestampMs}: Props) {
-  const filterProps = useConsoleFilters({breadcrumbs: breadcrumbs || []});
+function Console({frames, startTimestampMs}: Props) {
+  const filterProps = useConsoleFilters({frames: frames || []});
   const {expandPathsRef, searchTerm, logLevel, items, setSearchTerm} = filterProps;
   const clearSearchTerm = () => setSearchTerm('');
   const {currentTime, currentHoverTime} = useReplayContext();
@@ -67,7 +67,7 @@ function Console({breadcrumbs, startTimestampMs}: Props) {
         rowIndex={index}
       >
         <ConsoleLogRow
-          breadcrumb={item}
+          frame={item}
           currentTime={currentTime}
           currentHoverTime={currentHoverTime}
           expandPaths={Array.from(expandPathsRef.current?.get(index) || [])}
@@ -82,17 +82,17 @@ function Console({breadcrumbs, startTimestampMs}: Props) {
 
   return (
     <FluidHeight>
-      <ConsoleFilters breadcrumbs={breadcrumbs} {...filterProps} />
+      <ConsoleFilters frames={frames} {...filterProps} />
       <TabItemContainer>
-        {breadcrumbs ? (
+        {frames ? (
           <AutoSizer onResize={updateList}>
             {({width, height}) => (
               <ReactVirtualizedList
                 deferredMeasurementCache={cache}
                 height={height}
                 noRowsRenderer={() => (
                   <NoRowRenderer
-                    unfilteredItems={breadcrumbs}
+                    unfilteredItems={frames}
                     clearSearchTerm={clearSearchTerm}
                   >
                     {t('No console logs recorded')}