Tweak the display for error trace (#67572)

### What

Change the display of error trace in error overlay. 

* Replace unknown location `<anonymous>` from the stack trace but still
keep the content before the location.
* Filter out all `node:` prefixes (including node:async_hooks etc.)



### Why

Regarding to the chaneg in facebook/react#30290

We only stripped the `(<anonymous>)` part but still keep the first part
of stack trace, e.g. in react it could be the component name.

cc @sebmarkbage

packages/next/src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx

@@ -11,13 +11,11 @@ export type RuntimeErrorProps = { error: ReadyRuntimeError }
 export function RuntimeError({ error }: RuntimeErrorProps) {
   const { firstFrame, allLeadingFrames, allCallStackFrames } =
     React.useMemo(() => {
-      const filteredFrames = error.frames.filter(
-        (f) =>
-          !(
-            f.sourceStackFrame.file === '<anonymous>' &&
-            ['stringify', '<unknown>'].includes(f.sourceStackFrame.methodName)
-          ) && !f.sourceStackFrame.file?.startsWith('node:internal')
-      )
+      const filteredFrames = error.frames
+        // Filter out nodejs internal frames since you can't do anything about them.
+        // e.g. node:internal/timers shows up pretty often due to timers, but not helpful to users.
+        // Only present the last line before nodejs internal trace.
+        .filter((f) => !f.sourceStackFrame.file?.startsWith('node:'))
 
       const firstFirstPartyFrameIndex = filteredFrames.findIndex(
         (entry) =>

packages/next/src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts

@@ -117,8 +117,11 @@ function isWebpackBundled(file: string) {
  * webpack://_N_E/./src/hello.tsx => ./src/hello.tsx
  * webpack://./src/hello.tsx => ./src/hello.tsx
  * webpack:///./src/hello.tsx => ./src/hello.tsx
+ *
+ * <anonymous> => ''
  */
 function formatFrameSourceFile(file: string) {
+  if (file === '<anonymous>') return ''
   for (const regex of webpackRegExes) file = file.replace(regex, '')
   return file
 }
@@ -147,7 +150,7 @@ export function getFrameSource(frame: StackFrame): string {
     str += ' '
     str = formatFrameSourceFile(str)
   } catch {
-    str += formatFrameSourceFile(frame.file || '(unknown)') + ' '
+    str += formatFrameSourceFile(frame.file || '') + ' '
   }
 
   if (!isWebpackBundled(frame.file) && frame.lineNumber != null) {

test/development/acceptance-app/ReactRefreshLogBox.test.ts

@@ -840,17 +840,17 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
       new Map([
         [
           'app/page.js',
-          // TODO: repro stringify (<anonymous>)
           outdent`
-        export default function Page() {
-          const e = new Error("Boom!");
-          e.stack += \`
-          at stringify (<anonymous>)
-          at <unknown> (<anonymous>)
-          at foo (bar:1:1)\`;
-          throw e;
-        }
-      `,
+          export default function Page() {
+            try {
+              (function() {
+                throw new Error("This is an error from an anonymous function");
+              })();
+            } catch (e) {
+              throw e
+            }
+          }
+        `,
         ],
       ])
     )
@@ -859,15 +859,16 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     let callStackFrames = await browser.elementsByCss(
       '[data-nextjs-call-stack-frame]'
     )
-    let texts = await Promise.all(callStackFrames.map((f) => f.innerText()))
-    expect(texts).not.toContain('stringify\n<anonymous>')
-    expect(texts).not.toContain('<unknown>\n<anonymous>')
-    expect(texts).toContain('foo\nbar (1:1)')
+    const text = (
+      await Promise.all(callStackFrames.map((f) => f.innerText()))
+    ).join('')
+    expect(text).not.toContain('<anonymous>')
+    expect(text).toContain('app/page.js')
 
     await cleanup()
   })
 
-  test('should hide unrelated frames in stack trace with node:internal calls', async () => {
+  test('should hide unrelated frames in stack trace with nodejs internal calls', async () => {
     const { session, browser, cleanup } = await sandbox(
       next,
       new Map([
@@ -897,6 +898,7 @@ describe.each(['default', 'turbo'])('ReactRefreshLogBox app %s', () => {
     const texts = await Promise.all(callStackFrames.map((f) => f.innerText()))
 
     expect(texts.filter((t) => t.includes('node:internal'))).toHaveLength(0)
+    expect(texts.filter((t) => t.includes('node:async_hooks'))).toHaveLength(0)
 
     await cleanup()
   })