[Fizz] Don't handle errors in completeBoundary instruction

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -4482,14 +4482,14 @@ export function writeCompletedSegmentInstruction(
   }
 }
 
+const completeBoundaryScriptFunctionOnly = stringToPrecomputedChunk(
+  completeBoundaryFunction,
+);
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
   completeBoundaryFunction + '$RC("',
 );
 const completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
 
-const completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(
-  completeBoundaryFunction + styleInsertionFunction + '$RR("',
-);
 const completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(
   styleInsertionFunction + '$RR("',
 );
@@ -4531,19 +4531,27 @@ export function writeCompletedBoundaryInstruction(
     writeChunk(destination, renderState.startInlineScript);
     writeChunk(destination, endOfStartTag);
     if (requiresStyleInsertion) {
+      if (
+        (resumableState.instructions & SentClientRenderFunction) ===
+        NothingSent
+      ) {
+        // The completeBoundaryWithStyles function depends on the client render function.
+        resumableState.instructions |= SentClientRenderFunction;
+        writeChunk(destination, clientRenderScriptFunctionOnly);
+      }
       if (
         (resumableState.instructions & SentCompleteBoundaryFunction) ===
         NothingSent
       ) {
-        resumableState.instructions |=
-          SentStyleInsertionFunction | SentCompleteBoundaryFunction;
-        writeChunk(destination, completeBoundaryWithStylesScript1FullBoth);
-      } else if (
+        // The completeBoundaryWithStyles function depends on the complete boundary function.
+        resumableState.instructions |= SentCompleteBoundaryFunction;
+        writeChunk(destination, completeBoundaryScriptFunctionOnly);
+      }
+      if (
         (resumableState.instructions & SentStyleInsertionFunction) ===
         NothingSent
       ) {
         resumableState.instructions |= SentStyleInsertionFunction;
-
         writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
       } else {
         writeChunk(destination, completeBoundaryWithStylesScript1Partial);
@@ -4608,6 +4616,9 @@ export function writeCompletedBoundaryInstruction(
   return writeBootstrap(destination, renderState) && writeMore;
 }
 
+const clientRenderScriptFunctionOnly =
+  stringToPrecomputedChunk(clientRenderFunction);
+
 const clientRenderScript1Full = stringToPrecomputedChunk(
   clientRenderFunction + ';$RX("',
 );

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -47,7 +47,7 @@ export function clientRenderBoundary(
   }
 }
 
-export function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
+export function completeBoundary(suspenseBoundaryID, contentID) {
   const contentNode = document.getElementById(contentID);
   if (!contentNode) {
     // If the client has failed hydration we may have already deleted the streaming
@@ -70,52 +70,47 @@ export function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
   // Find the boundary around the fallback. This is always the previous node.
   const suspenseNode = suspenseIdNode.previousSibling;
 
-  if (!errorDigest) {
-    // Clear all the existing children. This is complicated because
-    // there can be embedded Suspense boundaries in the fallback.
-    // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
-    // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
-    // They never hydrate anyway. However, currently we support incrementally loading the fallback.
-    const parentInstance = suspenseNode.parentNode;
-    let node = suspenseNode.nextSibling;
-    let depth = 0;
-    do {
-      if (node && node.nodeType === COMMENT_NODE) {
-        const data = node.data;
-        if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
-          if (depth === 0) {
-            break;
-          } else {
-            depth--;
-          }
-        } else if (
-          data === SUSPENSE_START_DATA ||
-          data === SUSPENSE_PENDING_START_DATA ||
-          data === SUSPENSE_FALLBACK_START_DATA ||
-          data === ACTIVITY_START_DATA
-        ) {
-          depth++;
+  // Clear all the existing children. This is complicated because
+  // there can be embedded Suspense boundaries in the fallback.
+  // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
+  // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
+  // They never hydrate anyway. However, currently we support incrementally loading the fallback.
+  const parentInstance = suspenseNode.parentNode;
+  let node = suspenseNode.nextSibling;
+  let depth = 0;
+  do {
+    if (node && node.nodeType === COMMENT_NODE) {
+      const data = node.data;
+      if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
+        if (depth === 0) {
+          break;
+        } else {
+          depth--;
         }
+      } else if (
+        data === SUSPENSE_START_DATA ||
+        data === SUSPENSE_PENDING_START_DATA ||
+        data === SUSPENSE_FALLBACK_START_DATA ||
+        data === ACTIVITY_START_DATA
+      ) {
+        depth++;
       }
+    }
 
-      const nextNode = node.nextSibling;
-      parentInstance.removeChild(node);
-      node = nextNode;
-    } while (node);
-
-    const endOfBoundary = node;
+    const nextNode = node.nextSibling;
+    parentInstance.removeChild(node);
+    node = nextNode;
+  } while (node);
 
-    // Insert all the children from the contentNode between the start and end of suspense boundary.
-    while (contentNode.firstChild) {
-      parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
-    }
+  const endOfBoundary = node;
 
-    suspenseNode.data = SUSPENSE_START_DATA;
-  } else {
-    suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
-    suspenseIdNode.setAttribute('data-dgst', errorDigest);
+  // Insert all the children from the contentNode between the start and end of suspense boundary.
+  while (contentNode.firstChild) {
+    parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
   }
 
+  suspenseNode.data = SUSPENSE_START_DATA;
+
   if (suspenseNode['_reactRetry']) {
     suspenseNode['_reactRetry']();
   }
@@ -234,13 +229,8 @@ export function completeBoundaryWithStyles(
   }
 
   Promise.all(dependencies).then(
-    window['$RC'].bind(null, suspenseBoundaryID, contentID, ''),
-    window['$RC'].bind(
-      null,
-      suspenseBoundaryID,
-      contentID,
-      'Resource failed to load',
-    ),
+    window['$RC'].bind(null, suspenseBoundaryID, contentID),
+    window['$RX'].bind(null, suspenseBoundaryID, 'CSS failed to load'),
   );
 }
 

packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js

@@ -1630,14 +1630,14 @@ describe('ReactDOMFizzStaticBrowser', () => {
     // We are mostly just trying to assert that no preload for our stylesheet was emitted
     // prior to sending the segment the stylesheet was for. This test is asserting this
     // because the boundary complete instruction is sent when we are writing the
-    const instructionIndex = result.indexOf('$RC');
+    const instructionIndex = result.indexOf('$RX');
     expect(instructionIndex > -1).toBe(true);
-    const slice = result.slice(0, instructionIndex + '$RC'.length);
+    const slice = result.slice(0, instructionIndex + '$RX'.length);
 
     expect(slice).toBe(
       '<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head>' +
         '<body>hello<!--$?--><template id="B:1"></template><!--/$--><template id="«R»"></template>' +
-        '<div hidden id="S:1">world<!-- --></div><script>$RC',
+        '<div hidden id="S:1">world<!-- --></div><script>$RX',
     );
   });
 

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -1265,9 +1265,7 @@ body {
     const suspenseInstance = boundaryTemplateInstance.previousSibling;
 
     expect(suspenseInstance.data).toEqual('$!');
-    expect(boundaryTemplateInstance.dataset.dgst).toBe(
-      'Resource failed to load',
-    );
+    expect(boundaryTemplateInstance.dataset.dgst).toBe('CSS failed to load');
 
     expect(getMeaningfulChildren(document)).toEqual(
       <html>
@@ -1313,7 +1311,7 @@ body {
     );
     expect(errors).toEqual([
       'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
-      'Resource failed to load',
+      'CSS failed to load',
     ]);
   });