From e8f8a99196b6a172efdd1bc555ff8b217d7fec6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.borno@vercel.com>
Date: Fri, 9 Dec 2022 14:47:52 +0100
Subject: [PATCH 1/6] Add failing test

---
 .../acceptance-app/ReactRefreshLogBox.test.ts | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
index 6e73c94dfa900eb..4cf40e3540af728 100644
--- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts
+++ b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
@@ -1153,4 +1153,52 @@ describe('ReactRefreshLogBox app', () => {
 
     await cleanup()
   })
+
+  test('Server component errors should open up in fullscreen', async () => {
+    const { session, browser, cleanup } = await sandbox(
+      next,
+      new Map([
+        // Start with error
+        [
+          'app/page.js',
+          `
+        export default function Page() {
+          throw new Error('Server component error')
+          return <p id="text">Hello world</p>
+        }
+        `,
+        ],
+      ])
+    )
+    expect(await session.hasRedbox(true)).toBe(true)
+
+    // Remove error
+    await next.patchFile(
+      'app/page.js',
+      `
+      export default function Page() {
+        return <p id="text">Hello world</p>
+      }
+      `
+    )
+    expect(await browser.waitForElementByCss('#text').text()).toBe(
+      'Hello world'
+    )
+    expect(await session.hasRedbox()).toBe(false)
+
+    // Re-add error
+    await next.patchFile(
+      'app/page.js',
+      `
+      export default function Page() {
+        throw new Error('Server component error!')
+        return <p id="text">Hello world</p>
+      }
+      `
+    )
+
+    expect(await session.hasRedbox(true)).toBe(true)
+
+    await cleanup()
+  })
 })

From 1c065a83595a92ee6165a83dcd0c28c21b661c1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.borno@vercel.com>
Date: Fri, 9 Dec 2022 14:52:20 +0100
Subject: [PATCH 2/6] Open in fullscreen if server layer found in stack

---
 .../internal/ReactDevOverlay.tsx                 | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx b/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
index 931a1c93ca74517..5d9571342b821f6 100644
--- a/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
+++ b/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
@@ -14,6 +14,10 @@ import { CssReset } from './styles/CssReset'
 import { parseStack } from './helpers/parseStack'
 import { RootLayoutError } from './container/RootLayoutError'
 
+function isServerComponentError(error: Error): boolean {
+  return !!error.stack?.includes('webpack-internal:///(sc_server)/')
+}
+
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
 }
@@ -76,7 +80,17 @@ class ReactDevOverlay extends React.PureComponent<
             ) : hasBuildError ? (
               <BuildError message={state.buildError!} />
             ) : hasRuntimeErrors ? (
-              <Errors initialDisplayState="minimized" errors={state.errors} />
+              <Errors
+                initialDisplayState={
+                  // If the error occured in a server component render, open up the overlay in fullscreen mode
+                  state.errors.some((err) =>
+                    isServerComponentError(err.event.reason)
+                  )
+                    ? 'fullscreen'
+                    : 'minimized'
+                }
+                errors={state.errors}
+              />
             ) : reactError ? (
               <Errors initialDisplayState="fullscreen" errors={[reactError]} />
             ) : undefined}

From 464631f339b47f5c39a1dd8213db3bcb32625364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.borno@vercel.com>
Date: Sat, 10 Dec 2022 09:55:12 +0100
Subject: [PATCH 3/6] Move function to helper file

---
 .../react-dev-overlay/internal/ReactDevOverlay.tsx           | 5 +----
 .../internal/helpers/is-server-component-error.ts            | 3 +++
 2 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts

diff --git a/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx b/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
index 5d9571342b821f6..c7095d4ad2b7014 100644
--- a/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
+++ b/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
@@ -13,10 +13,7 @@ import { ComponentStyles } from './styles/ComponentStyles'
 import { CssReset } from './styles/CssReset'
 import { parseStack } from './helpers/parseStack'
 import { RootLayoutError } from './container/RootLayoutError'
-
-function isServerComponentError(error: Error): boolean {
-  return !!error.stack?.includes('webpack-internal:///(sc_server)/')
-}
+import { isServerComponentError } from './helpers/is-server-component-error'
 
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
diff --git a/packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts b/packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts
new file mode 100644
index 000000000000000..efc8534360e2374
--- /dev/null
+++ b/packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts
@@ -0,0 +1,3 @@
+export function isServerComponentError(error: Error): boolean {
+  return !!error.stack?.includes('webpack-internal:///(sc_server)/')
+}

From 1a33b8dff3d61067da8a7a9ae7360def7cf53f0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.borno@vercel.com>
Date: Sat, 10 Dec 2022 10:25:37 +0100
Subject: [PATCH 4/6] Use session.patch in test

---
 test/development/acceptance-app/ReactRefreshLogBox.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/development/acceptance-app/ReactRefreshLogBox.test.ts b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
index 4cf40e3540af728..2ed392f210400c1 100644
--- a/test/development/acceptance-app/ReactRefreshLogBox.test.ts
+++ b/test/development/acceptance-app/ReactRefreshLogBox.test.ts
@@ -1173,7 +1173,7 @@ describe('ReactRefreshLogBox app', () => {
     expect(await session.hasRedbox(true)).toBe(true)
 
     // Remove error
-    await next.patchFile(
+    await session.patch(
       'app/page.js',
       `
       export default function Page() {
@@ -1187,7 +1187,7 @@ describe('ReactRefreshLogBox app', () => {
     expect(await session.hasRedbox()).toBe(false)
 
     // Re-add error
-    await next.patchFile(
+    await session.patch(
       'app/page.js',
       `
       export default function Page() {

From 3cd0072c7fa80c1261511f37c3ac985a8c10ef41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.borno@vercel.com>
Date: Sat, 10 Dec 2022 10:26:46 +0100
Subject: [PATCH 5/6] Add hmr CB for server component change

---
 .../components/react-dev-overlay/hot-reloader-client.tsx   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/next/client/components/react-dev-overlay/hot-reloader-client.tsx b/packages/next/client/components/react-dev-overlay/hot-reloader-client.tsx
index 84a1573c9ad9d80..09d90f1fb27871f 100644
--- a/packages/next/client/components/react-dev-overlay/hot-reloader-client.tsx
+++ b/packages/next/client/components/react-dev-overlay/hot-reloader-client.tsx
@@ -348,6 +348,13 @@ function processMessage(
         dispatcher.onRefresh()
       })
 
+      if (process.env.__NEXT_TEST_MODE) {
+        if (self.__NEXT_HMR_CB) {
+          self.__NEXT_HMR_CB()
+          self.__NEXT_HMR_CB = null
+        }
+      }
+
       return
     }
     case 'reloadPage': {

From b49ef70ef623429ebce0751b5d3bef39feab8d08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hannes=20Born=C3=B6?= <hannes.borno@vercel.com>
Date: Mon, 12 Dec 2022 12:45:22 +0100
Subject: [PATCH 6/6] Fix by changing the order in rendering

---
 .../internal/ReactDevOverlay.tsx                  | 15 ++-------------
 .../internal/helpers/is-server-component-error.ts |  3 ---
 2 files changed, 2 insertions(+), 16 deletions(-)
 delete mode 100644 packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts

diff --git a/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx b/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
index c7095d4ad2b7014..5d0c233240fb2f7 100644
--- a/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
+++ b/packages/next/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx
@@ -13,7 +13,6 @@ import { ComponentStyles } from './styles/ComponentStyles'
 import { CssReset } from './styles/CssReset'
 import { parseStack } from './helpers/parseStack'
 import { RootLayoutError } from './container/RootLayoutError'
-import { isServerComponentError } from './helpers/is-server-component-error'
 
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
@@ -76,20 +75,10 @@ class ReactDevOverlay extends React.PureComponent<
               />
             ) : hasBuildError ? (
               <BuildError message={state.buildError!} />
-            ) : hasRuntimeErrors ? (
-              <Errors
-                initialDisplayState={
-                  // If the error occured in a server component render, open up the overlay in fullscreen mode
-                  state.errors.some((err) =>
-                    isServerComponentError(err.event.reason)
-                  )
-                    ? 'fullscreen'
-                    : 'minimized'
-                }
-                errors={state.errors}
-              />
             ) : reactError ? (
               <Errors initialDisplayState="fullscreen" errors={[reactError]} />
+            ) : hasRuntimeErrors ? (
+              <Errors initialDisplayState="minimized" errors={state.errors} />
             ) : undefined}
           </ShadowPortal>
         ) : undefined}
diff --git a/packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts b/packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts
deleted file mode 100644
index efc8534360e2374..000000000000000
--- a/packages/next/client/components/react-dev-overlay/internal/helpers/is-server-component-error.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isServerComponentError(error: Error): boolean {
-  return !!error.stack?.includes('webpack-internal:///(sc_server)/')
-}