[Fizz] Don't handle errors in completeBoundary instruction (#33073)
Stacked on #33066 and #33068. Currently we're passing `errorDigest` to `completeBoundary` if there is a client side error (only CSS loading atm). This only exists because of `completeBoundaryWithStyles`. Normally if there's a server-side error we'd emit the `clientRenderBoundary` instruction instead. This adds unnecessary code to the common case where all styles are in the head. This is about to get worse with batching because client render shouldn't be throttled but complete should be. The first commit moves the client render logic inline into `completeBoundaryWithStyles` so we only pay for it when styles are used. However, the approach I went with in the second commit is to reuse the `$RX` instruction instead (`clientRenderBoundary`). That way if you have both it ends up being amortized. However, it does mean we have to emit the `$RX` (along with the `$RC` helper if any `completeBoundaryWithStyles` instruction is needed.
Sebastian Markbåge committed
May 1, 2025 at 15:44 UTC
ee077b6ccddd916440bb7570ba6f53673d920700
5 files changed
+63
-64
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+19
-8
@@ -4482,14 +4482,14 @@ export function writeCompletedSegmentInstruction(
4482
}
4483
}
4484
4485
+const completeBoundaryScriptFunctionOnly = stringToPrecomputedChunk(
4486
+ completeBoundaryFunction,
4487
+);
4488
const completeBoundaryScript1Full = stringToPrecomputedChunk(
4489
completeBoundaryFunction + '$RC("',
4490
);
4491
const completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
4492
4490
-const completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(
4491
- completeBoundaryFunction + styleInsertionFunction + '$RR("',
4492
-);
4493
const completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(
4494
styleInsertionFunction + '$RR("',
4495
);
@@ -4531,19 +4531,27 @@ export function writeCompletedBoundaryInstruction(
4531
writeChunk(destination, renderState.startInlineScript);
4532
writeChunk(destination, endOfStartTag);
4533
if (requiresStyleInsertion) {
4534
+ if (
4535
+ (resumableState.instructions & SentClientRenderFunction) ===
4536
+ NothingSent
4537
+ ) {
4538
+ // The completeBoundaryWithStyles function depends on the client render function.
4539
+ resumableState.instructions |= SentClientRenderFunction;
4540
+ writeChunk(destination, clientRenderScriptFunctionOnly);
4541
+ }
4542
if (
4543
(resumableState.instructions & SentCompleteBoundaryFunction) ===
4544
NothingSent
4545
) {
4538
- resumableState.instructions |=
4539
- SentStyleInsertionFunction | SentCompleteBoundaryFunction;
4540
- writeChunk(destination, completeBoundaryWithStylesScript1FullBoth);
4541
- } else if (
4546
+ // The completeBoundaryWithStyles function depends on the complete boundary function.
4547
+ resumableState.instructions |= SentCompleteBoundaryFunction;
4548
+ writeChunk(destination, completeBoundaryScriptFunctionOnly);
4549
+ }
4550
+ if (
4551
(resumableState.instructions & SentStyleInsertionFunction) ===
4552
NothingSent
4553
) {
4554
resumableState.instructions |= SentStyleInsertionFunction;
4546
-
4555
writeChunk(destination, completeBoundaryWithStylesScript1FullPartial);
4556
} else {
4557
writeChunk(destination, completeBoundaryWithStylesScript1Partial);
@@ -4608,6 +4616,9 @@ export function writeCompletedBoundaryInstruction(
4616
return writeBootstrap(destination, renderState) && writeMore;
4617
}
4618
4619
+const clientRenderScriptFunctionOnly =
4620
+ stringToPrecomputedChunk(clientRenderFunction);
4621
+
4622
const clientRenderScript1Full = stringToPrecomputedChunk(
4623
clientRenderFunction + ';$RX("',
4624
);
packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js
+2
-2
@@ -4,9 +4,9 @@
4
export const clientRenderBoundary =
5
'$RX=function(b,c,d,e,f){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),f&&(a.cstck=f),b._reactRetry&&b._reactRetry())};';
6
export const completeBoundary =
7
- '$RC=function(b,d,e){if(d=document.getElementById(d)){d.parentNode.removeChild(d);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var c=a.data;if("/$"===c||"/&"===c)if(0===f)break;else f--;else"$"!==c&&"$?"!==c&&"$!"!==c&&"&"!==c||f++}c=a.nextSibling;e.removeChild(a);a=c}while(a);for(;d.firstChild;)e.insertBefore(d.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}}};';
7
+ '$RC=function(a,d){if(d=document.getElementById(d))if(d.parentNode.removeChild(d),a=document.getElementById(a)){a=a.previousSibling;var f=a.parentNode,b=a.nextSibling,e=0;do{if(b&&8===b.nodeType){var c=b.data;if("/$"===c||"/&"===c)if(0===e)break;else e--;else"$"!==c&&"$?"!==c&&"$!"!==c&&"&"!==c||e++}c=b.nextSibling;f.removeChild(b);b=c}while(b);for(;d.firstChild;)f.insertBefore(d.firstChild,b);a.data="$";a._reactRetry&&a._reactRetry()}};';
8
export const completeBoundaryWithStyles =
9
- '$RM=new Map;\n$RR=function(r,t,w){function u(n){this._p=null;n()}for(var p=new Map,q=document,g,b,h=q.querySelectorAll("link[data-precedence],style[data-precedence]"),v=[],k=0;b=h[k++];)"not all"===b.getAttribute("media")?v.push(b):("LINK"===b.tagName&&$RM.set(b.getAttribute("href"),b),p.set(b.dataset.precedence,g=b));b=0;h=[];var l,a;for(k=!0;;){if(k){var e=w[b++];if(!e){k=!1;b=0;continue}var c=!1,m=0;var d=e[m++];if(a=$RM.get(d)){var f=a._p;c=!0}else{a=q.createElement("link");a.href=d;a.rel=\n"stylesheet";for(a.dataset.precedence=l=e[m++];f=e[m++];)a.setAttribute(f,e[m++]);f=a._p=new Promise(function(n,x){a.onload=u.bind(a,n);a.onerror=u.bind(a,x)});$RM.set(d,a)}d=a.getAttribute("media");!f||d&&!matchMedia(d).matches||h.push(f);if(c)continue}else{a=v[b++];if(!a)break;l=a.getAttribute("data-precedence");a.removeAttribute("media")}c=p.get(l)||g;c===g&&(g=a);p.set(l,a);c?c.parentNode.insertBefore(a,c.nextSibling):(c=q.head,c.insertBefore(a,c.firstChild))}Promise.all(h).then($RC.bind(null,\nr,t,""),$RC.bind(null,r,t,"Resource failed to load"))};';
9
+ '$RM=new Map;\n$RR=function(r,v,w){function t(n){this._p=null;n()}for(var p=new Map,q=document,g,b,h=q.querySelectorAll("link[data-precedence],style[data-precedence]"),u=[],k=0;b=h[k++];)"not all"===b.getAttribute("media")?u.push(b):("LINK"===b.tagName&&$RM.set(b.getAttribute("href"),b),p.set(b.dataset.precedence,g=b));b=0;h=[];var l,a;for(k=!0;;){if(k){var e=w[b++];if(!e){k=!1;b=0;continue}var c=!1,m=0;var d=e[m++];if(a=$RM.get(d)){var f=a._p;c=!0}else{a=q.createElement("link");a.href=d;a.rel=\n"stylesheet";for(a.dataset.precedence=l=e[m++];f=e[m++];)a.setAttribute(f,e[m++]);f=a._p=new Promise(function(n,x){a.onload=t.bind(a,n);a.onerror=t.bind(a,x)});$RM.set(d,a)}d=a.getAttribute("media");!f||d&&!matchMedia(d).matches||h.push(f);if(c)continue}else{a=u[b++];if(!a)break;l=a.getAttribute("data-precedence");a.removeAttribute("media")}c=p.get(l)||g;c===g&&(g=a);p.set(l,a);c?c.parentNode.insertBefore(a,c.nextSibling):(c=q.head,c.insertBefore(a,c.firstChild))}Promise.all(h).then($RC.bind(null,\nr,v),$RX.bind(null,r,"CSS failed to load"))};';
10
export const completeSegment =
11
'$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};';
12
export const formReplaying =
packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js
+37
-47
@@ -47,7 +47,7 @@ export function clientRenderBoundary(
47
}
48
}
49
50
-export function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
50
+export function completeBoundary(suspenseBoundaryID, contentID) {
51
const contentNode = document.getElementById(contentID);
52
if (!contentNode) {
53
// If the client has failed hydration we may have already deleted the streaming
@@ -70,52 +70,47 @@ export function completeBoundary(suspenseBoundaryID, contentID, errorDigest) {
70
// Find the boundary around the fallback. This is always the previous node.
71
const suspenseNode = suspenseIdNode.previousSibling;
72
73
- if (!errorDigest) {
74
- // Clear all the existing children. This is complicated because
75
- // there can be embedded Suspense boundaries in the fallback.
76
- // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
77
- // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
78
- // They never hydrate anyway. However, currently we support incrementally loading the fallback.
79
- const parentInstance = suspenseNode.parentNode;
80
- let node = suspenseNode.nextSibling;
81
- let depth = 0;
82
- do {
83
- if (node && node.nodeType === COMMENT_NODE) {
84
- const data = node.data;
85
- if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
86
- if (depth === 0) {
87
- break;
88
- } else {
89
- depth--;
90
- }
91
- } else if (
92
- data === SUSPENSE_START_DATA ||
93
- data === SUSPENSE_PENDING_START_DATA ||
94
- data === SUSPENSE_FALLBACK_START_DATA ||
95
- data === ACTIVITY_START_DATA
96
- ) {
97
- depth++;
73
+ // Clear all the existing children. This is complicated because
74
+ // there can be embedded Suspense boundaries in the fallback.
75
+ // This is similar to clearSuspenseBoundary in ReactFiberConfigDOM.
76
+ // TODO: We could avoid this if we never emitted suspense boundaries in fallback trees.
77
+ // They never hydrate anyway. However, currently we support incrementally loading the fallback.
78
+ const parentInstance = suspenseNode.parentNode;
79
+ let node = suspenseNode.nextSibling;
80
+ let depth = 0;
81
+ do {
82
+ if (node && node.nodeType === COMMENT_NODE) {
83
+ const data = node.data;
84
+ if (data === SUSPENSE_END_DATA || data === ACTIVITY_END_DATA) {
85
+ if (depth === 0) {
86
+ break;
87
+ } else {
88
+ depth--;
89
}
90
+ } else if (
91
+ data === SUSPENSE_START_DATA ||
92
+ data === SUSPENSE_PENDING_START_DATA ||
93
+ data === SUSPENSE_FALLBACK_START_DATA ||
94
+ data === ACTIVITY_START_DATA
95
+ ) {
96
+ depth++;
97
}
98
+ }
99
101
- const nextNode = node.nextSibling;
102
- parentInstance.removeChild(node);
103
- node = nextNode;
104
- } while (node);
105
-
106
- const endOfBoundary = node;
100
+ const nextNode = node.nextSibling;
101
+ parentInstance.removeChild(node);
102
+ node = nextNode;
103
+ } while (node);
104
108
- // Insert all the children from the contentNode between the start and end of suspense boundary.
109
- while (contentNode.firstChild) {
110
- parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
111
- }
105
+ const endOfBoundary = node;
106
113
- suspenseNode.data = SUSPENSE_START_DATA;
114
- } else {
115
- suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
116
- suspenseIdNode.setAttribute('data-dgst', errorDigest);
107
+ // Insert all the children from the contentNode between the start and end of suspense boundary.
108
+ while (contentNode.firstChild) {
109
+ parentInstance.insertBefore(contentNode.firstChild, endOfBoundary);
110
}
111
112
+ suspenseNode.data = SUSPENSE_START_DATA;
113
+
114
if (suspenseNode['_reactRetry']) {
115
suspenseNode['_reactRetry']();
116
}
@@ -234,13 +229,8 @@ export function completeBoundaryWithStyles(
229
}
230
231
Promise.all(dependencies).then(
237
- window['$RC'].bind(null, suspenseBoundaryID, contentID, ''),
238
- window['$RC'].bind(
239
- null,
240
- suspenseBoundaryID,
241
- contentID,
242
- 'Resource failed to load',
243
- ),
232
+ window['$RC'].bind(null, suspenseBoundaryID, contentID),
233
+ window['$RX'].bind(null, suspenseBoundaryID, 'CSS failed to load'),
234
);
235
}
236
packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
+3
-3
@@ -1630,14 +1630,14 @@ describe('ReactDOMFizzStaticBrowser', () => {
1630
// We are mostly just trying to assert that no preload for our stylesheet was emitted
1631
// prior to sending the segment the stylesheet was for. This test is asserting this
1632
// because the boundary complete instruction is sent when we are writing the
1633
- const instructionIndex = result.indexOf('$RC');
1633
+ const instructionIndex = result.indexOf('$RX');
1634
expect(instructionIndex > -1).toBe(true);
1635
- const slice = result.slice(0, instructionIndex + '$RC'.length);
1635
+ const slice = result.slice(0, instructionIndex + '$RX'.length);
1636
1637
expect(slice).toBe(
1638
'<!DOCTYPE html><html><head><link rel="expect" href="#«R»" blocking="render"/></head>' +
1639
'<body>hello<!--$?--><template id="B:1"></template><!--/$--><template id="«R»"></template>' +
1640
- '<div hidden id="S:1">world<!-- --></div><script>$RC',
1640
+ '<div hidden id="S:1">world<!-- --></div><script>$RX',
1641
);
1642
});
1643
packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+2
-4
@@ -1265,9 +1265,7 @@ body {
1265
const suspenseInstance = boundaryTemplateInstance.previousSibling;
1266
1267
expect(suspenseInstance.data).toEqual('$!');
1268
- expect(boundaryTemplateInstance.dataset.dgst).toBe(
1269
- 'Resource failed to load',
1270
- );
1268
+ expect(boundaryTemplateInstance.dataset.dgst).toBe('CSS failed to load');
1269
1270
expect(getMeaningfulChildren(document)).toEqual(
1271
<html>
@@ -1313,7 +1311,7 @@ body {
1311
);
1312
expect(errors).toEqual([
1313
'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
1316
- 'Resource failed to load',
1314
+ 'CSS failed to load',
1315
]);
1316
});
1317