recover the effects double logged error

Author: huozhi

packages/next/src/client/components/react-dev-overlay/internal/helpers/stitched-error.ts

@@ -6,7 +6,7 @@ const REACT_ERROR_STACK_BOTTOM_FRAME_REGEX = new RegExp(
   `(at ${REACT_ERROR_STACK_BOTTOM_FRAME} )|(${REACT_ERROR_STACK_BOTTOM_FRAME}\\@)`
 )
 
-export function stripAfterReactBottomFrame(stack: string): string {
+function stripAfterReactBottomFrame(stack: string): string {
   const stackLines = stack.split('\n')
   const indexOfSplit = stackLines.findIndex((line) =>
     REACT_ERROR_STACK_BOTTOM_FRAME_REGEX.test(line)

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -6,7 +6,6 @@ import { formatConsoleArgs } from '../../../../lib/console'
 import isError from '../../../../../lib/is-error'
 import { createUnhandledError } from './console-error'
 import { enqueueConsecutiveDedupedError } from './enqueue-client-error'
-import { stripAfterReactBottomFrame } from './stitched-error'
 
 export type ErrorHandler = (error: Error) => void
 
@@ -27,7 +26,7 @@ export function handleClientError(
     error = createUnhandledError(formattedErrorMessage)
     // When the originStack is provided, strip the stack after the react-bottom-stack-frame
     if (originStack) {
-      error.stack = stripAfterReactBottomFrame(originStack)
+      error.stack = originStack
     }
   } else {
     error = originError

test/development/app-dir/capture-console-error/app/browser/render-loop/page.js

@@ -0,0 +1,8 @@
+'use client'
+
+export default function Page() {
+  for (let i = 0; i < 3; i++) {
+    console.error('trigger an console.error in loop of render')
+  }
+  return <p>render</p>
+}

test/development/app-dir/capture-console-error/capture-console-error.test.ts

@@ -104,7 +104,7 @@ describe('app-dir - capture-console-error', () => {
       expect(result).toMatchInlineSnapshot(`
         {
           "callStacks": null,
-          "count": 1,
+          "count": 2,
           "description": "trigger an console.error in render",
           "source": "app/browser/render/page.js (4:11) @ Page
 
@@ -121,7 +121,52 @@ describe('app-dir - capture-console-error', () => {
       expect(result).toMatchInlineSnapshot(`
         {
           "callStacks": null,
-          "count": 1,
+          "count": 2,
+          "description": "trigger an console.error in render",
+          "source": "app/browser/render/page.js (4:11) @ error
+
+          2 |
+          3 | export default function Page() {
+        > 4 |   console.error('trigger an console.error in render')
+            |           ^
+          5 |   return <p>render</p>
+          6 | }
+          7 |",
+        }
+      `)
+    }
+  })
+
+  it('should capture browser console error in render and dedupe when multi same errors logged', async () => {
+    const browser = await next.browser('/browser/render')
+
+    await waitForAndOpenRuntimeError(browser)
+    await assertHasRedbox(browser)
+
+    const result = await getRedboxResult(browser)
+
+    if (process.env.TURBOPACK) {
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "callStacks": null,
+          "count": 2,
+          "description": "trigger an console.error in render",
+          "source": "app/browser/render/page.js (4:11) @ Page
+
+          2 |
+          3 | export default function Page() {
+        > 4 |   console.error('trigger an console.error in render')
+            |           ^
+          5 |   return <p>render</p>
+          6 | }
+          7 |",
+        }
+      `)
+    } else {
+      expect(result).toMatchInlineSnapshot(`
+        {
+          "callStacks": null,
+          "count": 2,
           "description": "trigger an console.error in render",
           "source": "app/browser/render/page.js (4:11) @ error
 
@@ -149,7 +194,7 @@ describe('app-dir - capture-console-error', () => {
       expect(result).toMatchInlineSnapshot(`
         {
           "callStacks": null,
-          "count": 1,
+          "count": 2,
           "description": "ssr console error:client",
           "source": "app/ssr/page.js (4:11) @ Page
 
@@ -166,7 +211,7 @@ describe('app-dir - capture-console-error', () => {
       expect(result).toMatchInlineSnapshot(`
         {
           "callStacks": null,
-          "count": 1,
+          "count": 2,
           "description": "ssr console error:client",
           "source": "app/ssr/page.js (4:11) @ error