[Fizz] Align recoverable error serialization in dev mode (#28340)

Same as #28327 but for Fizz.

One thing that's weird about this recoverable error is that we don't
send the regular stack for it, just the component stack it seems. This
is missing some potential information and if we move toward integrated
since stacks it would be one thing.

Author: sebmarkbage

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -85,11 +85,11 @@ describe('ReactFlight', () => {
           );
           let expectedDigest = this.props.expectedMessage;
           if (
-            expectedDigest.startsWith('Error: {') ||
-            expectedDigest.startsWith('Error: <')
+            expectedDigest.startsWith('{') ||
+            expectedDigest.startsWith('<')
           ) {
             expectedDigest = '{}';
-          } else if (expectedDigest.startsWith('Error: [')) {
+          } else if (expectedDigest.startsWith('[')) {
             expectedDigest = '[]';
           }
           expect(this.state.error.digest).toContain(expectedDigest);
@@ -799,12 +799,12 @@ describe('ReactFlight', () => {
             <Throw value={new TypeError('This is a real Error.')} />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: This is a string error.">
+        <ClientErrorBoundary expectedMessage="This is a string error.">
           <div>
             <Throw value="This is a string error." />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: {message: ..., extra: ..., nested: ...}">
+        <ClientErrorBoundary expectedMessage="{message: ..., extra: ..., nested: ...}">
           <div>
             <Throw
               value={{
@@ -816,9 +816,7 @@ describe('ReactFlight', () => {
           </div>
         </ClientErrorBoundary>
         <ClientErrorBoundary
-          expectedMessage={
-            'Error: {message: "Short", extra: ..., nested: ...}'
-          }>
+          expectedMessage={'{message: "Short", extra: ..., nested: ...}'}>
           <div>
             <Throw
               value={{
@@ -829,32 +827,32 @@ describe('ReactFlight', () => {
             />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: Symbol(hello)">
+        <ClientErrorBoundary expectedMessage="Symbol(hello)">
           <div>
             <Throw value={Symbol('hello')} />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: 123">
+        <ClientErrorBoundary expectedMessage="123">
           <div>
             <Throw value={123} />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: undefined">
+        <ClientErrorBoundary expectedMessage="undefined">
           <div>
             <Throw value={undefined} />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: <div/>">
+        <ClientErrorBoundary expectedMessage="<div/>">
           <div>
             <Throw value={<div />} />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage="Error: function Foo() {}">
+        <ClientErrorBoundary expectedMessage="function Foo() {}">
           <div>
             <Throw value={function Foo() {}} />
           </div>
         </ClientErrorBoundary>
-        <ClientErrorBoundary expectedMessage={'Error: ["array"]'}>
+        <ClientErrorBoundary expectedMessage={'["array"]'}>
           <div>
             <Throw value={['array']} />
           </div>
@@ -874,7 +872,7 @@ describe('ReactFlight', () => {
         } else if (typeof x === 'object' && x !== null) {
           return `digest({})`;
         }
-        return `digest(Error: ${String(x)})`;
+        return `digest(${String(x)})`;
       },
     });
 

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js

@@ -919,9 +919,7 @@ describe('ReactFlightDOM', () => {
       abort('for reasons');
     });
     if (__DEV__) {
-      expect(container.innerHTML).toBe(
-        '<p>Error: for reasons + a dev digest</p>',
-      );
+      expect(container.innerHTML).toBe('<p>for reasons + a dev digest</p>');
     } else {
       expect(container.innerHTML).toBe('<p>digest("for reasons")</p>');
     }

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -583,7 +583,7 @@ describe('ReactFlightDOMBrowser', () => {
       controller.abort('for reasons');
     });
     const expectedValue = __DEV__
-      ? '<p>Error: for reasons + a dev digest</p>'
+      ? '<p>for reasons + a dev digest</p>'
       : '<p>digest("for reasons")</p>';
     expect(container.innerHTML).toBe(expectedValue);
 

packages/react-server/src/ReactFizzServer.js

@@ -33,6 +33,7 @@ import type {ComponentStackNode} from './ReactFizzComponentStack';
 import type {TreeContext} from './ReactFizzTreeContext';
 import type {ThenableState} from './ReactFizzThenable';
 import {enableRenderableContext} from 'shared/ReactFeatureFlags';
+import {describeObjectForErrorMessage} from 'shared/ReactSerializationErrors';
 
 import {
   scheduleWork,
@@ -816,18 +817,19 @@ function encodeErrorForBoundary(
 ) {
   boundary.errorDigest = digest;
   if (__DEV__) {
+    let message;
     // In dev we additionally encode the error message and component stack on the boundary
-    let errorMessage;
-    if (typeof error === 'string') {
-      errorMessage = error;
-    } else if (error && typeof error.message === 'string') {
-      errorMessage = error.message;
+    if (error instanceof Error) {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      message = String(error.message);
+    } else if (typeof error === 'object' && error !== null) {
+      message = describeObjectForErrorMessage(error);
     } else {
       // eslint-disable-next-line react-internal/safe-string-coercion
-      errorMessage = String(error);
+      message = String(error);
     }
 
-    boundary.errorMessage = errorMessage;
+    boundary.errorMessage = message;
     boundary.errorComponentStack = thrownInfo.componentStack;
   }
 }

packages/react-server/src/ReactFlightServer.js

@@ -1678,10 +1678,10 @@ function emitErrorChunk(
         // eslint-disable-next-line react-internal/safe-string-coercion
         stack = String(error.stack);
       } else if (typeof error === 'object' && error !== null) {
-        message = 'Error: ' + describeObjectForErrorMessage(error);
+        message = describeObjectForErrorMessage(error);
       } else {
         // eslint-disable-next-line react-internal/safe-string-coercion
-        message = 'Error: ' + String(error);
+        message = String(error);
       }
     } catch (x) {
       message = 'An error occurred but serializing the error message failed.';