improve error DX on pages with RSC build errors

packages/next/src/build/webpack-config.ts

@@ -384,6 +384,7 @@ export function getDefineEnv({
     'process.env.__NEXT_WEB_VITALS_ATTRIBUTION': JSON.stringify(
       config.experimental.webVitalsAttribution
     ),
+    'process.env.__NEXT_ASSET_PREFIX': JSON.stringify(config.assetPrefix),
     ...(isNodeServer || isEdgeServer
       ? {
           // Fix bad-actors in the npm ecosystem (e.g. `node-formidable`)

packages/next/src/client/app-index.tsx

@@ -226,6 +226,8 @@ const StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP
   : React.Fragment
 
 function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement {
+  const [hadRuntimeError, setHadRuntimeError] = React.useState(false)
+
   if (process.env.__NEXT_ANALYTICS_ID) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -244,6 +246,63 @@ function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement {
     }, [])
   }
 
+  if (process.env.NODE_ENV !== 'production') {
+    const ReactDevOverlay: typeof import('./components/react-dev-overlay/internal/ReactDevOverlay').default =
+      require('./components/react-dev-overlay/internal/ReactDevOverlay')
+        .default as typeof import('./components/react-dev-overlay/internal/ReactDevOverlay').default
+
+    const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/internal/error-overlay-reducer').INITIAL_OVERLAY_STATE =
+      require('./components/react-dev-overlay/internal/error-overlay-reducer').INITIAL_OVERLAY_STATE
+
+    const useWebsocket: typeof import('./components/react-dev-overlay/internal/helpers/use-websocket').useWebsocket =
+      require('./components/react-dev-overlay/internal/helpers/use-websocket').useWebsocket
+
+    // subscribe to hmr only if an error was captured, so that we don't have two hmr websockets active
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const webSocketRef = useWebsocket(
+      process.env.__NEXT_ASSET_PREFIX || '',
+      hadRuntimeError
+    )
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      const handler = (event: MessageEvent) => {
+        let obj
+        try {
+          obj = JSON.parse(event.data)
+        } catch {}
+
+        if (!obj || !('action' in obj)) {
+          return
+        }
+
+        // minimal "hot reload" support for RSC errors
+        if (obj.action === 'serverComponentChanges' && hadRuntimeError) {
+          window.location.reload()
+        }
+      }
+
+      const websocket = webSocketRef.current
+      if (websocket) {
+        websocket.addEventListener('message', handler)
+      }
+
+      return () =>
+        websocket && websocket.removeEventListener('message', handler)
+    }, [webSocketRef, hadRuntimeError])
+
+    // if an error is thrown while rendering an RSC stream, this will catch it in dev
+    // and show the error overlay
+    return (
+      <ReactDevOverlay
+        state={INITIAL_OVERLAY_STATE}
+        onReactError={() => setHadRuntimeError(true)}
+      >
+        {children}
+      </ReactDevOverlay>
+    )
+  }
+
   return children as React.ReactElement
 }
 

packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx

@@ -12,6 +12,7 @@ import { useRouter } from '../navigation'
 import {
   ACTION_NOT_FOUND,
   ACTION_VERSION_INFO,
+  INITIAL_OVERLAY_STATE,
   errorOverlayReducer,
 } from './internal/error-overlay-reducer'
 import {
@@ -459,14 +460,10 @@ export default function HotReload({
   notFoundStyles?: React.ReactNode
   asNotFound?: boolean
 }) {
-  const [state, dispatch] = useReducer(errorOverlayReducer, {
-    nextId: 1,
-    buildError: null,
-    errors: [],
-    notFound: false,
-    refreshState: { type: 'idle' },
-    versionInfo: { installed: '0.0.0', staleness: 'unknown' },
-  })
+  const [state, dispatch] = useReducer(
+    errorOverlayReducer,
+    INITIAL_OVERLAY_STATE
+  )
   const dispatcher = useMemo((): Dispatcher => {
     return {
       onBuildOk() {

packages/next/src/client/components/react-dev-overlay/internal/error-overlay-reducer.ts

@@ -11,6 +11,14 @@ export const ACTION_UNHANDLED_ERROR = 'unhandled-error'
 export const ACTION_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const ACTION_VERSION_INFO = 'version-info'
 export const ACTION_NOT_FOUND = 'not-found'
+export const INITIAL_OVERLAY_STATE: OverlayState = {
+  nextId: 1,
+  buildError: null,
+  errors: [],
+  notFound: false,
+  refreshState: { type: 'idle' },
+  versionInfo: { installed: '0.0.0', staleness: 'unknown' },
+}
 
 interface BuildOkAction {
   type: typeof ACTION_BUILD_OK

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-websocket.ts

@@ -2,11 +2,14 @@ import { useCallback, useContext, useEffect, useRef } from 'react'
 import { GlobalLayoutRouterContext } from '../../../../../shared/lib/app-router-context'
 import { getSocketProtocol } from './get-socket-protocol'
 
-export function useWebsocket(assetPrefix: string) {
+export function useWebsocket(
+  assetPrefix: string,
+  shouldSubscribe: boolean = true
+) {
   const webSocketRef = useRef<WebSocket>()
 
   useEffect(() => {
-    if (webSocketRef.current) {
+    if (webSocketRef.current || !shouldSubscribe) {
       return
     }
 
@@ -23,7 +26,7 @@ export function useWebsocket(assetPrefix: string) {
     }
 
     webSocketRef.current = new window.WebSocket(`${url}/_next/webpack-hmr`)
-  }, [assetPrefix])
+  }, [assetPrefix, shouldSubscribe])
 
   return webSocketRef
 }

packages/next/src/server/app-render/app-render.tsx

@@ -749,7 +749,7 @@ export async function renderToHTMLOrFlight(
           !isValidElementType(Component)
         ) {
           throw new Error(
-            `The default export is not a React Component in page: "${page}"`
+            `The default export is not a React Component in page: "${pagePath}"`
           )
         }
 

test/development/acceptance-app/fixtures/rsc-build-errors/app/server-with-errors/page-export-initial-error/page.js

@@ -0,0 +1,3 @@
+export function Page() {
+  return <p>Page</p>
+}

test/development/acceptance-app/rsc-build-errors.test.ts

@@ -138,7 +138,22 @@ describe('Error overlay - RSC build errors', () => {
 
     expect(await session.hasRedbox(true)).toBe(true)
     expect(await session.getRedboxDescription()).toInclude(
-      'The default export is not a React Component in page:'
+      'The default export is not a React Component in page: "/server-with-errors/page-export"'
+    )
+
+    await cleanup()
+  })
+
+  it('should error when page component export is not valid on initial load', async () => {
+    const { session, cleanup } = await sandbox(
+      next,
+      undefined,
+      '/server-with-errors/page-export-initial-error'
+    )
+
+    expect(await session.hasRedbox(true)).toBe(true)
+    expect(await session.getRedboxDescription()).toInclude(
+      'The default export is not a React Component in page: "/server-with-errors/page-export-initial-error"'
     )
 
     await cleanup()