fix(replay): Check custom breadcrumb for category (#77991)

Custom breadcrumbs might not have a defined category, which causes an
error when we try to get the frame's op or category. Since we want to
show all custom breadcrumbs in the breadcrumb list, if the custom
breadcrumb doesn't have a category, we set it to the title, else
'custom'.

Fixes JAVASCRIPT-2VYZ 
Fixes JAVASCRIPT-2VZ1

static/app/utils/replays/getFrameDetails.tsx

@@ -40,6 +40,7 @@ import type {
   MultiClickFrame,
   MutationFrame,
   NavFrame,
+  RawBreadcrumbFrame,
   ReplayFrame,
   SlowClickFrame,
   TapFrame,
@@ -446,19 +447,19 @@ export default function getFrameDetails(frame: ReplayFrame): Details {
   }
 }
 
-function defaultTitle(frame: ReplayFrame) {
+export function defaultTitle(frame: ReplayFrame | RawBreadcrumbFrame) {
   // Override title for User Feedback frames
   if ('message' in frame && frame.message === 'User Feedback') {
     return t('User Feedback');
   }
-  if ('category' in frame) {
+  if ('category' in frame && frame.category) {
     const [type, action] = frame.category.split('.');
     return `${type} ${action || ''}`.trim();
   }
-  if ('message' in frame) {
+  if ('message' in frame && frame.message) {
     return frame.message as string; // TODO(replay): Included for backwards compat
   }
-  return frame.description ?? '';
+  return 'description' in frame ? frame.description ?? '' : '';
 }
 
 function stringifyNodeAttributes(node: SlowClickFrame['data']['node']) {

static/app/utils/replays/hydrateBreadcrumbs.tsx

@@ -3,6 +3,7 @@ import invariant from 'invariant';
 import {t} from 'sentry/locale';
 import {BreadcrumbType} from 'sentry/types/breadcrumbs';
 import isValidDate from 'sentry/utils/date/isValidDate';
+import {defaultTitle} from 'sentry/utils/replays/getFrameDetails';
 import type {BreadcrumbFrame, RawBreadcrumbFrame} from 'sentry/utils/replays/types';
 import {isBreadcrumbFrame} from 'sentry/utils/replays/types';
 import type {ReplayRecord} from 'sentry/views/replays/types';
@@ -26,6 +27,8 @@ export default function hydrateBreadcrumbs(
         }
         return {
           ...frame,
+          // custom frames might not have a defined category, so we need to set one
+          category: frame.category || defaultTitle(frame) || 'custom',
           offsetMs: Math.abs(time.getTime() - startTimestampMs),
           timestamp: time,
           timestampMs: time.getTime(),