feat(profiling): New stack trace in span profile details (#112559)

Uses the new stack trace component in the "Most Frequent Stacks in this
Span" section, gated behind `issue-details-new-stack-trace`.

Also fixes a bug where `maxDepth` was applied to both `allRows` and
`rows` in `StackTraceProvider`. Since `allRows` includes all system
frames and `rows` only includes visible (in-app) frames, slicing both
independently could lose in-app frames when system frames dominate the
end of the stack.

before
<img width="605" height="501" alt="Screenshot 2026-04-08 at 5 14 48 PM"
src="https://github.com/user-attachments/assets/6b352cb6-ade7-42fb-8677-8e991987c1d8"
/>


after
<img width="553" height="440" alt="image"
src="https://github.com/user-attachments/assets/31fb33a3-bf0d-4564-b042-d1685334f5da"
/>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: scttcper

static/app/components/events/interfaces/spans/spanProfileDetails.tsx

@@ -7,6 +7,11 @@ import {SectionHeading} from 'sentry/components/charts/styles';
 import {StackTraceContent} from 'sentry/components/events/interfaces/crashContent/stackTrace';
 import {StackTraceContentPanel} from 'sentry/components/events/interfaces/crashContent/stackTrace/content';
 import {QuestionTooltip} from 'sentry/components/questionTooltip';
+import {FrameContent} from 'sentry/components/stackTrace/frame/frameContent';
+import {IssueFrameActions} from 'sentry/components/stackTrace/issueStackTrace/issueFrameActions';
+import {StackTraceViewStateProvider} from 'sentry/components/stackTrace/stackTraceContext';
+import {StackTraceFrames} from 'sentry/components/stackTrace/stackTraceFrames';
+import {StackTraceProvider} from 'sentry/components/stackTrace/stackTraceProvider';
 import {IconChevron, IconProfiling} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {EntryType, type EventTransaction, type Frame} from 'sentry/types/event';
@@ -298,20 +303,41 @@ export function SpanProfileDetails({
           </LinkButton>
         </SpanDetailsItem>
       </SpanDetails>
-      <StackTraceContent
-        event={processedEvent}
-        newestFirst
-        platform={event.platform || 'other'}
-        stacktrace={{
-          framesOmitted: null,
-          hasSystemFrames: false,
-          registers: null,
-          frames,
-        }}
-        stackView={StackView.APP}
-        inlined
-        maxDepth={MAX_STACK_DEPTH}
-      />
+      {organization.features.includes('issue-details-new-stack-trace') ? (
+        <StackTraceViewStateProvider platform={event.platform || 'other'}>
+          <StackTraceProvider
+            event={processedEvent}
+            stacktrace={{
+              framesOmitted: null,
+              hasSystemFrames: false,
+              registers: null,
+              frames,
+            }}
+            maxDepth={MAX_STACK_DEPTH}
+          >
+            <StackTraceFrames
+              borderless
+              frameActionsComponent={IssueFrameActions}
+              frameContextComponent={FrameContent}
+            />
+          </StackTraceProvider>
+        </StackTraceViewStateProvider>
+      ) : (
+        <StackTraceContent
+          event={processedEvent}
+          newestFirst
+          platform={event.platform || 'other'}
+          stacktrace={{
+            framesOmitted: null,
+            hasSystemFrames: false,
+            registers: null,
+            frames,
+          }}
+          stackView={StackView.APP}
+          inlined
+          maxDepth={MAX_STACK_DEPTH}
+        />
+      )}
     </SpanContainer>
   );
 }

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

@@ -78,7 +78,6 @@ describe('stackTrace rows utils', () => {
       frameCountMap,
       newestFirst: false,
       framesOmitted: null,
-      maxDepth: undefined,
     });
 
     expect(rows).toHaveLength(4);
@@ -108,7 +107,6 @@ describe('stackTrace rows utils', () => {
       frameCountMap: getFrameCountMap(frames, true),
       newestFirst: false,
       framesOmitted: null,
-      maxDepth: undefined,
     });
 
     expect(rows).toHaveLength(2);
@@ -130,7 +128,6 @@ describe('stackTrace rows utils', () => {
       frameCountMap: getFrameCountMap(frames, true),
       newestFirst: false,
       framesOmitted: [1, 3],
-      maxDepth: undefined,
     });
 
     expect(rowsWithOmitted.some(row => row.kind === 'omitted')).toBe(true);

static/app/components/stackTrace/getRows.tsx

@@ -116,8 +116,8 @@ export function getRows({
   framesOmitted: [number, number] | null | undefined;
   hiddenFrameToggleMap: Record<number, boolean>;
   includeSystemFrames: boolean;
-  maxDepth: number | undefined;
   newestFirst: boolean;
+  maxDepth?: number;
 }): Row[] {
   const hiddenFrameIndices = getHiddenFrameIndices({
     frames,

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

@@ -812,6 +812,46 @@ describe('Core StackTrace', () => {
     expect(screen.getByText('abc123')).toBeInTheDocument();
   });
 
+  it('shows in-app frames with maxDepth even when system frames outnumber them', async () => {
+    const {event, stacktrace} = makeStackTraceData();
+    const frame = stacktrace.frames[stacktrace.frames.length - 1]!;
+
+    // 2 in-app frames followed by 10 system frames — the in-app frames are
+    // near the start, so a naive maxDepth slice on all frames would miss them.
+    const appFrames = Array.from({length: 2}, (_, i) => ({
+      ...frame,
+      inApp: true,
+      function: `app_fn_${i}`,
+      lineNo: i + 1,
+      instructionAddr: `0xA${i}`,
+    }));
+    const systemFrames = Array.from({length: 10}, (_, i) => ({
+      ...frame,
+      inApp: false,
+      function: `system_fn_${i}`,
+      lineNo: i + 100,
+      instructionAddr: `0xS${i}`,
+    }));
+
+    render(
+      <TestStackTraceProvider
+        event={event}
+        stacktrace={{
+          ...stacktrace,
+          frames: [...appFrames, ...systemFrames],
+        }}
+        maxDepth={4}
+      >
+        <StackTraceFrames frameContextComponent={FrameContent} />
+      </TestStackTraceProvider>
+    );
+
+    const rows = await screen.findAllByTestId('core-stacktrace-frame-row');
+    expect(rows.length).toBeGreaterThanOrEqual(2);
+    expect(screen.getByText('app_fn_0')).toBeInTheDocument();
+    expect(screen.getByText('app_fn_1')).toBeInTheDocument();
+  });
+
   it('renders empty source notation for single frame with no details', async () => {
     const {event, stacktrace} = makeStackTraceData();
     const frame = stacktrace.frames[stacktrace.frames.length - 1]!;

static/app/components/stackTrace/stackTraceProvider.tsx

@@ -66,9 +66,8 @@ export function StackTraceProvider({
         frameCountMap: {},
         newestFirst: isNewestFirst,
         framesOmitted: activeStacktrace.framesOmitted,
-        maxDepth,
       }),
-    [frames, isNewestFirst, activeStacktrace.framesOmitted, maxDepth]
+    [frames, isNewestFirst, activeStacktrace.framesOmitted]
   );
 
   const rows = useMemo(