Open server component errors fullscreen

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': {

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

@@ -13,6 +13,7 @@ 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,7 +77,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}

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)/')
+}

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 session.patch(
+      '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 session.patch(
+      '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()
+  })
 })