Fix stack trace view state consistency

Author: cursoragent

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

@@ -407,6 +407,68 @@ describe('IssueStackTrace', () => {
     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();

static/app/components/stackTrace/issueStackTrace/index.tsx

@@ -77,6 +77,13 @@ interface IndexedExceptionValue extends ExceptionValue {
   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 @@ function IssueStackTraceContent({
               exceptions
                 .map(exc =>
                   rawStacktraceContent({
-                    data: exc.stacktrace,
+                    data: getDisplayedRawStacktrace(exc, isMinified),
                     platform: event.platform,
+                    exception: exc,
+                    isMinified,
                   })
                 )
                 .join('\n\n')
@@ -268,9 +277,7 @@ function IssueStackTraceContent({
               {exceptions
                 .map(exc =>
                   rawStacktraceContent({
-                    data: isMinified
-                      ? (exc.rawStacktrace ?? exc.stacktrace)
-                      : exc.stacktrace,
+                    data: getDisplayedRawStacktrace(exc, isMinified),
                     platform: event.platform,
                     exception: exc,
                     isMinified,

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

@@ -245,6 +245,47 @@ describe('Core StackTrace', () => {
     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();
 

static/app/components/stackTrace/stackTraceProvider.tsx

@@ -45,12 +45,23 @@ export function StackTraceProvider({
   );
   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 @@ export function StackTraceProvider({
       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 @@ export function StackTraceProvider({
       hasAnyExpandableFrames,
       hideSourceMapDebugger,
       hiddenFrameToggleMap,
+      initialHiddenFrameToggleMap,
       lastFrameIndex,
       meta,
       platform,
       project,
       rows,
       activeStacktrace,
+      view,
     ]
   );