[dev-overlay] Stop grouping callstack frames into ignored vs. not ignored

Author: eps1lon

packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.stories.tsx

@@ -62,6 +62,7 @@ export const MultipleFrames: Story = {
           lineNumber: 5,
         },
       },
+      ...Array(5).fill(ignoredFrame),
       {
         ...frame,
         originalStackFrame: {

packages/next/src/client/components/react-dev-overlay/ui/components/errors/call-stack/call-stack.tsx

@@ -11,24 +11,8 @@ export function CallStack({ frames, dialogResizerRef }: CallStackProps) {
   const initialDialogHeight = useRef<number>(NaN)
   const [isIgnoreListOpen, setIsIgnoreListOpen] = useState(false)
 
-  const { visibleFrames, ignoredFrames, ignoreListLength } = useMemo(() => {
-    const visible: OriginalStackFrame[] = []
-    const ignored: OriginalStackFrame[] = []
-
-    for (const frame of frames) {
-      if (!frame.ignored) {
-        visible.push(frame)
-      }
-      if (frame.ignored) {
-        ignored.push(frame)
-      }
-    }
-
-    return {
-      visibleFrames: visible,
-      ignoredFrames: ignored,
-      ignoreListLength: ignored.length,
-    }
+  const ignoredFramesTally = useMemo(() => {
+    return frames.reduce((tally, frame) => tally + (frame.ignored ? 1 : 0), 0)
   }, [frames])
 
   function onToggleIgnoreList() {
@@ -65,36 +49,22 @@ export function CallStack({ frames, dialogResizerRef }: CallStackProps) {
             {frames.length}
           </span>
         </p>
-        {ignoreListLength > 0 && (
+        {ignoredFramesTally > 0 && (
           <button
             data-expand-ignore-button={isIgnoreListOpen}
             className="error-overlay-call-stack-ignored-list-toggle-button"
             onClick={onToggleIgnoreList}
           >
-            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoreListLength} ignore-listed frames`}
+            {`${isIgnoreListOpen ? 'Hide' : 'Show'} ${ignoredFramesTally} ignore-listed frame(s)`}
             <ChevronUpDown />
           </button>
         )}
       </div>
-      {visibleFrames.map((frame, frameIndex) => (
-        <CallStackFrame
-          key={`call-stack-leading-${frameIndex}`}
-          frame={frame}
-          index={frameIndex}
-        />
-      ))}
-
-      {isIgnoreListOpen && (
-        <>
-          {ignoredFrames.map((frame, frameIndex) => (
-            <CallStackFrame
-              key={`call-stack-ignored-${frameIndex}`}
-              frame={frame}
-              index={frameIndex}
-            />
-          ))}
-        </>
-      )}
+      {frames.map((frame, frameIndex) => {
+        return !frame.ignored || isIgnoreListOpen ? (
+          <CallStackFrame key={frameIndex} frame={frame} index={frameIndex} />
+        ) : null
+      })}
     </div>
   )
 }

test/development/app-dir/error-overlay/error-ignored-frames/error-ignored-frames.test.ts

@@ -99,15 +99,15 @@ describe('error-ignored-frames', () => {
     if (isTurbopack) {
       expect(expendedStack).toMatchInlineSnapshot(`
        "at <unknown> (app/interleaved/page.tsx (7:11))
-       at Page (app/interleaved/page.tsx (6:35))
        at invokeCallback ()
+       at Page (app/interleaved/page.tsx (6:35))
        at ClientPageRoot ()"
       `)
     } else {
       expect(expendedStack).toMatchInlineSnapshot(`
        "at eval (app/interleaved/page.tsx (7:11))
-       at Page (app/interleaved/page.tsx (6:36))
        at invokeCallback (node_modules/interleave/index.js (2:1))
+       at Page (app/interleaved/page.tsx (6:36))
        at ClientPageRoot (../src/client/components/client-page.tsx (60:12))"
       `)
     }