ref(replay): Convert Errors Tab to use *Frame types (#51559)

Relates to #47991

Author: ryan953

fixtures/js-stubs/replay/error.ts

@@ -6,12 +6,12 @@ export function RawReplayError(
   error: Overwrite<Partial<TRawReplayError>, {timestamp: Date}>
 ): TRawReplayError {
   return {
-    'error.type': [] as string[],
+    'error.type': error['error.type'] ?? ([] as string[]),
     id: error.id ?? 'e123',
     issue: error.issue ?? 'JS-374',
-    'issue.id': 3740335939,
-    'project.name': 'javascript',
+    'issue.id': error['issue.id'] ?? 3740335939,
+    'project.name': error['project.name'] ?? 'javascript',
     timestamp: error.timestamp.toISOString(),
-    title: 'A Redirect with :orgId param on customer domain',
+    title: error.title ?? 'A Redirect with :orgId param on customer domain',
   };
 }

fixtures/js-stubs/replayError.ts

@@ -10,7 +10,7 @@ export function ReplayError(
     issue: error.issue,
     'issue.id': error['issue.id'] ?? 3740335939,
     'project.name': error['project.name'] ?? 'javascript',
-    timestamp: error.id,
+    timestamp: error.timestamp,
     title: error.title ?? 'A Redirect with :orgId param on customer domain',
   };
 }

static/app/components/replays/virtualizedGrid/headerCell.tsx

@@ -5,6 +5,7 @@ import {Tooltip} from 'sentry/components/tooltip';
 import {IconArrow, IconInfo} from 'sentry/icons';
 import {space} from 'sentry/styles/space';
 import type {Crumb} from 'sentry/types/breadcrumbs';
+import type {BreadcrumbFrame, SpanFrame} from 'sentry/utils/replays/types';
 import type {NetworkSpan} from 'sentry/views/replays/types';
 
 interface SortCrumbs {
@@ -18,11 +19,22 @@ interface SortSpans {
   getValue: (row: NetworkSpan) => any;
 }
 
+interface SortBreadcrumbFrame {
+  asc: boolean;
+  by: keyof BreadcrumbFrame | string;
+  getValue: (row: BreadcrumbFrame) => any;
+}
+interface SortSpanFrame {
+  asc: boolean;
+  by: keyof SpanFrame | string;
+  getValue: (row: SpanFrame) => any;
+}
+
 type Props = {
   field: string;
   handleSort: (fieldName: string) => void;
   label: string;
-  sortConfig: SortCrumbs | SortSpans;
+  sortConfig: SortCrumbs | SortSpans | SortBreadcrumbFrame | SortSpanFrame;
   style: CSSProperties;
   tooltipTitle: undefined | ReactNode;
 };

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

@@ -20,6 +20,7 @@ describe('hydrateErrors', () => {
           groupId: 3740335939,
           groupShortId: 'JS-374',
           label: '',
+          labels: [],
           projectSlug: 'javascript',
         },
         message: 'A Redirect with :orgId param on customer domain',
@@ -35,6 +36,7 @@ describe('hydrateErrors', () => {
           groupId: 3740335939,
           groupShortId: 'JS-374',
           label: '',
+          labels: [],
           projectSlug: 'javascript',
         },
         message: 'A Redirect with :orgId param on customer domain',
@@ -50,6 +52,7 @@ describe('hydrateErrors', () => {
           groupId: 3740335939,
           groupShortId: 'JS-374',
           label: '',
+          labels: [],
           projectSlug: 'javascript',
         },
         message: 'A Redirect with :orgId param on customer domain',

static/app/utils/replays/hydrateErrors.tsx

@@ -30,6 +30,7 @@ export default function hydrateErrors(
               (Array.isArray(error['error.type'])
                 ? error['error.type'][0]
                 : error['error.type']) ?? '',
+            labels: error['error.type'],
             projectSlug: error['project.name'],
           },
           message: error.title,

static/app/utils/replays/types.tsx

@@ -187,11 +187,12 @@ export type ErrorFrame = Overwrite<
   {
     category: 'issue';
     data: {
-      eventId: string; // error['id']
-      groupId: number; // error['issue.id']
-      groupShortId: string; // error['issue']
-      label: string; // error['error.type'].join('')
-      projectSlug: string; // error['project.name']
+      eventId: string;
+      groupId: number;
+      groupShortId: string;
+      label: string;
+      labels: string[];
+      projectSlug: string;
     };
     message: string;
   }

static/app/views/replays/detail/errorList/errorFilters.tsx

@@ -1,17 +1,17 @@
 import {CompactSelect, SelectOption} from 'sentry/components/compactSelect';
 import SearchBar from 'sentry/components/searchBar';
 import {t} from 'sentry/locale';
-import type {Crumb} from 'sentry/types/breadcrumbs';
+import type {ErrorFrame} from 'sentry/utils/replays/types';
 import useErrorFilters from 'sentry/views/replays/detail/errorList/useErrorFilters';
 import FiltersGrid from 'sentry/views/replays/detail/filtersGrid';
 
 type Props = {
-  errorCrumbs: undefined | Crumb[];
+  errorFrames: undefined | ErrorFrame[];
 } & ReturnType<typeof useErrorFilters>;
 
 function ErrorFilters({
   getProjectOptions,
-  errorCrumbs,
+  errorFrames,
   searchTerm,
   selectValue,
   setFilters,
@@ -36,7 +36,7 @@ function ErrorFilters({
         onChange={setSearchTerm}
         placeholder={t('Search Errors')}
         query={searchTerm}
-        disabled={!errorCrumbs || !errorCrumbs.length}
+        disabled={!errorFrames || !errorFrames.length}
       />
     </FiltersGrid>
   );

static/app/views/replays/detail/errorList/errorTableCell.tsx

@@ -4,15 +4,14 @@ import classNames from 'classnames';
 
 import Avatar from 'sentry/components/avatar';
 import Link from 'sentry/components/links/link';
-import {relativeTimeInMs} from 'sentry/components/replays/utils';
 import {
   AvatarWrapper,
   Cell,
   StyledTimestampButton,
   Text,
 } from 'sentry/components/replays/virtualizedGrid/bodyCell';
-import type {Crumb} from 'sentry/types/breadcrumbs';
 import {getShortEventId} from 'sentry/utils/events';
+import type {ErrorFrame} from 'sentry/utils/replays/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
@@ -24,12 +23,12 @@ const EMPTY_CELL = '--';
 
 type Props = {
   columnIndex: number;
-  crumb: Crumb;
   currentHoverTime: number | undefined;
   currentTime: number;
-  onClickTimestamp: (crumb: Crumb) => void;
-  onMouseEnter: (crumb: Crumb) => void;
-  onMouseLeave: (crumb: Crumb) => void;
+  frame: ErrorFrame;
+  onClickTimestamp: (frame: ErrorFrame) => void;
+  onMouseEnter: (frame: ErrorFrame) => void;
+  onMouseLeave: (frame: ErrorFrame) => void;
   rowIndex: number;
   sortConfig: ReturnType<typeof useSortErrors>['sortConfig'];
   startTimestampMs: number;
@@ -42,21 +41,20 @@ const ErrorTableCell = forwardRef<HTMLDivElement, Props>(
       columnIndex,
       currentHoverTime,
       currentTime,
+      frame,
+      onClickTimestamp,
       onMouseEnter,
       onMouseLeave,
-      onClickTimestamp,
       sortConfig,
-      crumb,
       startTimestampMs,
       style,
     }: Props,
     ref
   ) => {
     const organization = useOrganization();
 
-    // @ts-expect-error
-    const {eventId, groupId, groupShortId, project: projectSlug} = crumb.data;
-    const title = crumb.message;
+    const {eventId, groupId, groupShortId, projectSlug} = frame.data;
+    const title = frame.message;
     const {projects} = useProjects();
     const project = useMemo(
       () => projects.find(p => p.slug === projectSlug),
@@ -75,13 +73,9 @@ const ErrorTableCell = forwardRef<HTMLDivElement, Props>(
           }
         : null;
 
-    const crumbTime = useMemo(
-      // @ts-expect-error
-      () => relativeTimeInMs(new Date(crumb.timestamp).getTime(), startTimestampMs),
-      [crumb.timestamp, startTimestampMs]
-    );
-    const hasOccurred = currentTime >= crumbTime;
-    const isBeforeHover = currentHoverTime === undefined || currentHoverTime >= crumbTime;
+    const hasOccurred = currentTime >= frame.offsetMs;
+    const isBeforeHover =
+      currentHoverTime === undefined || currentHoverTime >= frame.offsetMs;
 
     const isByTimestamp = sortConfig.by === 'timestamp';
     const isAsc = isByTimestamp ? sortConfig.asc : undefined;
@@ -111,8 +105,8 @@ const ErrorTableCell = forwardRef<HTMLDivElement, Props>(
             : undefined,
       }),
       hasOccurred: isByTimestamp ? hasOccurred : undefined,
-      onMouseEnter: () => onMouseEnter(crumb),
-      onMouseLeave: () => onMouseLeave(crumb),
+      onMouseEnter: () => onMouseEnter(frame),
+      onMouseLeave: () => onMouseLeave(frame),
       ref,
       style,
     } as ComponentProps<typeof Cell>;
@@ -176,10 +170,10 @@ const ErrorTableCell = forwardRef<HTMLDivElement, Props>(
           <StyledTimestampButton
             format="mm:ss.SSS"
             onClick={() => {
-              onClickTimestamp(crumb);
+              onClickTimestamp(frame);
             }}
             startTimestampMs={startTimestampMs}
-            timestampMs={crumb.timestamp || ''}
+            timestampMs={frame.timestampMs}
           />
         </Cell>
       ),

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

@@ -5,8 +5,8 @@ import styled from '@emotion/styled';
 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 useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
+import type {ErrorFrame} from 'sentry/utils/replays/types';
 import ErrorFilters from 'sentry/views/replays/detail/errorList/errorFilters';
 import ErrorHeaderCell, {
   COLUMN_COUNT,
@@ -22,7 +22,7 @@ const HEADER_HEIGHT = 25;
 const BODY_HEIGHT = 28;
 
 type Props = {
-  errorCrumbs: undefined | Crumb[];
+  errorFrames: undefined | ErrorFrame[];
   startTimestampMs: number;
 };
 
@@ -32,10 +32,10 @@ const cellMeasurer = {
   fixedHeight: true,
 };
 
-function ErrorList({errorCrumbs, startTimestampMs}: Props) {
+function ErrorList({errorFrames, startTimestampMs}: Props) {
   const {currentTime, currentHoverTime} = useReplayContext();
 
-  const filterProps = useErrorFilters({errorCrumbs: errorCrumbs || []});
+  const filterProps = useErrorFilters({errorFrames: errorFrames || []});
   const {items: filteredItems, searchTerm, setSearchTerm} = filterProps;
   const clearSearchTerm = () => setSearchTerm('');
   const {handleSort, items, sortConfig} = useSortErrors({items: filteredItems});
@@ -91,7 +91,7 @@ function ErrorList({errorCrumbs, startTimestampMs}: Props) {
               ref={e => e && registerChild?.(e)}
               rowIndex={rowIndex}
               sortConfig={sortConfig}
-              crumb={error}
+              frame={error}
               startTimestampMs={startTimestampMs}
               style={{...style, height: BODY_HEIGHT}}
             />
@@ -103,9 +103,9 @@ function ErrorList({errorCrumbs, startTimestampMs}: Props) {
 
   return (
     <FluidHeight>
-      <ErrorFilters errorCrumbs={errorCrumbs} {...filterProps} />
+      <ErrorFilters errorFrames={errorFrames} {...filterProps} />
       <ErrorTable>
-        {errorCrumbs ? (
+        {errorFrames ? (
           <OverflowHidden>
             <AutoSizer onResize={onWrapperResize}>
               {({height, width}) => (
@@ -121,7 +121,7 @@ function ErrorList({errorCrumbs, startTimestampMs}: Props) {
                   height={height}
                   noContentRenderer={() => (
                     <NoRowRenderer
-                      unfilteredItems={errorCrumbs}
+                      unfilteredItems={errorFrames}
                       clearSearchTerm={clearSearchTerm}
                     >
                       {t('No errors! Go make some.')}