Repository: vercel/next.js
Pull request: [dev-overlay] Show error overlay on any thrown value in /app

May have been a leftover from earlier. 

We always consider any throw. Even without a sync stack, we might still have an async stack to show. And even if we have no stack at all, the message is still relevant. Basically, never hide errors.

Changed files:
filename: .changeset/smooth-bears-run.md
patch: @@ -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.

filename: packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay-error-boundary.tsx
patch: @@ -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
   }
 }

filename: packages/next/src/client/components/react-dev-overlay/app/app-dev-overlay.tsx
patch: @@ -86,7 +86,7 @@ export function AppDevOverlay({
     <>
       <AppDevOverlayErrorBoundary
         globalError={globalError}
-        onError={setIsErrorOverlayOpen}
+        onError={openOverlay}
       >
         <ReplaySsrOnlyErrors onBlockingError={openOverlay} />
         {children}

filename: test/development/acceptance-app/hydration-error.test.ts
patch: @@ -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>}>

filename: test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts
patch: @@ -1,5 +1,4 @@
 import { nextTestSetup } from 'e2e-utils'
-import { assertNoRedbox } from 'next-test-utils'
 
 describe('serialize-circular-error', () => {
   const { next } = nextTestSetup({
@@ -27,9 +26,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(