Add editor links to RSC build error

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseRSC.ts

@@ -141,7 +141,8 @@ export function getRscError(
 
   const error = new SimpleWebpackError(
     fileName,
-    formattedError[0] +
+    'ReactServerComponentsError:\n' +
+      formattedError[0] +
       formattedError[1] +
       moduleTrace
         .map((m) =>

packages/next/src/client/components/react-dev-overlay/internal/components/CodeFrame/CodeFrame.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { getFrameSource } from '../../helpers/stack-frame'
+import { useOpenInEditor } from '../../helpers/use-open-in-editor'
 
 export type CodeFrameProps = { stackFrame: StackFrame; codeFrame: string }
 
@@ -44,25 +45,11 @@ export const CodeFrame: React.FC<CodeFrameProps> = function CodeFrame({
     })
   }, [formattedFrame])
 
-  const open = React.useCallback(() => {
-    const params = new URLSearchParams()
-    for (const key in stackFrame) {
-      params.append(key, ((stackFrame as any)[key] ?? '').toString())
-    }
-
-    self
-      .fetch(
-        `${
-          process.env.__NEXT_ROUTER_BASEPATH || ''
-        }/__nextjs_launch-editor?${params.toString()}`
-      )
-      .then(
-        () => {},
-        () => {
-          console.error('There was an issue opening this code in your editor.')
-        }
-      )
-  }, [stackFrame])
+  const open = useOpenInEditor({
+    file: stackFrame.file,
+    lineNumber: stackFrame.lineNumber,
+    column: stackFrame.column,
+  })
 
   // TODO: make the caret absolute
   return (

packages/next/src/client/components/react-dev-overlay/internal/components/Terminal/Terminal.tsx

@@ -1,5 +1,6 @@
 import Anser from 'next/dist/compiled/anser'
 import * as React from 'react'
+import { WithOpenInEditorLinks } from '../WithOpenInEditorLinks'
 
 export type TerminalProps = { content: string }
 
@@ -29,7 +30,7 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
                 : undefined),
             }}
           >
-            {entry.content}
+            <WithOpenInEditorLinks content={entry.content} />
           </span>
         ))}
       </pre>

packages/next/src/client/components/react-dev-overlay/internal/components/WithOpenInEditorLinks/WithOpenInEditorLinks.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useOpenInEditor } from '../../helpers/use-open-in-editor'
+
+function EditorLink({ file }: { file: string }) {
+  const open = useOpenInEditor({
+    file,
+    column: 1,
+    lineNumber: 1,
+  })
+
+  return (
+    <div
+      data-with-open-in-editor-link
+      tabIndex={10}
+      role={'link'}
+      onClick={open}
+      title={'Click to open in your editor'}
+    >
+      {file}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+        <polyline points="15 3 21 3 21 9"></polyline>
+        <line x1="10" y1="14" x2="21" y2="3"></line>
+      </svg>
+    </div>
+  )
+}
+
+export function WithOpenInEditorLinks({ content }: { content: string }) {
+  if (/ReactServerComponentsError:/.test(content)) {
+    // It's an RSC Build Error
+    const lines = content.split('\n')
+
+    // Grab the lines at the end containing the files
+    const files = []
+    while (/app\/.+\./.test(lines[lines.length - 1])) {
+      const file = lines.pop()!.trim()
+      files.unshift(file)
+    }
+
+    return (
+      <>
+        {lines.join('\n')}
+        {files.map((file) => (
+          <EditorLink key={file} file={file} />
+        ))}
+      </>
+    )
+  }
+
+  return <>{content}</>
+}

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

@@ -0,0 +1 @@
+export { WithOpenInEditorLinks } from './WithOpenInEditorLinks'

packages/next/src/client/components/react-dev-overlay/internal/components/WithOpenInEditorLinks/styles.tsx

@@ -0,0 +1,20 @@
+import { noop as css } from '../../helpers/noop-template'
+
+const styles = css`
+  [data-with-open-in-editor-link] svg {
+    width: auto;
+    height: var(--size-font-small);
+    margin-left: var(--size-gap);
+  }
+  [data-with-open-in-editor-link] {
+    cursor: pointer;
+  }
+  [data-with-open-in-editor-link]:hover {
+    text-decoration: underline dotted;
+  }
+  [data-with-open-in-editor-link] {
+    margin-left: var(--size-gap-double);
+  }
+`
+
+export { styles }

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

@@ -4,6 +4,7 @@ import {
   getFrameSource,
   type OriginalStackFrame,
 } from '../../helpers/stack-frame'
+import { useOpenInEditor } from '../../helpers/use-open-in-editor'
 
 export const CallStackFrame: React.FC<{ frame: OriginalStackFrame }> =
   function CallStackFrame({ frame }) {
@@ -12,30 +13,15 @@ export const CallStackFrame: React.FC<{ frame: OriginalStackFrame }> =
 
     const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame
     const hasSource = Boolean(frame.originalCodeFrame)
-
-    const open = React.useCallback(() => {
-      if (!hasSource) return
-
-      const params = new URLSearchParams()
-      for (const key in f) {
-        params.append(key, ((f as any)[key] ?? '').toString())
-      }
-
-      self
-        .fetch(
-          `${
-            process.env.__NEXT_ROUTER_BASEPATH || ''
-          }/__nextjs_launch-editor?${params.toString()}`
-        )
-        .then(
-          () => {},
-          () => {
-            console.error(
-              'There was an issue opening this code in your editor.'
-            )
+    const open = useOpenInEditor(
+      hasSource
+        ? {
+            file: f.file,
+            lineNumber: f.lineNumber,
+            column: f.column,
           }
-        )
-    }, [hasSource, f])
+        : undefined
+    )
 
     return (
       <div data-nextjs-call-stack-frame>

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-open-in-editor.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react'
+
+export function useOpenInEditor({
+  file,
+  lineNumber,
+  column,
+}: {
+  file?: string | null
+  lineNumber?: number | null
+  column?: number | null
+} = {}) {
+  const openInEditor = useCallback(() => {
+    if (file == null || lineNumber == null || column == null) return
+
+    const params = new URLSearchParams()
+    params.append('file', file)
+    params.append('lineNumber', String(lineNumber))
+    params.append('column', String(column))
+
+    self
+      .fetch(
+        `${
+          process.env.__NEXT_ROUTER_BASEPATH || ''
+        }/__nextjs_launch-editor?${params.toString()}`
+      )
+      .then(
+        () => {},
+        () => {
+          console.error('There was an issue opening this code in your editor.')
+        }
+      )
+  }, [file, lineNumber, column])
+
+  return openInEditor
+}

packages/next/src/client/components/react-dev-overlay/internal/styles/ComponentStyles.tsx

@@ -6,6 +6,7 @@ import { styles as leftRightDialogHeader } from '../components/LeftRightDialogHe
 import { styles as overlay } from '../components/Overlay/styles'
 import { styles as terminal } from '../components/Terminal/styles'
 import { styles as toast } from '../components/Toast'
+import { styles as openInEditorLinks } from '../components/WithOpenInEditorLinks/styles'
 import { styles as buildErrorStyles } from '../container/BuildError'
 import { styles as rootLayoutErrorStyles } from '../container/RootLayoutError'
 import { styles as containerErrorStyles } from '../container/Errors'
@@ -22,6 +23,7 @@ export function ComponentStyles() {
         ${leftRightDialogHeader}
         ${codeFrame}
         ${terminal}
+        ${openInEditorLinks}
 
         ${buildErrorStyles}
         ${rootLayoutErrorStyles}

test/development/acceptance/server-component-compiler-errors-in-pages.test.ts

@@ -50,6 +50,7 @@ createNextDescribe(
       )
       expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
         "./components/Comp.js
+        ReactServerComponentsError:
 
         You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://beta.nextjs.org/docs/rendering/server-and-client-components
 
@@ -91,6 +92,7 @@ createNextDescribe(
       )
       expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
         "./components/Comp.js
+        ReactServerComponentsError:
 
         You're importing a component that needs server-only. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://beta.nextjs.org/docs/rendering/server-and-client-components
 
@@ -131,6 +133,7 @@ createNextDescribe(
       )
       expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
         "./components/Comp.js
+        ReactServerComponentsError:
 
         You have tried to use the \\"use client\\" directive which is not supported in the pages/ directory. Read more: https://beta.nextjs.org/docs/rendering/server-and-client-components
 
@@ -171,6 +174,7 @@ createNextDescribe(
       )
       expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
         "./components/Comp.js
+        ReactServerComponentsError:
 
         You have tried to use the \\"use client\\" directive which is not supported in the pages/ directory. Read more: https://beta.nextjs.org/docs/rendering/server-and-client-components
 

test/e2e/app-dir/rsc-errors/app/client-with-errors/dynamic/page.js

@@ -2,7 +2,12 @@
 
 import dynamic from 'next/dynamic'
 
-const Component = dynamic(async () => undefined, { ssr: false })
+const Component = dynamic(
+  async () => () => <p id="dynamic-world">hello dynamic world</p>,
+  {
+    ssr: false,
+  }
+)
 
 export default function Page() {
   return (

test/e2e/app-dir/rsc-errors/app/client-with-errors/server-only-in-client/server-only-lib.js

@@ -1,4 +1,4 @@
-import 'server-only'
+// import 'server-only'
 
 export default function ServerOnlyLib() {
   return 'server-only-lib'

test/e2e/app-dir/rsc-errors/app/editor-links/component.js

@@ -0,0 +1,4 @@
+// import { useState } from 'react'
+export default function Component() {
+  return <div id="component-editor-links">Component</div>
+}

test/e2e/app-dir/rsc-errors/app/editor-links/page.js

@@ -0,0 +1,5 @@
+import Component from './component'
+
+export default function Page() {
+  return <Component />
+}

test/e2e/app-dir/rsc-errors/app/server-with-errors/client-only-in-server/client-only-lib.js

@@ -1,4 +1,4 @@
-import 'client-only'
+// import 'client-only'
 
 export default function ClientOnlyLib() {
   return 'client-only-lib'