fix(stacktrace): Fall back to symbolicator_status when debug image does not exist on the event (#61782)

Closes https://github.com/getsentry/sentry/issues/61605

For events that don't include debug images, but do have
`symbolicator_status`, we should use that value to decide what to show
as the frame status.

static/app/components/events/interfaces/crashContent/stackTrace/nativeContent.spec.tsx

@@ -1,9 +1,12 @@
 import {Event as EventFixture} from 'sentry-fixture/event';
 import {EventEntryStacktrace} from 'sentry-fixture/eventEntryStacktrace';
+import {EventStacktraceFrame} from 'sentry-fixture/eventStacktraceFrame';
 
-import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
 
 import StackTraceContent from 'sentry/components/events/interfaces/crashContent/stackTrace/content';
+import {NativeContent} from 'sentry/components/events/interfaces/crashContent/stackTrace/nativeContent';
+import {SymbolicatorStatus} from 'sentry/components/events/interfaces/types';
 import {EventOrGroupType} from 'sentry/types';
 import {StacktraceType} from 'sentry/types/stacktrace';
 
@@ -115,4 +118,36 @@ describe('Native StackTrace', function () {
 
     expect(screen.queryByText(/Show .* more frames*/)).not.toBeInTheDocument();
   });
+
+  it('displays correct icons from frame symbolicatorStatus when image does not exist', function () {
+    const newData = {
+      ...data,
+      frames: [
+        EventStacktraceFrame({
+          symbolicatorStatus: SymbolicatorStatus.MISSING,
+          function: 'missing()',
+        }),
+        EventStacktraceFrame({
+          symbolicatorStatus: SymbolicatorStatus.UNKNOWN_IMAGE,
+          function: 'unknown_image()',
+        }),
+        EventStacktraceFrame({
+          symbolicatorStatus: SymbolicatorStatus.SYMBOLICATED,
+          function: 'symbolicated()',
+        }),
+      ],
+    };
+
+    render(
+      <NativeContent data={newData} platform="cocoa" event={event} includeSystemFrames />
+    );
+
+    const frames = screen.getAllByTestId('stack-trace-frame');
+
+    expect(within(frames[0]).getByTestId('symbolication-error-icon')).toBeInTheDocument();
+    expect(
+      within(frames[1]).getByTestId('symbolication-warning-icon')
+    ).toBeInTheDocument();
+    expect(within(frames[2]).queryByTestId(/symbolication/)).not.toBeInTheDocument();
+  });
 });

static/app/components/events/interfaces/nativeFrame.tsx

@@ -187,10 +187,21 @@ function NativeFrame({
     return undefined;
   }
 
+  // this is the status of image that belongs to this frame
   function getStatus() {
-    // this is the status of image that belongs to this frame
+    // If a matching debug image doesn't exist, fall back to symbolicator_status
     if (!image) {
-      return undefined;
+      switch (frame.symbolicatorStatus) {
+        case SymbolicatorStatus.SYMBOLICATED:
+          return 'success';
+        case SymbolicatorStatus.MISSING:
+        case SymbolicatorStatus.MALFORMED:
+          return 'error';
+        case SymbolicatorStatus.MISSING_SYMBOL:
+        case SymbolicatorStatus.UNKNOWN_IMAGE:
+        default:
+          return undefined;
+      }
     }
 
     const combinedStatus = combineStatus(image.debug_status, image.unwind_status);
@@ -249,7 +260,11 @@ function NativeFrame({
                   'This frame has missing debug files and could not be symbolicated'
                 )}
               >
-                <IconFileBroken size="sm" color="errorText" />
+                <IconFileBroken
+                  size="sm"
+                  color="errorText"
+                  data-test-id="symbolication-error-icon"
+                />
               </Tooltip>
             ) : status === undefined ? (
               <Tooltip
@@ -257,7 +272,11 @@ function NativeFrame({
                   'This frame has an unknown problem and could not be symbolicated'
                 )}
               >
-                <IconWarning size="sm" color="warningText" />
+                <IconWarning
+                  size="sm"
+                  color="warningText"
+                  data-test-id="symbolication-warning-icon"
+                />
               </Tooltip>
             ) : null}
           </SymbolicatorIcon>