fix(issues): Handle breadcrumb item as array (#93784)

Author: scttcper

static/app/components/events/breadcrumbs/breadcrumbItemContent.spec.tsx

@@ -123,6 +123,26 @@ describe('BreadcrumbItemContent', function () {
     itemWithoutValue.unmount();
   });
 
+  it('renders exception crumbs with array of objects', function () {
+    const breadcrumb: BreadcrumbTypeDefault = {
+      type: BreadcrumbType.ERROR,
+      level: BreadcrumbLevelType.ERROR,
+      data: {
+        type: 'ValidationError',
+        value: [
+          {field: 'email', error: 'invalid'},
+          {field: 'password', error: 'too short'},
+        ],
+      },
+    };
+    render(<BreadcrumbItemContent breadcrumb={breadcrumb} />);
+    expect(
+      screen.getByText(
+        'ValidationError: {"field":"email","error":"invalid"}, {"field":"password","error":"too short"}'
+      )
+    ).toBeInTheDocument();
+  });
+
   it('applies item limits with fullyExpanded', function () {
     const longMessage = 'longMessage'.repeat(100);
     const breadcrumb: BreadcrumbTypeDefault = {

static/app/components/events/breadcrumbs/breadcrumbItemContent.tsx

@@ -192,6 +192,20 @@ function SQLCrumbContent({
   );
 }
 
+const formatValue = (val: unknown): string => {
+  if (val === null || val === undefined) {
+    return '';
+  }
+  if (Array.isArray(val)) {
+    // Array might contain objects
+    return val.map(item => formatValue(item)).join(', ');
+  }
+  if (typeof val === 'object') {
+    return JSON.stringify(val);
+  }
+  return `${val as string | number}`;
+};
+
 function ExceptionCrumbContent({
   breadcrumb,
   meta,
@@ -204,11 +218,15 @@ function ExceptionCrumbContent({
   meta?: Record<string, any>;
 }) {
   const {type, value, ...otherData} = breadcrumb?.data ?? {};
+
+  const hasValue = value !== null && value !== undefined && value !== '';
+  const formattedValue = hasValue ? formatValue(value) : '';
+
   return (
     <Fragment>
       <BreadcrumbText>
-        {type && type}
-        {type ? value && `: ${value}` : value && value}
+        {type ? type : null}
+        {type && hasValue ? `: ${formattedValue}` : hasValue ? formattedValue : null}
       </BreadcrumbText>
       {children}
       {Object.keys(otherData).length > 0 ? (

static/app/components/events/breadcrumbs/breadcrumbsTimeline.tsx

@@ -5,6 +5,7 @@ import moment from 'moment-timezone';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import {DateTime} from 'sentry/components/dateTime';
 import Duration from 'sentry/components/duration';
+import ErrorBoundary from 'sentry/components/errorBoundary';
 import BreadcrumbItemContent from 'sentry/components/events/breadcrumbs/breadcrumbItemContent';
 import type {EnhancedCrumb} from 'sentry/components/events/breadcrumbs/utils';
 import {Timeline} from 'sentry/components/timeline';
@@ -60,7 +61,7 @@ export default function BreadcrumbsTimeline({
     estimateSize: () => 35,
     // Must match rendered item margins.
     gap: 8,
-    overscan: 10,
+    overscan: 25,
   });
 
   if (!breadcrumbs.length) {
@@ -118,11 +119,13 @@ export default function BreadcrumbsTimeline({
         showLastLine={showLastLine}
       >
         <ContentWrapper>
-          <BreadcrumbItemContent
-            breadcrumb={breadcrumb}
-            meta={meta}
-            fullyExpanded={fullyExpanded}
-          />
+          <ErrorBoundary mini>
+            <BreadcrumbItemContent
+              breadcrumb={breadcrumb}
+              meta={meta}
+              fullyExpanded={fullyExpanded}
+            />
+          </ErrorBoundary>
         </ContentWrapper>
       </BreadcrumbItem>
     );