Include regular stack trace in serialized errors from Fizz

sebmarkbage · sebmarkbage · commit 567b90d704d6 · 2024-03-29T17:55:27.000-04:00
We previously only included the component stack.

Also cleaned up the fields in Fizz server that wasn't using consistent
hidden classes in dev vs prod.
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -1226,22 +1226,29 @@ export function isSuspenseInstanceFallback(
 
 export function getSuspenseInstanceFallbackErrorDetails(
   instance: SuspenseInstance,
-): {digest: ?string, message?: string, stack?: string} {
+): {
+  digest: ?string,
+  message?: string,
+  stack?: string,
+  componentStack?: string,
+} {
   const dataset =
     instance.nextSibling && ((instance.nextSibling: any): HTMLElement).dataset;
-  let digest, message, stack;
+  let digest, message, stack, componentStack;
   if (dataset) {
     digest = dataset.dgst;
     if (__DEV__) {
       message = dataset.msg;
       stack = dataset.stck;
+      componentStack = dataset.cstck;
     }
   }
   if (__DEV__) {
     return {
       message,
       digest,
       stack,
+      componentStack,
     };
   } else {
     // Object gets DCE'd if constructed in tail position and matches callsite destructuring
diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js b/packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js
@@ -94,6 +94,7 @@ function handleNode(node_: Node) {
       dataset['dgst'],
       dataset['msg'],
       dataset['stck'],
+      dataset['cstck'],
     );
     node.remove();
   } else if (dataset['rri'] != null) {
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -3809,6 +3809,8 @@ const clientRenderedSuspenseBoundaryError1B =
   stringToPrecomputedChunk(' data-msg="');
 const clientRenderedSuspenseBoundaryError1C =
   stringToPrecomputedChunk(' data-stck="');
+const clientRenderedSuspenseBoundaryError1D =
+  stringToPrecomputedChunk(' data-cstck="');
 const clientRenderedSuspenseBoundaryError2 =
   stringToPrecomputedChunk('></template>');
 
@@ -3851,7 +3853,8 @@ export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   renderState: RenderState,
   errorDigest: ?string,
-  errorMesssage: ?string,
+  errorMessage: ?string,
+  errorStack: ?string,
   errorComponentStack: ?string,
 ): boolean {
   let result;
@@ -3869,19 +3872,27 @@ export function writeStartClientRenderedSuspenseBoundary(
     );
   }
   if (__DEV__) {
-    if (errorMesssage) {
+    if (errorMessage) {
       writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
       writeChunk(
         destination,
-        stringToChunk(escapeTextForBrowser(errorMesssage)),
+        stringToChunk(escapeTextForBrowser(errorMessage)),
       );
       writeChunk(
         destination,
         clientRenderedSuspenseBoundaryErrorAttrInterstitial,
       );
     }
-    if (errorComponentStack) {
+    if (errorStack) {
       writeChunk(destination, clientRenderedSuspenseBoundaryError1C);
+      writeChunk(destination, stringToChunk(escapeTextForBrowser(errorStack)));
+      writeChunk(
+        destination,
+        clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+      );
+    }
+    if (errorComponentStack) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1D);
       writeChunk(
         destination,
         stringToChunk(escapeTextForBrowser(errorComponentStack)),
@@ -4244,6 +4255,7 @@ const clientRenderData1 = stringToPrecomputedChunk(
 const clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
 const clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
 const clientRenderData4 = stringToPrecomputedChunk('" data-stck="');
+const clientRenderData5 = stringToPrecomputedChunk('" data-cstck="');
 const clientRenderDataEnd = dataElementQuotedEnd;
 
 export function writeClientRenderBoundaryInstruction(
@@ -4252,8 +4264,9 @@ export function writeClientRenderBoundaryInstruction(
   renderState: RenderState,
   id: number,
   errorDigest: ?string,
-  errorMessage?: string,
-  errorComponentStack?: string,
+  errorMessage: ?string,
+  errorStack: ?string,
+  errorComponentStack: ?string,
 ): boolean {
   const scriptFormat =
     !enableFizzExternalRuntime ||
@@ -4284,7 +4297,7 @@ export function writeClientRenderBoundaryInstruction(
     writeChunk(destination, clientRenderScript1A);
   }
 
-  if (errorDigest || errorMessage || errorComponentStack) {
+  if (errorDigest || errorMessage || errorStack || errorComponentStack) {
     if (scriptFormat) {
       // ,"JSONString"
       writeChunk(destination, clientRenderErrorScriptArgInterstitial);
@@ -4301,7 +4314,7 @@ export function writeClientRenderBoundaryInstruction(
       );
     }
   }
-  if (errorMessage || errorComponentStack) {
+  if (errorMessage || errorStack || errorComponentStack) {
     if (scriptFormat) {
       // ,"JSONString"
       writeChunk(destination, clientRenderErrorScriptArgInterstitial);
@@ -4318,6 +4331,23 @@ export function writeClientRenderBoundaryInstruction(
       );
     }
   }
+  if (errorStack || errorComponentStack) {
+    // ,"JSONString"
+    if (scriptFormat) {
+      writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+      writeChunk(
+        destination,
+        stringToChunk(escapeJSStringsForInstructionScripts(errorStack || '')),
+      );
+    } else {
+      // " data-stck="HTMLString
+      writeChunk(destination, clientRenderData4);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorStack || '')),
+      );
+    }
+  }
   if (errorComponentStack) {
     // ,"JSONString"
     if (scriptFormat) {
@@ -4329,8 +4359,8 @@ export function writeClientRenderBoundaryInstruction(
         ),
       );
     } else {
-      // " data-stck="HTMLString
-      writeChunk(destination, clientRenderData4);
+      // " data-cstck="HTMLString
+      writeChunk(destination, clientRenderData5);
       writeChunk(
         destination,
         stringToChunk(escapeTextForBrowser(errorComponentStack)),
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOMLegacy.js
@@ -219,6 +219,7 @@ export function writeStartClientRenderedSuspenseBoundary(
   // flushing these error arguments are not currently supported in this legacy streaming format.
   errorDigest: ?string,
   errorMessage: ?string,
+  errorStack: ?string,
   errorComponentStack: ?string,
 ): boolean {
   if (renderState.generateStaticMarkup) {
@@ -231,6 +232,7 @@ export function writeStartClientRenderedSuspenseBoundary(
     renderState,
     errorDigest,
     errorMessage,
+    errorStack,
     errorComponentStack,
   );
 }
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
diff --git a/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js b/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js
@@ -19,6 +19,7 @@ export function clientRenderBoundary(
   suspenseBoundaryID,
   errorDigest,
   errorMsg,
+  errorStack,
   errorComponentStack,
 ) {
   // Find the fallback's first element.
@@ -36,7 +37,8 @@ export function clientRenderBoundary(
   const dataset = suspenseIdNode.dataset;
   if (errorDigest) dataset['dgst'] = errorDigest;
   if (errorMsg) dataset['msg'] = errorMsg;
-  if (errorComponentStack) dataset['stck'] = errorComponentStack;
+  if (errorStack) dataset['stck'] = errorStack;
+  if (errorComponentStack) dataset['cstck'] = errorComponentStack;
   // Tell React to retry it if the parent already hydrated.
   if (suspenseNode['_reactRetry']) {
     suspenseNode['_reactRetry']();
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -2647,9 +2647,9 @@ function updateDehydratedSuspenseComponent(
       // get an update and we'll never be able to hydrate the final content. Let's just try the
       // client side render instead.
       let digest: ?string;
-      let message, stack;
+      let message, stack, componentStack;
       if (__DEV__) {
-        ({digest, message, stack} =
+        ({digest, message, stack, componentStack} =
           getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
       } else {
         ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
@@ -2669,8 +2669,14 @@ function updateDehydratedSuspenseComponent(
               'client rendering.',
           );
         }
+        // Replace the stack with the server stack
+        error.stack = stack || '';
         (error: any).digest = digest;
-        capturedValue = createCapturedValueFromError(error, digest, stack);
+        capturedValue = createCapturedValueFromError(
+          error,
+          digest,
+          componentStack,
+        );
       }
       return retrySuspenseComponentWithoutHydrating(
         current,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
@@ -203,9 +203,6 @@ const CLIENT_RENDERED = 4; // if it errors or infinitely suspends
 type SuspenseBoundary = {
   status: 0 | 1 | 4 | 5,
   rootSegmentID: number,
-  errorDigest: ?string, // the error hash if it errors
-  errorMessage?: string, // the error string if it errors
-  errorComponentStack?: string, // the error component stack if it errors
   parentFlushed: boolean,
   pendingTasks: number, // when it reaches zero we can show this boundary's content
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
@@ -215,6 +212,11 @@ type SuspenseBoundary = {
   fallbackState: HoistableState,
   trackedContentKeyPath: null | KeyNode, // used to track the path for replay nodes
   trackedFallbackNode: null | ReplayNode, // used to track the fallback for replay nodes
+  errorDigest: ?string, // the error hash if it errors
+  // DEV-only fields
+  errorMessage?: null | string, // the error string if it errors
+  errorStack?: null | string, // the error stack if it errors
+  errorComponentStack?: null | string, // the error component stack if it errors
 };
 
 type RenderTask = {
@@ -601,7 +603,7 @@ function createSuspenseBoundary(
   request: Request,
   fallbackAbortableTasks: Set<Task>,
 ): SuspenseBoundary {
-  return {
+  const boundary: SuspenseBoundary = {
     status: PENDING,
     rootSegmentID: -1,
     parentFlushed: false,
@@ -615,6 +617,13 @@ function createSuspenseBoundary(
     trackedContentKeyPath: null,
     trackedFallbackNode: null,
   };
+  if (__DEV__) {
+    // DEV-only fields for hidden class
+    boundary.errorMessage = null;
+    boundary.errorStack = null;
+    boundary.errorComponentStack = null;
+  }
+  return boundary;
 }
 
 function createRenderTask(
@@ -814,19 +823,24 @@ function encodeErrorForBoundary(
 ) {
   boundary.errorDigest = digest;
   if (__DEV__) {
-    let message;
+    let message, stack;
     // In dev we additionally encode the error message and component stack on the boundary
     if (error instanceof Error) {
       // eslint-disable-next-line react-internal/safe-string-coercion
       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 = describeObjectForErrorMessage(error);
+      stack = null;
     } else {
       // eslint-disable-next-line react-internal/safe-string-coercion
       message = String(error);
+      stack = null;
     }
 
     boundary.errorMessage = message;
+    boundary.errorStack = stack;
     boundary.errorComponentStack = thrownInfo.componentStack;
   }
 }
@@ -3727,13 +3741,25 @@ function flushSegment(
     // Emit a client rendered suspense boundary wrapper.
     // We never queue the inner boundary so we'll never emit its content or partial segments.
 
-    writeStartClientRenderedSuspenseBoundary(
-      destination,
-      request.renderState,
-      boundary.errorDigest,
-      boundary.errorMessage,
-      boundary.errorComponentStack,
-    );
+    if (__DEV__) {
+      writeStartClientRenderedSuspenseBoundary(
+        destination,
+        request.renderState,
+        boundary.errorDigest,
+        boundary.errorMessage,
+        boundary.errorStack,
+        boundary.errorComponentStack,
+      );
+    } else {
+      writeStartClientRenderedSuspenseBoundary(
+        destination,
+        request.renderState,
+        boundary.errorDigest,
+        null,
+        null,
+        null,
+      );
+    }
     // Flush the fallback.
     flushSubtree(request, destination, segment, hoistableState);
 
@@ -3819,15 +3845,29 @@ function flushClientRenderedBoundary(
   destination: Destination,
   boundary: SuspenseBoundary,
 ): boolean {
-  return writeClientRenderBoundaryInstruction(
-    destination,
-    request.resumableState,
-    request.renderState,
-    boundary.rootSegmentID,
-    boundary.errorDigest,
-    boundary.errorMessage,
-    boundary.errorComponentStack,
-  );
+  if (__DEV__) {
+    return writeClientRenderBoundaryInstruction(
+      destination,
+      request.resumableState,
+      request.renderState,
+      boundary.rootSegmentID,
+      boundary.errorDigest,
+      boundary.errorMessage,
+      boundary.errorStack,
+      boundary.errorComponentStack,
+    );
+  } else {
+    return writeClientRenderBoundaryInstruction(
+      destination,
+      request.resumableState,
+      request.renderState,
+      boundary.rootSegmentID,
+      boundary.errorDigest,
+      null,
+      null,
+      null,
+    );
+  }
 }
 
 function flushSegmentContainer(
