feat(replay): Show the correct level of each issue in Replay Details breadcrumbs (#97552)

Depends on #97551
Fixes REPLAY-335

Author: ryan953

static/app/components/events/eventReplay/index.spec.tsx

@@ -1,8 +1,8 @@
 import {EventFixture} from 'sentry-fixture/event';
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
+import {RawReplayErrorFixture} from 'sentry-fixture/replay/error';
 import {RRWebInitFrameEventsFixture} from 'sentry-fixture/replay/rrweb';
-import {ReplayErrorFixture} from 'sentry-fixture/replayError';
 import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
@@ -15,7 +15,7 @@ import {
   useReplayOnboardingSidebarPanel,
 } from 'sentry/utils/replays/hooks/useReplayOnboarding';
 import ReplayReader from 'sentry/utils/replays/replayReader';
-import type {ReplayError} from 'sentry/views/replays/types';
+import type {RawReplayError} from 'sentry/utils/replays/types';
 
 jest.mock('sentry/utils/replays/hooks/useReplayOnboarding');
 jest.mock('sentry/utils/replays/hooks/useLoadReplayReader');
@@ -32,25 +32,23 @@ jest.mock(
 const mockEventTimestamp = new Date('2022-09-22T16:59:41Z');
 const mockReplayId = '761104e184c64d439ee1014b72b4d83b';
 
-const mockErrors: ReplayError[] = [
-  ReplayErrorFixture({
+const mockErrors: RawReplayError[] = [
+  RawReplayErrorFixture({
     id: '1',
     issue: 'JAVASCRIPT-101',
     'issue.id': 101,
-    'error.value': ['Something bad happened.'],
     'error.type': ['error'],
     'project.name': 'javascript',
-    timestamp: mockEventTimestamp.toISOString(),
+    timestamp: mockEventTimestamp,
     title: 'Something bad happened.',
   }),
-  ReplayErrorFixture({
+  RawReplayErrorFixture({
     id: '2',
     issue: 'JAVASCRIPT-102',
     'issue.id': 102,
-    'error.value': ['Something bad happened 2.'],
     'error.type': ['error'],
     'project.name': 'javascript',
-    timestamp: mockEventTimestamp.toISOString(),
+    timestamp: mockEventTimestamp,
     title: 'Something bad happened 2.',
   }),
 ];

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

@@ -16,7 +16,7 @@ export default function CrumbErrorTitle({frame}: {frame: ErrorFrame}) {
 
   return (
     <Fragment>
-      Error:{' '}
+      {frame.data.level || 'Error'}:{' '}
       <Link
         to={`/organizations/${organization.slug}/issues/${frame.data.groupId}/events/${frame.data.eventId}/#replay`}
       >

static/app/components/replays/header/errorCounts.spec.tsx

@@ -1,6 +1,6 @@
 import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
-import {ReplayErrorFixture} from 'sentry-fixture/replayError';
+import {RawReplayErrorFixture} from 'sentry-fixture/replay/error';
 import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
@@ -11,7 +11,7 @@ import ProjectsStore from 'sentry/stores/projectsStore';
 const replayRecord = ReplayRecordFixture();
 const organization = OrganizationFixture();
 
-const baseErrorProps = {id: '1', issue: '', timestamp: new Date().toISOString()};
+const baseErrorProps = {id: '1', issue: '', timestamp: new Date()};
 
 describe('ErrorCounts', () => {
   beforeEach(() => {
@@ -43,7 +43,9 @@ describe('ErrorCounts', () => {
   });
 
   it('should render an icon & count when all errors come from a single project', async () => {
-    const errors = [ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-js-app'})];
+    const errors = [
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-js-app'}),
+    ];
 
     render(<ErrorCounts replayErrors={errors} replayRecord={replayRecord} />, {
       organization,
@@ -63,9 +65,9 @@ describe('ErrorCounts', () => {
 
   it('should render an icon & count with links when there are errors in two unique projects', async () => {
     const errors = [
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-js-app'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-js-app'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
     ];
 
     render(<ErrorCounts replayErrors={errors} replayRecord={replayRecord} />, {
@@ -93,12 +95,12 @@ describe('ErrorCounts', () => {
 
   it('should render multiple icons, but a single count and link, when there are errors in three or more projects', async () => {
     const errors = [
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-js-app'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-node-service'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-node-service'}),
-      ReplayErrorFixture({...baseErrorProps, 'project.name': 'my-node-service'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-js-app'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-py-backend'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-node-service'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-node-service'}),
+      RawReplayErrorFixture({...baseErrorProps, 'project.name': 'my-node-service'}),
     ];
 
     render(<ErrorCounts replayErrors={errors} replayRecord={replayRecord} />, {

static/app/components/replays/header/errorCounts.tsx

@@ -12,11 +12,12 @@ import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Project} from 'sentry/types/project';
 import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
+import type {RawReplayError} from 'sentry/utils/replays/types';
 import {useLocation} from 'sentry/utils/useLocation';
-import type {HydratedReplayRecord, ReplayError} from 'sentry/views/replays/types';
+import type {HydratedReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
-  replayErrors: ReplayError[];
+  replayErrors: RawReplayError[];
   replayRecord: HydratedReplayRecord;
 };
 

static/app/components/replays/header/replayMetaData.tsx

@@ -11,12 +11,13 @@ import {space} from 'sentry/styles/space';
 import EventView from 'sentry/utils/discover/eventView';
 import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
 import {TabKey} from 'sentry/utils/replays/hooks/useActiveReplayTab';
+import type {RawReplayError} from 'sentry/utils/replays/types';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useRoutes} from 'sentry/utils/useRoutes';
-import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
+import type {ReplayRecord} from 'sentry/views/replays/types';
 
 interface Props {
-  replayErrors: ReplayError[];
+  replayErrors: RawReplayError[];
   replayRecord: ReplayRecord;
   showDeadRageClicks?: boolean;
 }

static/app/components/replays/header/useErrorCountPerProject.tsx

@@ -1,11 +1,12 @@
 import {useMemo} from 'react';
 import countBy from 'lodash/countBy';
 
+import type {RawReplayError} from 'sentry/utils/replays/types';
 import useProjects from 'sentry/utils/useProjects';
-import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
+import type {ReplayRecord} from 'sentry/views/replays/types';
 
 type Props = {
-  replayErrors: ReplayError[];
+  replayErrors: RawReplayError[];
   replayRecord: ReplayRecord;
 };
 

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

@@ -20,8 +20,8 @@ import {
   IncrementalSource,
   isHydrationErrorFrame,
   type RawBreadcrumbFrame,
+  type RawReplayError,
 } from 'sentry/utils/replays/types';
-import type {ReplayError} from 'sentry/views/replays/types';
 
 const START_DATE = new Date('2022-06-15T00:40:00.000Z');
 const INIT_DATE = new Date('2022-06-15T00:40:00.100Z');
@@ -62,7 +62,7 @@ const RRWEB_EVENTS = [
   }),
 ];
 
-function getMockReplay(rrwebEvents: any[], errors: ReplayError[]) {
+function getMockReplay(rrwebEvents: any[], errors: RawReplayError[]) {
   const attachments = [...rrwebEvents];
   const replay = ReplayReader.factory({
     replayRecord,
@@ -77,7 +77,7 @@ function getMockReplay(rrwebEvents: any[], errors: ReplayError[]) {
 function getMockReplayWithCrumbFrame(
   rrwebEvents: any[],
   crumbFrame: RawBreadcrumbFrame,
-  errors: ReplayError[]
+  errors: RawReplayError[]
 ) {
   const attachments = [...rrwebEvents];
 
@@ -155,7 +155,7 @@ describe('getReplayDiffOffsetsFromEvent', () => {
     });
     const errorEvent = EventFixture({dateCreated: ERROR_DATE.toISOString()});
     const {replay} = getMockReplayWithCrumbFrame(RRWEB_EVENTS, rawHydrationCrumbFrame, [
-      errorEvent as any as ReplayError,
+      errorEvent as any as RawReplayError,
     ]);
 
     const [hydratedHydrationCrumbFrame] = hydrateBreadcrumbs(replayRecord, [
@@ -170,7 +170,7 @@ describe('getReplayDiffOffsetsFromEvent', () => {
 
   it('should get offsets when no hydration breadcrumb exists', () => {
     const errorEvent = EventFixture({dateCreated: ERROR_DATE.toISOString()});
-    const {replay} = getMockReplay(RRWEB_EVENTS, [errorEvent as any as ReplayError]);
+    const {replay} = getMockReplay(RRWEB_EVENTS, [errorEvent as any as RawReplayError]);
 
     expect(getReplayDiffOffsetsFromEvent(replay!, errorEvent)).toEqual({
       frameOrEvent: errorEvent,

static/app/utils/replays/hooks/useReplayData.spec.tsx

@@ -1,11 +1,11 @@
 import type {ReactNode} from 'react';
 import {duration} from 'moment-timezone';
+import {RawReplayErrorFixture} from 'sentry-fixture/replay/error';
 import {
   ReplayConsoleEventFixture,
   ReplayNavigateEventFixture,
 } from 'sentry-fixture/replay/helpers';
 import {RRWebInitFrameEventsFixture} from 'sentry-fixture/replay/rrweb';
-import {ReplayErrorFixture} from 'sentry-fixture/replayError';
 import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 
 import {initializeOrg} from 'sentry-test/initializeOrg';
@@ -278,31 +278,31 @@ describe('useReplayData', () => {
     });
 
     const mockErrorResponse1 = [
-      ReplayErrorFixture({
+      RawReplayErrorFixture({
         id: ERROR_IDS[0]!,
         issue: 'JAVASCRIPT-123E',
-        timestamp: startedAt.toISOString(),
+        timestamp: startedAt,
       }),
     ];
     const mockErrorResponse2 = [
-      ReplayErrorFixture({
+      RawReplayErrorFixture({
         id: ERROR_IDS[1]!,
         issue: 'JAVASCRIPT-789Z',
-        timestamp: startedAt.toISOString(),
+        timestamp: startedAt,
       }),
     ];
     const mockErrorResponse3 = [
-      ReplayErrorFixture({
+      RawReplayErrorFixture({
         id: ERROR_IDS[0]!,
         issue: 'JAVASCRIPT-123E',
-        timestamp: startedAt.toISOString(),
+        timestamp: startedAt,
       }),
     ];
     const mockErrorResponse4 = [
-      ReplayErrorFixture({
+      RawReplayErrorFixture({
         id: ERROR_IDS[1]!,
         issue: 'JAVASCRIPT-789Z',
-        timestamp: startedAt.toISOString(),
+        timestamp: startedAt,
       }),
     ];
 
@@ -418,10 +418,10 @@ describe('useReplayData', () => {
       timestamp: startedAt,
     });
     const mockErrorResponse = [
-      ReplayErrorFixture({
+      RawReplayErrorFixture({
         id: ERROR_IDS[0]!,
         issue: 'JAVASCRIPT-123E',
-        timestamp: startedAt.toISOString(),
+        timestamp: startedAt,
       }),
     ];
 

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

@@ -11,8 +11,9 @@ import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient';
 import useFeedbackEvents from 'sentry/utils/replays/hooks/useFeedbackEvents';
 import {useReplayProjectSlug} from 'sentry/utils/replays/hooks/useReplayProjectSlug';
 import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
+import type {RawReplayError} from 'sentry/utils/replays/types';
 import type RequestError from 'sentry/utils/requestError/requestError';
-import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
+import type {ReplayRecord} from 'sentry/views/replays/types';
 
 type Options = {
   /**
@@ -41,7 +42,7 @@ type Options = {
 interface Result {
   attachmentError: undefined | RequestError[];
   attachments: unknown[];
-  errors: ReplayError[];
+  errors: RawReplayError[];
   fetchError: undefined | RequestError;
   isError: boolean;
   isPending: boolean;
@@ -200,7 +201,7 @@ function useReplayData({
     pages: errorPages,
     status: fetchErrorsStatus,
     getLastResponseHeader: lastErrorsResponseHeader,
-  } = useFetchParallelPages<{data: ReplayError[]}>({
+  } = useFetchParallelPages<{data: RawReplayError[]}>({
     enabled: enableErrors,
     hits: replayRecord?.count_errors ?? 0,
     getQueryKey: getErrorsQueryKey,
@@ -214,15 +215,15 @@ function useReplayData({
     (!replayRecord?.count_errors || Boolean(links.next?.results)) &&
     fetchErrorsStatus === 'success';
   const {pages: extraErrorPages, status: fetchExtraErrorsStatus} =
-    useFetchSequentialPages<{data: ReplayError[]}>({
+    useFetchSequentialPages<{data: RawReplayError[]}>({
       enabled: enableExtraErrors,
       initialCursor: links.next?.cursor,
       getQueryKey: getErrorsQueryKey,
       perPage: errorsPerPage,
     });
 
   const {pages: platformErrorPages, status: fetchPlatformErrorsStatus} =
-    useFetchSequentialPages<{data: ReplayError[]}>({
+    useFetchSequentialPages<{data: RawReplayError[]}>({
       enabled: true,
       getQueryKey: getPlatformErrorsQueryKey,
       perPage: errorsPerPage,

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

@@ -25,6 +25,7 @@ describe('hydrateErrors', () => {
             groupShortId: 'JS-374',
             label: '',
             labels: [],
+            level: 'Error',
             projectSlug: 'javascript',
           },
           message: 'A Redirect with :orgId param on customer domain',
@@ -41,6 +42,7 @@ describe('hydrateErrors', () => {
             groupShortId: 'JS-374',
             label: '',
             labels: [],
+            level: 'Error',
             projectSlug: 'javascript',
           },
           message: 'A Redirect with :orgId param on customer domain',
@@ -57,6 +59,7 @@ describe('hydrateErrors', () => {
             groupShortId: 'JS-374',
             label: '',
             labels: [],
+            level: 'Error',
             projectSlug: 'javascript',
           },
           message: 'A Redirect with :orgId param on customer domain',