JSON.stringify generic errors

packages/next/client/index.tsx

@@ -339,7 +339,7 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
     }
   } catch (error) {
     // This catches errors like throwing in the top level of a module
-    initialErr = isError(error) ? error : new Error(error + '')
+    initialErr = isError(error) ? error : new Error(JSON.stringify(error))
   }
 
   if (process.env.NODE_ENV === 'development') {

packages/next/server/base-server.ts

@@ -2292,7 +2292,7 @@ export default abstract class Server {
         }
       }
     } catch (error) {
-      const err = isError(error) ? error : error ? new Error(error + '') : null
+      const err = isError(error) ? error : error ? new Error(JSON.stringify(error)) : null
       if (err instanceof NoFallbackError && bubbleNoFallback) {
         throw err
       }
@@ -2313,7 +2313,7 @@ export default abstract class Server {
           if (isError(err)) err.page = page
           throw err
         }
-        this.logError(err || new Error(error + ''))
+        this.logError(err || new Error(JSON.stringify(error)))
       }
       return response
     }
@@ -2433,11 +2433,11 @@ export default abstract class Server {
       const renderToHtmlError = isError(error)
         ? error
         : error
-        ? new Error(error + '')
+        ? new Error(JSON.stringify(error))
         : null
       const isWrappedError = renderToHtmlError instanceof WrappedBuildError
       if (!isWrappedError) {
-        this.logError(renderToHtmlError || new Error(error + ''))
+        this.logError(renderToHtmlError || new Error(JSON.stringify(error)))
       }
       res.statusCode = 500
       const fallbackComponents = await this.getFallbackErrorComponents()

packages/next/server/dev/hot-reloader.ts

@@ -251,7 +251,7 @@ export default class HotReloader {
         } catch (error) {
           await renderScriptError(
             pageBundleRes,
-            isError(error) ? error : new Error(error + '')
+            isError(error) ? error : new Error(JSON.stringify(error))
           )
           return { finished: true }
         }

packages/next/server/dev/next-dev-server.ts

@@ -538,7 +538,7 @@ export default class DevServer extends Server {
       return result
     } catch (error) {
       this.logErrorWithOriginalStack(error, undefined, 'client')
-      const err = isError(error) ? error : new Error(error + '')
+      const err = isError(error) ? error : new Error(JSON.stringify(error))
       ;(err as any).middleware = true
       const { request, response, parsedUrl } = params
       this.renderError(err, request, response, parsedUrl.pathname)
@@ -591,7 +591,11 @@ export default class DevServer extends Server {
       return await super.run(req, res, parsedUrl)
     } catch (error) {
       res.statusCode = 500
-      const err = isError(error) ? error : error ? new Error(error + '') : null
+      const err = isError(error)
+        ? error
+        : error
+        ? new Error(JSON.stringify(error))
+        : null
       try {
         this.logErrorWithOriginalStack(err).catch(() => {})
         return await this.renderError(err, req, res, pathname!, {

test/development/acceptance/ReactRefreshLogBox.test.ts

@@ -903,4 +903,27 @@ describe('ReactRefreshLogBox', () => {
 
     await cleanup()
   })
+
+  test('custom error prints JSON as string', async () => {
+    const { session, cleanup } = await sandbox(next)
+
+    await session.patch(
+      'index.js',
+      `
+        export default () => {
+          throw {'a': 1, 'b': 'x'};
+          return (
+            <div>hello</div>
+          )
+        }
+      `
+    )
+
+    expect(await session.hasRedbox(true)).toBe(true)
+    expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
+      `"Error: {\\"a\\":1,\\"b\\":\\"x\\"}"`
+    )
+
+    await cleanup()
+  })
 })