Open server component errors fullscreen (#43887)

#43844 continued.

Make sure Server Component errors always open in fullscreen mode. Currently they only open in fullscreen on initial load - not when adding an Error when updating the file.

If in test env, call `self.__NEXT_HMR_CB` after server component HMR was successful, used in tests for the error overlay.

Closes NEXT-202

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

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

@@ -75,10 +75,10 @@ class ReactDevOverlay extends React.PureComponent<
               />
             ) : hasBuildError ? (
               <BuildError message={state.buildError!} />
-            ) : hasRuntimeErrors ? (
-              <Errors initialDisplayState="minimized" errors={state.errors} />
             ) : reactError ? (
               <Errors initialDisplayState="fullscreen" errors={[reactError]} />
+            ) : hasRuntimeErrors ? (
+              <Errors initialDisplayState="minimized" errors={state.errors} />
             ) : undefined}
           </ShadowPortal>
         ) : undefined}

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

@@ -1221,4 +1221,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()
+  })
 })