feat(issues): Render ANSI colors in related exception labels

static/app/components/events/interfaces/crashContent/exception/relatedExceptions.spec.tsx

@@ -76,6 +76,21 @@ describe('ExceptionGroupContext', () => {
     ).toBeInTheDocument();
   });
 
+  it('renders colored text without escape codes when given ANSI exception values', () => {
+    const allExceptions = defaultProps.allExceptions.map(exception =>
+      exception.type === 'TypeError'
+        ? {...exception, value: '\x1B[31mnested\x1B[0m failure'}
+        : exception
+    );
+
+    render(<RelatedExceptions {...defaultProps} allExceptions={allExceptions} />);
+
+    expect(
+      screen.getByRole('button', {name: 'TypeError: nested failure'})
+    ).toBeInTheDocument();
+    expect(screen.getByText('nested').style.color).toContain('color-mix(in srgb,');
+  });
+
   it('does not render for sub-exception', () => {
     const {container} = render(
       <RelatedExceptions {...defaultProps} mechanism={typeErrorMechanism} />

static/app/components/events/interfaces/crashContent/exception/relatedExceptions.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
 
+import {AnsiText} from 'sentry/components/ansiText';
 import {t} from 'sentry/locale';
 import type {ExceptionValue} from 'sentry/types/event';
 import type {StackTraceMechanism} from 'sentry/types/stacktrace';
@@ -38,10 +39,20 @@ type ExceptionTreeItemProps = {
 
 function getExceptionName(exception: ExceptionValue) {
   if (exception.type) {
-    return exception.value ? `${exception.type}: ${exception.value}` : exception.type;
+    return exception.value ? (
+      <span>
+        {exception.type}: <AnsiText>{exception.value}</AnsiText>
+      </span>
+    ) : (
+      exception.type
+    );
   }
 
-  return exception.value ?? t('Exception');
+  return defined(exception.value) ? (
+    <AnsiText>{exception.value}</AnsiText>
+  ) : (
+    t('Exception')
+  );
 }
 
 function ExceptionLink({exception, link, onExceptionClick}: ExceptionLinkProps) {

static/app/components/stackTrace/exceptionGroup.spec.tsx

@@ -137,4 +137,34 @@ describe('exceptionGroup', () => {
     expect(screen.getByTestId('exc-3')).toBeInTheDocument();
     expect(screen.getByTestId('exc-4')).toBeInTheDocument();
   });
+
+  it('renders colored text without escape codes when given ANSI exception values', () => {
+    const values = makeValues().map(exception => {
+      if (exception.type === 'ValueError') {
+        return {...exception, value: '\x1B[31mbad\x1B[0m value'};
+      }
+      if (exception.mechanism?.exception_id === 0) {
+        return {...exception, value: '\x1B[32mroot\x1B[0m group'};
+      }
+      return exception;
+    });
+
+    render(
+      <RelatedExceptionsTree
+        exception={values[0]!}
+        allExceptions={values}
+        newestFirst={false}
+        onExceptionClick={jest.fn()}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'ValueError: bad value'})
+    ).toBeInTheDocument();
+    expect(screen.getByText('bad').style.color).toContain('color-mix(in srgb,');
+    expect(screen.getByText('root').closest('div')).toHaveTextContent(
+      /^ExceptionGroup: root group$/
+    );
+    expect(screen.getByText('root').style.color).toContain('color-mix(in srgb,');
+  });
 });

static/app/components/stackTrace/exceptionGroup.tsx

@@ -5,6 +5,7 @@ import {Button} from '@sentry/scraps/button';
 import {Stack} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
+import {AnsiText} from 'sentry/components/ansiText';
 import {t, tn} from 'sentry/locale';
 import type {ExceptionValue} from 'sentry/types/event';
 import {defined} from 'sentry/utils/defined';
@@ -59,9 +60,19 @@ export function useHiddenExceptions(values: ExceptionValue[]) {
 
 function getExceptionName(exception: ExceptionValue) {
   if (exception.type) {
-    return exception.value ? `${exception.type}: ${exception.value}` : exception.type;
+    return exception.value ? (
+      <span>
+        {exception.type}: <AnsiText>{exception.value}</AnsiText>
+      </span>
+    ) : (
+      exception.type
+    );
   }
-  return exception.value ?? t('Exception');
+  return defined(exception.value) ? (
+    <AnsiText>{exception.value}</AnsiText>
+  ) : (
+    t('Exception')
+  );
 }
 
 interface ToggleRelatedExceptionsButtonProps {