[dev-overlay] Show error overlay on any thrown value in /app

Author: eps1lon

.changeset/smooth-bears-run.md

@@ -0,0 +1,8 @@
+---
+'next': patch
+---
+
+[dev-overlay] Show error overlay on any thrown value
+
+We used to only show the error overlay on thrown values with a stack property.
+On other thrown values we kept the overlay collapsed.

packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay-error-boundary.tsx

@@ -8,11 +8,10 @@ import DefaultGlobalError, {
 type AppDevOverlayErrorBoundaryProps = {
   children: React.ReactNode
   globalError: [GlobalErrorComponent, React.ReactNode]
-  onError: (value: boolean) => void
+  onError: () => void
 }
 
 type AppDevOverlayErrorBoundaryState = {
-  isReactError: boolean
   reactError: unknown
 }
 
@@ -43,33 +42,28 @@ export class AppDevOverlayErrorBoundary extends PureComponent<
   AppDevOverlayErrorBoundaryProps,
   AppDevOverlayErrorBoundaryState
 > {
-  state = { isReactError: false, reactError: null }
+  state = { reactError: null }
 
   static getDerivedStateFromError(error: Error) {
-    if (!error.stack) {
-      return { isReactError: false, reactError: null }
-    }
-
     RuntimeErrorHandler.hadRuntimeError = true
 
     return {
-      isReactError: true,
       reactError: error,
     }
   }
 
   componentDidCatch() {
-    this.props.onError(this.state.isReactError)
+    this.props.onError()
   }
 
   render() {
     const { children, globalError } = this.props
-    const { isReactError, reactError } = this.state
+    const { reactError } = this.state
 
     const fallback = (
       <ErroredHtml globalError={globalError} error={reactError} />
     )
 
-    return isReactError ? fallback : children
+    return reactError !== null ? fallback : children
   }
 }

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

@@ -86,7 +86,7 @@ export function AppDevOverlay({
     <>
       <AppDevOverlayErrorBoundary
         globalError={globalError}
-        onError={setIsErrorOverlayOpen}
+        onError={openOverlay}
       >
         <ReplaySsrOnlyErrors onBlockingError={openOverlay} />
         {children}

test/development/acceptance-app/hydration-error.test.ts

@@ -210,7 +210,7 @@ describe('Error overlay for hydration errors in App router', () => {
          "componentStack": "...
            <HotReload assetPrefix="" globalError={[...]}>
              <AppDevOverlay state={{nextId:1, ...}} globalError={[...]}>
-               <AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>
+               <AppDevOverlayErrorBoundary globalError={[...]} onError={function}>
                  <ReplaySsrOnlyErrors>
                  <DevRootHTTPAccessFallbackBoundary>
                    <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
@@ -246,7 +246,7 @@ describe('Error overlay for hydration errors in App router', () => {
          "componentStack": "...
            <HotReload assetPrefix="" globalError={[...]}>
              <AppDevOverlay state={{nextId:1, ...}} globalError={[...]}>
-               <AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>
+               <AppDevOverlayErrorBoundary globalError={[...]} onError={function}>
                  <ReplaySsrOnlyErrors>
                  <DevRootHTTPAccessFallbackBoundary>
                    <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
@@ -1046,7 +1046,7 @@ describe('Error overlay for hydration errors in App router', () => {
          "componentStack": "...
          <HotReload assetPrefix="" globalError={[...]}>
            <AppDevOverlay state={{nextId:1, ...}} globalError={[...]}>
-             <AppDevOverlayErrorBoundary globalError={[...]} onError={function bound dispatchSetState}>
+             <AppDevOverlayErrorBoundary globalError={[...]} onError={function}>
                <ReplaySsrOnlyErrors>
                <DevRootHTTPAccessFallbackBoundary>
                  <HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>

test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts

@@ -27,9 +27,16 @@ describe('serialize-circular-error', () => {
   it('should serialize the object from client component in console correctly', async () => {
     const browser = await next.browser('/client')
 
-    // It's not a valid error object, it will display the global-error instead of the error overlay
-    // TODO: handle the error object in the client-side
-    await assertNoRedbox(browser)
+    // TODO: Format arbitrary messages in Redbox
+    await expect(browser).toDisplayRedbox(`
+     {
+       "description": "[object Object]",
+       "environmentLabel": null,
+       "label": "Runtime Error",
+       "source": null,
+       "stack": [],
+     }
+    `)
 
     const bodyText = await browser.elementByCss('body').text()
     expect(bodyText).toContain(