Implement error digests for Flight runtime

Similar to Fizz, Flight now supports a return value from the user provided onError option. If a value is returned from onError it will be serialized and provided to the client. Currently the digest is stashed on the client constructed Error object but when Error Boundaries are updated to have an errorInfo argument it should probably be moved there.

Author: gnoff

packages/react-client/src/ReactFlightClient.js

@@ -628,21 +628,60 @@ export function resolveSymbol(
   chunks.set(id, createInitializedChunk(response, Symbol.for(name)));
 }
 
-export function resolveError(
+type ErrorWithDigest = Error & {_digest?: string};
+export function resolveErrorProd(
   response: Response,
   id: number,
+  digest: string,
+): void {
+  if (__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveErrorProd should never be called in development mode. Use resolveErrorDev instead. This is a bug in React.',
+    );
+  }
+  const error = new Error('An error occurred in the Server Components render.');
+  error.stack = '';
+  (error: any)._digest = digest;
+  const errorWithDigest: ErrorWithDigest = (error: any);
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  if (!chunk) {
+    chunks.set(id, createErrorChunk(response, errorWithDigest));
+  } else {
+    triggerErrorOnChunk(chunk, errorWithDigest);
+  }
+}
+
+export function resolveErrorDev(
+  response: Response,
+  id: number,
+  digest: string,
   message: string,
   stack: string,
 ): void {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'resolveErrorDev should never be called in production mode. Use resolveErrorProd instead. This is a bug in React.',
+    );
+  }
   // eslint-disable-next-line react-internal/prod-error-codes
-  const error = new Error(message);
+  const error = new Error(
+    message ||
+      'An error occurred in the Server Components render but no message was provided',
+  );
   error.stack = stack;
+  (error: any)._digest = digest;
+  const errorWithDigest: ErrorWithDigest = (error: any);
   const chunks = response._chunks;
   const chunk = chunks.get(id);
   if (!chunk) {
-    chunks.set(id, createErrorChunk(response, error));
+    chunks.set(id, createErrorChunk(response, errorWithDigest));
   } else {
-    triggerErrorOnChunk(chunk, error);
+    triggerErrorOnChunk(chunk, errorWithDigest);
   }
 }
 

packages/react-client/src/ReactFlightClientStream.js

@@ -16,7 +16,8 @@ import {
   resolveModel,
   resolveProvider,
   resolveSymbol,
-  resolveError,
+  resolveErrorProd,
+  resolveErrorDev,
   createResponse as createResponseBase,
   parseModelString,
   parseModelTuple,
@@ -62,7 +63,17 @@ function processFullRow(response: Response, row: string): void {
     }
     case 'E': {
       const errorInfo = JSON.parse(text);
-      resolveError(response, id, errorInfo.message, errorInfo.stack);
+      if (__DEV__) {
+        resolveErrorDev(
+          response,
+          id,
+          errorInfo.digest,
+          errorInfo.message,
+          errorInfo.stack,
+        );
+      } else {
+        resolveErrorProd(response, id, errorInfo.digest);
+      }
       return;
     }
     default: {

packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js

@@ -60,16 +60,48 @@ export function resolveModuleMetaData<T>(
 
 export type Chunk = RowEncoding;
 
-export function processErrorChunk(
+export function processErrorChunkProd(
   request: Request,
   id: number,
+  digest: string,
+): Chunk {
+  if (__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'processErrorChunkProd should never be called while in development mode. Use processErrorChunkDev instead. This is a bug in React.',
+    );
+  }
+
+  return [
+    'E',
+    id,
+    {
+      digest,
+    },
+  ];
+}
+
+export function processErrorChunkDev(
+  request: Request,
+  id: number,
+  digest: string,
   message: string,
   stack: string,
 ): Chunk {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'processErrorChunkDev should never be called while in production mode. Use processErrorChunkProd instead. This is a bug in React.',
+    );
+  }
+
   return [
     'E',
     id,
     {
+      digest,
       message,
       stack,
     },

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

@@ -772,7 +772,8 @@ describe('ReactFlightDOM', () => {
       webpackMap,
       {
         onError(x) {
-          reportedErrors.push(x);
+          reportedErrors.push(x.message);
+          return `digestOf("${x.message}")`;
         },
       },
     );
@@ -789,15 +790,29 @@ describe('ReactFlightDOM', () => {
 
     await act(async () => {
       root.render(
-        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+        <ErrorBoundary
+          fallback={e => (
+            <>
+              <p>{e.message}</p>
+              <p>{e._digest}</p>
+            </>
+          )}>
           <Suspense fallback={<p>(loading)</p>}>
             <App res={response} />
           </Suspense>
         </ErrorBoundary>,
       );
     });
-    expect(container.innerHTML).toBe('<p>bug in the bundler</p>');
+    if (__DEV__) {
+      expect(container.innerHTML).toBe(
+        '<p>bug in the bundler</p><p>digestOf("bug in the bundler")</p>',
+      );
+    } else {
+      expect(container.innerHTML).toBe(
+        '<p>An error occurred in the Server Components render.</p><p>digestOf("bug in the bundler")</p>',
+      );
+    }
 
-    expect(reportedErrors).toEqual([]);
+    expect(reportedErrors).toEqual(['bug in the bundler']);
   });
 });

packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js

@@ -57,16 +57,47 @@ export function resolveModuleMetaData<T>(
 
 export type Chunk = RowEncoding;
 
-export function processErrorChunk(
+export function processErrorChunkProd(
   request: Request,
   id: number,
+  digest: string,
+): Chunk {
+  if (__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'processErrorChunkProd should never be called while in development mode. Use processErrorChunkDev instead. This is a bug in React.',
+    );
+  }
+
+  return [
+    'E',
+    id,
+    {
+      digest,
+    },
+  ];
+}
+export function processErrorChunkDev(
+  request: Request,
+  id: number,
+  digest: string,
   message: string,
   stack: string,
 ): Chunk {
+  if (!__DEV__) {
+    // These errors should never make it into a build so we don't need to encode them in codes.json
+    // eslint-disable-next-line react-internal/prod-error-codes
+    throw new Error(
+      'processErrorChunkDev should never be called while in production mode. Use processErrorChunkProd instead. This is a bug in React.',
+    );
+  }
+
   return [
     'E',
     id,
     {
+      digest,
       message,
       stack,
     },