WIP - errors table uses frames

Author: ryan953

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

@@ -180,11 +180,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.')}

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

@@ -1,9 +1,9 @@
 import {useCallback, useMemo} from 'react';
 
 import type {SelectOption} from 'sentry/components/compactSelect';
-import type {Crumb} from 'sentry/types/breadcrumbs';
 import {decodeList, decodeScalar} from 'sentry/utils/queryString';
 import useFiltersInLocationQuery from 'sentry/utils/replays/hooks/useFiltersInLocationQuery';
+import type {ErrorFrame} from 'sentry/utils/replays/types';
 import {filterItems} from 'sentry/views/replays/detail/utils';
 
 export interface ErrorSelectOption extends SelectOption<string> {
@@ -18,28 +18,30 @@ export type FilterFields = {
 };
 
 type Options = {
-  errorCrumbs: Crumb[];
+  errorFrames: ErrorFrame[];
 };
 
 type Return = {
   getProjectOptions: () => ErrorSelectOption[];
-  items: Crumb[];
+  items: ErrorFrame[];
   searchTerm: string;
   selectValue: string[];
   setFilters: (val: ErrorSelectOption[]) => void;
   setSearchTerm: (searchTerm: string) => void;
 };
 
 const FILTERS = {
-  project: (item: Crumb, projects: string[]) =>
+  project: (item: ErrorFrame, projects: string[]) =>
     // @ts-expect-error
     projects.length === 0 || projects.includes(item.data.project || ''),
 
-  searchTerm: (item: Crumb, searchTerm: string) =>
-    JSON.stringify([item.message, item.description]).toLowerCase().includes(searchTerm),
+  searchTerm: (item: ErrorFrame, searchTerm: string) =>
+    [item.message, ...item.data.labels].some(str =>
+      str.toLowerCase().includes(searchTerm)
+    ),
 };
 
-function useErrorFilters({errorCrumbs}: Options): Return {
+function useErrorFilters({errorFrames}: Options): Return {
   const {setFilter, query} = useFiltersInLocationQuery<FilterFields>();
 
   const project = decodeList(query.f_e_project);
@@ -48,18 +50,18 @@ function useErrorFilters({errorCrumbs}: Options): Return {
   const items = useMemo(
     () =>
       filterItems({
-        items: errorCrumbs,
+        items: errorFrames,
         filterFns: FILTERS,
         filterVals: {project, searchTerm},
       }),
-    [errorCrumbs, project, searchTerm]
+    [errorFrames, project, searchTerm]
   );
 
   const getProjectOptions = useCallback(
     () =>
       Array.from(
         new Set(
-          errorCrumbs
+          errorFrames
             // @ts-expect-error
             .map(crumb => crumb.data.project)
             .concat(project)
@@ -74,7 +76,7 @@ function useErrorFilters({errorCrumbs}: Options): Return {
             qs: 'f_e_project',
           })
         ),
-    [errorCrumbs, project]
+    [errorFrames, project]
   );
 
   const setSearchTerm = useCallback(

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

@@ -1,26 +1,25 @@
 import {useCallback, useMemo} from 'react';
 
-import type {Crumb} from 'sentry/types/breadcrumbs';
+import type {ErrorFrame} from 'sentry/utils/replays/types';
 import useUrlParams from 'sentry/utils/useUrlParams';
 
 interface SortConfig {
   asc: boolean;
-  by: keyof Crumb | string;
-  getValue: (row: Crumb) => any;
+  by: keyof ErrorFrame | string;
+  getValue: (row: ErrorFrame) => any;
 }
 
-const SortStrategies: Record<string, (row: Crumb) => any> = {
-  id: row => row.id,
-  title: row => row.description,
-  // @ts-expect-error
-  project: row => row.data?.project,
+const SortStrategies: Record<string, (row: ErrorFrame) => any> = {
+  id: row => row.data.eventId,
+  title: row => row.message,
+  project: row => row.data.projectSlug,
   timestamp: row => row.timestamp,
 };
 
 const DEFAULT_ASC = 'true';
 const DEFAULT_BY = 'timestamp';
 
-type Opts = {items: Crumb[]};
+type Opts = {items: ErrorFrame[]};
 
 function useSortErrors({items}: Opts) {
   const {getParamValue: getSortAsc, setParamValue: setSortAsc} = useUrlParams(
@@ -66,8 +65,8 @@ function useSortErrors({items}: Opts) {
   };
 }
 
-function sortErrors(crumbs: Crumb[], sortConfig: SortConfig): Crumb[] {
-  return [...crumbs].sort((a, b) => {
+function sortErrors(frames: ErrorFrame[], sortConfig: SortConfig): ErrorFrame[] {
+  return [...frames].sort((a, b) => {
     let valueA = sortConfig.getValue(a);
     let valueB = sortConfig.getValue(b);
 

static/app/views/replays/detail/layout/focusArea.tsx

@@ -43,8 +43,8 @@ function FocusArea({}: Props) {
     case TabKey.ERRORS:
       return (
         <ErrorList
-          errorCrumbs={replay?.getIssueCrumbs()}
-          startTimestampMs={replay?.getReplay()?.started_at?.getTime() || 0}
+          errorFrames={replay?.getErrorFrames()}
+          startTimestampMs={replay?.getReplay().started_at.getTime() ?? 0}
         />
       );
     case TabKey.DOM: