feat(issues): New stack trace component

[scttcper]

New stack trace component (non-native):

• no longer uses a mix of emotion and global styles
• stories for many of the complex states
• A few contexts instead of prop drilling
• Frame content does not render until opened, speeding up issue details render speed on large 100+ frame stack traces.
• The regular opportunities that show up when re-writting, like using our components
• Styles are no longer shared with native frames which has made them historically difficult to touch, since you had to look at the variations of regular errors and native errors.

Components are now broken into IssueStackTrace and StackTrace. All fetch requests happen in IssueStackTrace and StackTrace components are somewhat designed to be compostable. It got tricky in there.

stories - https://sentry-9kfjix4ca.sentry.dev/stories/product/components/stacktrace/stacktrace/

[sentry]

Bug: The getDefaultPlatform function incorrectly prioritizes event.platform over the more specific frame.platform, which is a regression from the previous logic and inconsistent with the backend.
_{Severity: MEDIUM}

Suggested Fix

In stackTraceProvider.tsx, modify the getDefaultPlatform function to prioritize the frame-level platform before falling back to the event-level platform. Change the return statement to return framePlatform ?? event.platform ?? 'other'; to align with the old implementation and backend logic.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/components/stackTrace/stackTraceProvider.tsx#L139-L142

Potential issue: The `getDefaultPlatform` function in the new stack trace provider
incorrectly determines the platform for rendering frames. It prioritizes the event-level
platform (`event.platform`) over the more specific frame-level platform
(`frame.platform`). This is a regression from the previous implementation and is
inconsistent with the backend's grouping logic, which both prioritize the frame's
platform. This can lead to incorrect platform-specific rendering for stack trace frames,
such as applying the wrong line number formatting or other platform-specific UI features
when a frame's platform differs from the overall event's platform.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Chained exception copy ignores minified toggle state
  • The chained-exception copy path now uses the same minified-versus-symbolicated stacktrace selection as the rendered raw view and is covered by a regression test.
• ✅ Fixed: Hidden frame toggle state not reset on frame change
  • Hidden-frame expansion state is now scoped to the active stacktrace/view so switching variants resets stale groups immediately, with regression coverage added.

Or push these changes by commenting:

@cursor push 359f8d2144

Preview (359f8d2144)

diff --git a/static/app/components/stackTrace/issueStackTrace/index.spec.tsx b/static/app/components/stackTrace/issueStackTrace/index.spec.tsx
--- a/static/app/components/stackTrace/issueStackTrace/index.spec.tsx
+++ b/static/app/components/stackTrace/issueStackTrace/index.spec.tsx
@@ -407,6 +407,68 @@
     expect(firstIdx).toBeLessThan(secondIdx);
   });
 
+  it('copies unsymbolicated raw text for chained exceptions when minified view is active', async () => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValue(''),
+      },
+    });
+
+    const {event, stacktrace} = makeStackTraceData();
+    const symbolicatedStacktrace: StacktraceWithFrames = {
+      ...stacktrace,
+      frames: stacktrace.frames.map((frame, index) => ({
+        ...frame,
+        filename: `symbolicated/${index}.js`,
+      })),
+    };
+    const rawStacktrace: StacktraceWithFrames = {
+      ...symbolicatedStacktrace,
+      frames: symbolicatedStacktrace.frames.map((frame, index) => ({
+        ...frame,
+        filename: `minified/${index}.js`,
+      })),
+    };
+
+    render(
+      <IssueStackTrace
+        event={event}
+        values={[
+          {
+            type: 'RootError',
+            value: 'root cause',
+            module: 'app.main',
+            mechanism: {handled: false, type: 'generic'},
+            stacktrace: symbolicatedStacktrace,
+            rawStacktrace,
+            threadId: null,
+          },
+          {
+            type: 'NestedError',
+            value: 'nested cause',
+            module: 'app.nested',
+            mechanism: {handled: false, type: 'generic'},
+            stacktrace: symbolicatedStacktrace,
+            rawStacktrace,
+            threadId: null,
+          },
+        ]}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Display options'}));
+    await userEvent.click(await screen.findByRole('option', {name: 'Unsymbolicated'}));
+
+    await userEvent.click(screen.getByRole('button', {name: 'Copy as'}));
+    await userEvent.click(await screen.findByText('Text'));
+
+    await waitFor(() => expect(navigator.clipboard.writeText).toHaveBeenCalled());
+
+    const copiedText = (navigator.clipboard.writeText as jest.Mock).mock.calls[0][0];
+    expect(copiedText).toContain('minified/0.js');
+    expect(copiedText).not.toContain('symbolicated/0.js');
+  });
+
   describe('standalone stacktrace prop', () => {
     it('renders frame rows for a standalone stacktrace', async () => {
       const {event, stacktrace} = makeStackTraceData();

diff --git a/static/app/components/stackTrace/issueStackTrace/index.tsx b/static/app/components/stackTrace/issueStackTrace/index.tsx
--- a/static/app/components/stackTrace/issueStackTrace/index.tsx
+++ b/static/app/components/stackTrace/issueStackTrace/index.tsx
@@ -77,6 +77,13 @@
   stacktrace: StacktraceType;
 }
 
+function getDisplayedRawStacktrace(
+  exc: IndexedExceptionValue,
+  isMinified: boolean
+): StacktraceType {
+  return isMinified ? (exc.rawStacktrace ?? exc.stacktrace) : exc.stacktrace;
+}
+
 /** Resolves symbolicated vs raw (minified) exception fields. */
 function resolveExceptionFields(exc: IndexedExceptionValue, isMinified: boolean) {
   return {
@@ -251,8 +258,10 @@
               exceptions
                 .map(exc =>
                   rawStacktraceContent({
-                    data: exc.stacktrace,
+                    data: getDisplayedRawStacktrace(exc, isMinified),
                     platform: event.platform,
+                    exception: exc,
+                    isMinified,
                   })
                 )
                 .join('\n\n')
@@ -268,9 +277,7 @@
               {exceptions
                 .map(exc =>
                   rawStacktraceContent({
-                    data: isMinified
-                      ? (exc.rawStacktrace ?? exc.stacktrace)
-                      : exc.stacktrace,
+                    data: getDisplayedRawStacktrace(exc, isMinified),
                     platform: event.platform,
                     exception: exc,
                     isMinified,

diff --git a/static/app/components/stackTrace/stackTrace.spec.tsx b/static/app/components/stackTrace/stackTrace.spec.tsx
--- a/static/app/components/stackTrace/stackTrace.spec.tsx
+++ b/static/app/components/stackTrace/stackTrace.spec.tsx
@@ -245,6 +245,47 @@
     expect(screen.getByRole('button', {name: 'Hide 1 frame'})).toBeInTheDocument();
   });
 
+  it('resets hidden frame toggles when switching stacktrace variants', async () => {
+    const {event, stacktrace} = makeStackTraceData();
+    const symbolicatedStacktrace: StacktraceWithFrames = {
+      ...stacktrace,
+      frames: [
+        {...stacktrace.frames[0]!, filename: 'symbolicated/hidden.js', inApp: false},
+        {...stacktrace.frames[1]!, filename: 'symbolicated/visible.js', inApp: false},
+        {...stacktrace.frames[2]!, filename: 'symbolicated/app.js', inApp: true},
+      ],
+    };
+    const minifiedStacktrace: StacktraceWithFrames = {
+      ...symbolicatedStacktrace,
+      frames: [
+        {...symbolicatedStacktrace.frames[0]!, filename: 'minified/hidden.js'},
+        {...symbolicatedStacktrace.frames[1]!, filename: 'minified/visible.js'},
+        {...symbolicatedStacktrace.frames[2]!, filename: 'minified/app.js'},
+      ],
+    };
+
+    render(
+      <TestStackTraceProvider
+        event={event}
+        stacktrace={symbolicatedStacktrace}
+        minifiedStacktrace={minifiedStacktrace}
+      >
+        <DisplayOptions />
+        <StackTraceFrames frameContextComponent={FrameContent} />
+      </TestStackTraceProvider>
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Show 1 more frame'}));
+    expect(screen.getByText('symbolicated/hidden.js')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', {name: 'Display options'}));
+    await userEvent.click(await screen.findByRole('option', {name: 'Unsymbolicated'}));
+
+    expect(screen.getByText('minified/hidden.js')).not.toBeVisible();
+    expect(screen.queryByRole('button', {name: 'Hide 1 frame'})).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Show 1 more frame'})).toBeInTheDocument();
+  });
+
   it('renders frame badges for in-app frames only', async () => {
     renderStackTrace();
 

diff --git a/static/app/components/stackTrace/stackTraceProvider.tsx b/static/app/components/stackTrace/stackTraceProvider.tsx
--- a/static/app/components/stackTrace/stackTraceProvider.tsx
+++ b/static/app/components/stackTrace/stackTraceProvider.tsx
@@ -45,12 +45,23 @@
   );
   const lastFrameIndex = useMemo(() => getLastFrameIndex(frames), [frames]);
 
-  const [hiddenFrameToggleMap, setHiddenFrameToggleMap] = useState(() =>
-    createInitialHiddenFrameToggleMap(frames, view === 'full')
+  const shouldIncludeSystemFrames = view === 'full';
+  const initialHiddenFrameToggleMap = useMemo(
+    () => createInitialHiddenFrameToggleMap(frames, shouldIncludeSystemFrames),
+    [frames, shouldIncludeSystemFrames]
   );
+  const [hiddenFrameToggleState, setHiddenFrameToggleState] = useState(() => ({
+    stacktrace: activeStacktrace,
+    view,
+    map: initialHiddenFrameToggleMap,
+  }));
+  const hiddenFrameToggleMap =
+    hiddenFrameToggleState.stacktrace === activeStacktrace &&
+    hiddenFrameToggleState.view === view
+      ? hiddenFrameToggleState.map
+      : initialHiddenFrameToggleMap;
 
   const platform = platformProp ?? getDefaultPlatform(activeStacktrace, event);
-  const shouldIncludeSystemFrames = view === 'full';
 
   const frameCountMap = useMemo(
     () => getFrameCountMap(frames, shouldIncludeSystemFrames),
@@ -129,10 +140,21 @@
       hiddenFrameToggleMap,
       lastFrameIndex,
       toggleHiddenFrames: (frameIndex: number) => {
-        setHiddenFrameToggleMap(prevState => ({
-          ...prevState,
-          [frameIndex]: !prevState[frameIndex],
-        }));
+        setHiddenFrameToggleState(prevState => {
+          const currentMap =
+            prevState.stacktrace === activeStacktrace && prevState.view === view
+              ? prevState.map
+              : initialHiddenFrameToggleMap;
+
+          return {
+            stacktrace: activeStacktrace,
+            view,
+            map: {
+              ...currentMap,
+              [frameIndex]: !currentMap[frameIndex],
+            },
+          };
+        });
       },
     }),
     [
@@ -144,12 +166,14 @@
       hasAnyExpandableFrames,
       hideSourceMapDebugger,
       hiddenFrameToggleMap,
+      initialHiddenFrameToggleMap,
       lastFrameIndex,
       meta,
       platform,
       project,
       rows,
       activeStacktrace,
+      view,
     ]
   );

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[sentry]

Bug: The hiddenFrameToggleMap state is not reset when frames change, causing stale indices when toggling between minified and symbolicated views.
_{Severity: MEDIUM}

Suggested Fix

Reset the hiddenFrameToggleMap state whenever the frames prop changes. This can be achieved by using a useEffect hook that listens for changes to frames and calls setHiddenFrameToggleMap to re-initialize the state based on the new frames.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/components/stackTrace/stackTraceProvider.tsx#L48-L50

Potential issue: In the `StackTraceProvider` component, the `hiddenFrameToggleMap` state
is initialized only once when the component mounts. When the user toggles between
minified and symbolicated stack traces, the `frames` array changes, but
`hiddenFrameToggleMap` is not updated. This causes it to retain stale frame indices from
the previous stack trace. If the minified and symbolicated stack traces have different
frame counts or structures, any subsequent attempt to toggle hidden frames will use
incorrect indices, leading to the wrong frames being shown or hidden, or the toggle
having no effect.