Improve error message when it's not a real message object

Also deals with symbols.

Author: sebmarkbage

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

@@ -776,6 +776,96 @@ describe('ReactFlight', () => {
     });
   });
 
+  it('should emit descriptions of errors in dev', async () => {
+    const ClientErrorBoundary = clientReference(ErrorBoundary);
+
+    function Throw({value}) {
+      throw value;
+    }
+
+    const testCases = (
+      <>
+        <ClientErrorBoundary expectedMessage="This is a real Error.">
+          <div>
+            <Throw value={new TypeError('This is a real Error.')} />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: This is a string error.">
+          <div>
+            <Throw value="This is a string error." />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: {message: ..., extra: ..., nested: ...}">
+          <div>
+            <Throw
+              value={{
+                message: 'This is a long message',
+                extra: 'properties',
+                nested: {more: 'prop'},
+              }}
+            />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary
+          expectedMessage={
+            'Error: {message: "Short", extra: ..., nested: ...}'
+          }>
+          <div>
+            <Throw
+              value={{
+                message: 'Short',
+                extra: 'properties',
+                nested: {more: 'prop'},
+              }}
+            />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: Symbol(hello)">
+          <div>
+            <Throw value={Symbol('hello')} />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: 123">
+          <div>
+            <Throw value={123} />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: undefined">
+          <div>
+            <Throw value={undefined} />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: <div/>">
+          <div>
+            <Throw value={<div />} />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage="Error: function Foo() {}">
+          <div>
+            <Throw value={function Foo() {}} />
+          </div>
+        </ClientErrorBoundary>
+        <ClientErrorBoundary expectedMessage={'Error: ["array"]'}>
+          <div>
+            <Throw value={['array']} />
+          </div>
+        </ClientErrorBoundary>
+      </>
+    );
+
+    const transport = ReactNoopFlightServer.render(testCases, {
+      onError(x) {
+        return __DEV__ ? 'a dev digest' : `digest("${x.message}")`;
+      },
+    });
+
+    await act(() => {
+      startTransition(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    });
+  });
+
   it('should trigger the inner most error boundary inside a Client Component', async () => {
     function ServerComponent() {
       throw new Error('This was thrown in the Server Component.');

packages/react-server/src/ReactFlightServer.js

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