feat(issues): Add native stack trace component

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

@@ -140,18 +140,17 @@ export function NativeContent({
         address: frame.instructionAddr,
       });
 
-      try {
-        const relativeAddress = (
-          parseAddress(frame.instructionAddr) -
-          parseAddress(correspondingImage.image_addr)
-        ).toString(16);
-
-        return maxLengthUntilThisPoint > relativeAddress.length
-          ? maxLengthUntilThisPoint
-          : relativeAddress.length;
-      } catch {
+      if (!frame.instructionAddr || !correspondingImage?.image_addr) {
         return maxLengthUntilThisPoint;
       }
+
+      const relativeAddress = (
+        parseAddress(frame.instructionAddr) - parseAddress(correspondingImage.image_addr)
+      ).toString(16);
+
+      return maxLengthUntilThisPoint > relativeAddress.length
+        ? maxLengthUntilThisPoint
+        : relativeAddress.length;
     },
     0
   );

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

@@ -34,7 +34,7 @@ import {IconFileBroken} from 'sentry/icons/iconFileBroken';
 import {IconRefresh} from 'sentry/icons/iconRefresh';
 import {IconWarning} from 'sentry/icons/iconWarning';
 import {t, tn} from 'sentry/locale';
-import type {ImageWithCombinedStatus} from 'sentry/types/debugImage';
+import type {Image} from 'sentry/types/debugImage';
 import type {Event, Frame} from 'sentry/types/event';
 import type {SentryAppSchemaStacktraceLink} from 'sentry/types/integrations';
 import type {PlatformKey} from 'sentry/types/platform';
@@ -56,7 +56,7 @@ type Props = {
   frame: Frame;
   frameMeta: Record<any, any>;
   hiddenFrameCount: number | undefined;
-  image: ImageWithCombinedStatus;
+  image: Image | null;
   isFirstInAppFrame: boolean;
   /**
    * Is the stack trace being previewed in a hovercard?

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

@@ -29,7 +29,11 @@ interface HiddenFrameIndicesProps {
   toggleFrameMap: Record<number, boolean>;
 }
 
-export function findImageForAddress({event, addrMode, address}: ImageForAddressProps) {
+export function findImageForAddress({
+  event,
+  addrMode,
+  address,
+}: ImageForAddressProps): Image | null {
   const images = event.entries.find(entry => entry.type === 'debugmeta')?.data?.images;
 
   if (!images || !address) {
@@ -45,7 +49,7 @@ export function findImageForAddress({event, addrMode, address}: ImageForAddressP
     return addrMode === `rel:${idx}`;
   });
 
-  return image;
+  return image ?? null;
 }
 
 export function isRepeatedFrame(frame: Frame, nextFrame?: Frame) {

static/app/components/groupPreviewTooltip/stackTracePreview.spec.tsx

@@ -1,11 +1,37 @@
 import {EventFixture} from 'sentry-fixture/event';
+import {EventStacktraceFrameFixture} from 'sentry-fixture/eventStacktraceFrame';
+import {OrganizationFixture} from 'sentry-fixture/organization';
 
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import type {EventError, ExceptionType, ExceptionValue, Frame} from 'sentry/types/event';
 import {EntryType} from 'sentry/types/event';
-
-import {StackTracePreview} from './stackTracePreview';
+import type {StacktraceType} from 'sentry/types/stacktrace';
+
+import {StackTracePreview, StackTracePreviewContent} from './stackTracePreview';
+
+function makeNativePreview() {
+  const stacktrace: StacktraceType = {
+    frames: [
+      EventStacktraceFrameFixture({
+        filename: 'ViewController.m',
+        function: 'ViewController.causeCrash',
+        inApp: true,
+        instructionAddr: '0x100001000',
+        package: '/build/CrashyApp.app/CrashyApp',
+        platform: 'cocoa',
+      }),
+    ],
+    framesOmitted: null,
+    hasSystemFrames: false,
+    registers: null,
+  };
+
+  return {
+    event: EventFixture({platform: 'cocoa'}),
+    stacktrace,
+  };
+}
 
 beforeEach(() => {
   MockApiClient.clearMockResponses();
@@ -106,4 +132,47 @@ describe('StackTracePreview', () => {
     // Hide the platform icon for stack trace previews
     expect(screen.queryAllByRole('img')).toHaveLength(0);
   });
+
+  it('renders legacy native stack trace previews without the feature flag', () => {
+    const {event, stacktrace} = makeNativePreview();
+
+    render(<StackTracePreviewContent event={event} stacktrace={stacktrace} />);
+
+    expect(screen.getByTestId('stack-trace-frame')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('native-stack-trace-frame-title')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders new native stack trace previews with the feature flag', () => {
+    const {event, stacktrace} = makeNativePreview();
+
+    render(<StackTracePreviewContent event={event} stacktrace={stacktrace} />, {
+      organization: OrganizationFixture({
+        features: ['issue-details-native-stack-trace'],
+      }),
+    });
+
+    expect(screen.getByTestId('native-stack-trace-frame-title')).toBeInTheDocument();
+    expect(screen.queryByTestId('stack-trace-frame')).not.toBeInTheDocument();
+  });
+
+  it('shows every system-only native frame in the new preview', () => {
+    const {event, stacktrace} = makeNativePreview();
+    stacktrace.frames = ['system_start', 'system_wait', 'system_end'].map(functionName =>
+      EventStacktraceFrameFixture({
+        function: functionName,
+        inApp: false,
+        platform: 'cocoa',
+      })
+    );
+
+    render(<StackTracePreviewContent event={event} stacktrace={stacktrace} />, {
+      organization: OrganizationFixture({features: ['issue-details-native-stack-trace']}),
+    });
+
+    expect(screen.getByText('system_start')).toBeInTheDocument();
+    expect(screen.getByText('system_wait')).toBeInTheDocument();
+    expect(screen.getByText('system_end')).toBeInTheDocument();
+  });
 });

static/app/components/groupPreviewTooltip/stackTracePreview.tsx

@@ -13,12 +13,14 @@ import {
 } from 'sentry/components/groupPreviewTooltip/utils';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
 import {IssueStackTracePreview} from 'sentry/components/stackTrace/issueStackTrace/issueStackTracePreview';
+import {NativeStackTracePreview} from 'sentry/components/stackTrace/native/nativeStackTracePreview';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import {EntryType} from 'sentry/types/event';
 import type {StacktraceType} from 'sentry/types/stacktrace';
 import {defined} from 'sentry/utils/defined';
 import {isNativePlatform} from 'sentry/utils/platform';
+import {useOrganization} from 'sentry/utils/useOrganization';
 
 export function getStacktrace(event: Event): StacktraceType | null {
   const exceptionsWithStacktrace =
@@ -60,6 +62,7 @@ export function StackTracePreviewContent({
   stacktrace: StacktraceType;
   groupingCurrentLevel?: number;
 }) {
+  const organization = useOrganization();
   const includeSystemFrames = useMemo(() => {
     return stacktrace?.frames?.every(frame => !frame.inApp) ?? false;
   }, [stacktrace]);
@@ -80,6 +83,17 @@ export function StackTracePreviewContent({
     | Partial<React.ComponentProps<typeof StackTraceContent>>;
 
   if (isNativePlatform(platform)) {
+    if (organization.features.includes('issue-details-native-stack-trace')) {
+      return (
+        <NativeStackTracePreview
+          event={event}
+          stacktrace={stacktrace}
+          platform={platform}
+          groupingCurrentLevel={groupingCurrentLevel}
+        />
+      );
+    }
+
     return <NativeContent {...commonProps} groupingCurrentLevel={groupingCurrentLevel} />;
   }
 

static/app/components/stackTrace/frame/actions/chevron.tsx

@@ -1,25 +1,42 @@
 import styled from '@emotion/styled';
 
+import {Button} from '@sentry/scraps/button';
+
 import {
   useStackTraceContext,
   useStackTraceFrameContext,
 } from 'sentry/components/stackTrace/stackTraceContext';
 import {IconChevron} from 'sentry/icons';
+import {t} from 'sentry/locale';
 
 const CHEVRON_SLOT_SIZE = 24;
 
 export function ChevronAction() {
   const {hasAnyExpandableFrames} = useStackTraceContext();
-  const {isExpandable, isExpanded} = useStackTraceFrameContext();
+  const {frameContextId, isExpandable, isExpanded, toggleExpansion} =
+    useStackTraceFrameContext();
 
   if (!hasAnyExpandableFrames) {
     return null;
   }
 
   return (
-    <ChevronSlot data-test-id="core-stacktrace-chevron-slot" aria-hidden>
+    <ChevronSlot data-test-id="core-stacktrace-chevron-slot">
       {isExpandable ? (
-        <IconChevron direction={isExpanded ? 'down' : 'right'} size="xs" />
+        <Button
+          aria-controls={frameContextId}
+          aria-expanded={isExpanded}
+          aria-label={
+            isExpanded ? t('Collapse frame details') : t('Expand frame details')
+          }
+          icon={<IconChevron direction={isExpanded ? 'down' : 'right'} size="xs" />}
+          size="zero"
+          variant="transparent"
+          onClick={event => {
+            event.stopPropagation();
+            toggleExpansion();
+          }}
+        />
       ) : null}
     </ChevronSlot>
   );

static/app/components/stackTrace/frame/frameHeader.tsx

@@ -61,15 +61,8 @@ interface FrameHeaderProps {
 
 export function FrameHeader({actions}: FrameHeaderProps) {
   const [isHovering, setIsHovering] = useState(false);
-  const {
-    frame,
-    frameContextId,
-    isExpandable,
-    isExpanded,
-    nextFrame,
-    platform,
-    toggleExpansion,
-  } = useStackTraceFrameContext();
+  const {frame, isExpandable, isExpanded, nextFrame, platform, toggleExpansion} =
+    useStackTraceFrameContext();
 
   const resolvedActions = typeof actions === 'function' ? actions({isHovering}) : actions;
   const leadsToApp = !frame.inApp && (nextFrame?.inApp || !nextFrame);
@@ -80,8 +73,6 @@ export function FrameHeader({actions}: FrameHeaderProps) {
       data-test-id="core-stacktrace-frame-title"
       isExpandable={isExpandable}
       hasLeadHint={hasLeadHint}
-      aria-expanded={isExpandable ? isExpanded : undefined}
-      aria-controls={isExpandable ? frameContextId : undefined}
       onClick={() => {
         const selectedText = window.getSelection()?.toString();
         if (isExpandable && !selectedText) {

static/app/components/stackTrace/frame/frameRow.tsx

@@ -29,6 +29,8 @@ const StackTraceFrameRowRoot = memo(function StackTraceFrameRowRootImpl({
   const {
     collapseAll,
     event,
+    defaultExpandedFrameIndex,
+    emptySourceNotation,
     frames,
     hasScmSourceContext,
     lastFrameIndex,
@@ -39,15 +41,23 @@ const StackTraceFrameRowRoot = memo(function StackTraceFrameRowRootImpl({
   } = useStackTraceContext();
 
   const registers = row.frameIndex === frames.length - 1 ? stacktrace.registers : {};
+  const isSingleEmptySourceFrame =
+    emptySourceNotation && frames.length === 1 && row.frameIndex === 0;
   const [isExpanded, setIsExpanded] = useState(
-    () => !collapseAll && row.frameIndex === lastFrameIndex
+    () =>
+      !collapseAll &&
+      row.frameIndex ===
+        (defaultExpandedFrameIndex === undefined
+          ? lastFrameIndex
+          : defaultExpandedFrameIndex)
   );
 
   const isFrameExpandable = frameHasExpandableDetails({
     frame: row.frame,
     registers,
     platform,
     hasScmSourceContext,
+    emptySourceNotation: isSingleEmptySourceFrame,
   });
 
   const frameContextId = useId();
@@ -62,6 +72,8 @@ const StackTraceFrameRowRoot = memo(function StackTraceFrameRowRootImpl({
       hiddenFramesExpanded: !!hiddenFrameToggleMap[row.frameIndex],
       isExpandable: isFrameExpandable,
       isExpanded,
+      isSubFrame: row.isSubFrame,
+      isUsedForGrouping: row.isUsedForGrouping,
       nextFrame: row.nextFrame,
       platform,
       timesRepeated: row.timesRepeated,
@@ -78,6 +90,8 @@ const StackTraceFrameRowRoot = memo(function StackTraceFrameRowRootImpl({
       hiddenFrameToggleMap,
       isExpanded,
       isFrameExpandable,
+      row.isSubFrame,
+      row.isUsedForGrouping,
       platform,
       row.frame,
       row.frameIndex,
@@ -89,11 +103,11 @@ const StackTraceFrameRowRoot = memo(function StackTraceFrameRowRootImpl({
   );
 
   return (
-    <StackTraceFrameContext.Provider value={value}>
+    <StackTraceFrameContext value={value}>
       <FrameRowContainer data-test-id="core-stacktrace-frame-row">
         {children}
       </FrameRowContainer>
-    </StackTraceFrameContext.Provider>
+    </StackTraceFrameContext>
   );
 });