Skip to content

Commit

Permalink
[Fizz] Gracefully handle suspending in DOM configs (#26768)
Browse files Browse the repository at this point in the history
E.g. if we suspend (throw a promise) in pushStartInstance today we might
have already pushed some chunks (or even child segments potentially). We
should revert back to where we were.

This doesn't usually happen because when we suspend in a component it
doesn't write anything itself, it'll always defer to som host instance
to do the writing.

There was a todo about this already but I'm not 100% sure it's always
safe when suspending. It should be safe when suspending just regularly
because it's just a noop. We might not even want "throwing a promise" in
this mechanism to be supported longer term but for now that's how a
suspend in internals.

DiffTrain build for [c10010a](c10010a)
  • Loading branch information
sebmarkbage committed May 3, 2023
1 parent a746b80 commit 399d6ad
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 101 deletions.
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
fa7a447b9ce5a4f0be592fc2946380b0fa3b29c0
c10010a6a00911fe99452bc561dd47c3e15f4eb8
22 changes: 17 additions & 5 deletions compiled/facebook-www/ReactDOMServer-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");

var ReactVersion = "18.3.0-www-classic-e6e6835d";
var ReactVersion = "18.3.0-www-classic-5070839c";

// This refers to a WWW module.
var warningWWW = require("warning");
Expand Down Expand Up @@ -11544,10 +11544,13 @@ function spawnNewSuspendedTask(request, task, thenableState, x) {
// a new task and restores the context of this task to what it was before.

function renderNode(request, task, node) {
// TODO: Store segment.children.length here and reset it in case something
// Store how much we've pushed at this point so we can reset it in case something
// suspended partially through writing something.
// Snapshot the current context in case something throws to interrupt the
var segment = task.blockedSegment;
var childrenLength = segment.children.length;
var chunkLength = segment.chunks.length; // Snapshot the current context in case something throws to interrupt the
// process.

var previousFormatContext = task.blockedSegment.formatContext;
var previousLegacyContext = task.legacyContext;
var previousContext = task.context;
Expand All @@ -11560,7 +11563,10 @@ function renderNode(request, task, node) {
try {
return renderNodeDestructive(request, task, null, node);
} catch (thrownValue) {
resetHooksState();
resetHooksState(); // Reset the write pointers to where we started.

segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException // This is a special type of exception used for Suspense. For historical
? // reasons, the rest of the Suspense implementation expects the thrown
Expand Down Expand Up @@ -11839,6 +11845,9 @@ function retryTask(request, task) {
currentTaskInDEV = task;
}

var childrenLength = segment.children.length;
var chunkLength = segment.chunks.length;

try {
// We call the destructive form that mutates this task. That way if something
// suspends again, we can reuse the same task instead of spawning a new one.
Expand All @@ -11858,7 +11867,10 @@ function retryTask(request, task) {
segment.status = COMPLETED;
finishedTask(request, task.blockedBoundary, segment);
} catch (thrownValue) {
resetHooksState();
resetHooksState(); // Reset the write pointers to where we started.

segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException // This is a special type of exception used for Suspense. For historical
? // reasons, the rest of the Suspense implementation expects the thrown
Expand Down
22 changes: 17 additions & 5 deletions compiled/facebook-www/ReactDOMServer-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");

var ReactVersion = "18.3.0-www-modern-0f7d86b7";
var ReactVersion = "18.3.0-www-modern-80147166";

// This refers to a WWW module.
var warningWWW = require("warning");
Expand Down Expand Up @@ -11292,10 +11292,13 @@ function spawnNewSuspendedTask(request, task, thenableState, x) {
// a new task and restores the context of this task to what it was before.

function renderNode(request, task, node) {
// TODO: Store segment.children.length here and reset it in case something
// Store how much we've pushed at this point so we can reset it in case something
// suspended partially through writing something.
// Snapshot the current context in case something throws to interrupt the
var segment = task.blockedSegment;
var childrenLength = segment.children.length;
var chunkLength = segment.chunks.length; // Snapshot the current context in case something throws to interrupt the
// process.

var previousFormatContext = task.blockedSegment.formatContext;
var previousLegacyContext = task.legacyContext;
var previousContext = task.context;
Expand All @@ -11308,7 +11311,10 @@ function renderNode(request, task, node) {
try {
return renderNodeDestructive(request, task, null, node);
} catch (thrownValue) {
resetHooksState();
resetHooksState(); // Reset the write pointers to where we started.

segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException // This is a special type of exception used for Suspense. For historical
? // reasons, the rest of the Suspense implementation expects the thrown
Expand Down Expand Up @@ -11587,6 +11593,9 @@ function retryTask(request, task) {
currentTaskInDEV = task;
}

var childrenLength = segment.children.length;
var chunkLength = segment.chunks.length;

try {
// We call the destructive form that mutates this task. That way if something
// suspends again, we can reuse the same task instead of spawning a new one.
Expand All @@ -11606,7 +11615,10 @@ function retryTask(request, task) {
segment.status = COMPLETED;
finishedTask(request, task.blockedBoundary, segment);
} catch (thrownValue) {
resetHooksState();
resetHooksState(); // Reset the write pointers to where we started.

segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException // This is a special type of exception used for Suspense. For historical
? // reasons, the rest of the Suspense implementation expects the thrown
Expand Down
67 changes: 38 additions & 29 deletions compiled/facebook-www/ReactDOMServer-prod.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -3298,51 +3298,56 @@ function renderChildrenArray(request, task, children) {
}
}
function renderNode(request, task, node) {
var previousFormatContext = task.blockedSegment.formatContext,
var segment = task.blockedSegment,
childrenLength = segment.children.length,
chunkLength = segment.chunks.length,
previousFormatContext = task.blockedSegment.formatContext,
previousLegacyContext = task.legacyContext,
previousContext = task.context;
try {
return renderNodeDestructiveImpl(request, task, null, node);
} catch (thrownValue) {
if (
(resetHooksState(),
(segment.children.length = childrenLength),
(segment.chunks.length = chunkLength),
(node =
thrownValue === SuspenseException
? getSuspendedThenable()
: thrownValue),
"object" === typeof node &&
null !== node &&
"function" === typeof node.then)
) {
var thenableState$15 = getThenableStateAfterSuspending(),
segment = task.blockedSegment,
newSegment = createPendingSegment(
)
(segment = getThenableStateAfterSuspending()),
(childrenLength = task.blockedSegment),
(chunkLength = createPendingSegment(
request,
segment.chunks.length,
childrenLength.chunks.length,
null,
segment.formatContext,
segment.lastPushedText,
childrenLength.formatContext,
childrenLength.lastPushedText,
!0
);
segment.children.push(newSegment);
segment.lastPushedText = !1;
request = createTask(
request,
thenableState$15,
task.node,
task.blockedBoundary,
newSegment,
task.abortSet,
task.legacyContext,
task.context,
task.treeContext
).ping;
node.then(request, request);
task.blockedSegment.formatContext = previousFormatContext;
task.legacyContext = previousLegacyContext;
task.context = previousContext;
switchContext(previousContext);
} else
)),
childrenLength.children.push(chunkLength),
(childrenLength.lastPushedText = !1),
(request = createTask(
request,
segment,
task.node,
task.blockedBoundary,
chunkLength,
task.abortSet,
task.legacyContext,
task.context,
task.treeContext
).ping),
node.then(request, request),
(task.blockedSegment.formatContext = previousFormatContext),
(task.legacyContext = previousLegacyContext),
(task.context = previousContext),
switchContext(previousContext);
else
throw (
((task.blockedSegment.formatContext = previousFormatContext),
(task.legacyContext = previousLegacyContext),
Expand Down Expand Up @@ -3447,6 +3452,8 @@ function performWork(request$jscomp$1) {
var segment = task.blockedSegment;
if (0 === segment.status) {
switchContext(task.context);
var childrenLength = segment.children.length,
chunkLength = segment.chunks.length;
try {
var prevThenableState = task.thenableState;
task.thenableState = null;
Expand All @@ -3465,6 +3472,8 @@ function performWork(request$jscomp$1) {
finishedTask(request, task.blockedBoundary, segment);
} catch (thrownValue) {
resetHooksState();
segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException
? getSuspendedThenable()
Expand Down Expand Up @@ -4002,4 +4011,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-classic-42ee674f";
exports.version = "18.3.0-www-classic-de54f0a0";
67 changes: 38 additions & 29 deletions compiled/facebook-www/ReactDOMServer-prod.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -3196,51 +3196,56 @@ function renderChildrenArray(request, task, children) {
}
}
function renderNode(request, task, node) {
var previousFormatContext = task.blockedSegment.formatContext,
var segment = task.blockedSegment,
childrenLength = segment.children.length,
chunkLength = segment.chunks.length,
previousFormatContext = task.blockedSegment.formatContext,
previousLegacyContext = task.legacyContext,
previousContext = task.context;
try {
return renderNodeDestructiveImpl(request, task, null, node);
} catch (thrownValue) {
if (
(resetHooksState(),
(segment.children.length = childrenLength),
(segment.chunks.length = chunkLength),
(node =
thrownValue === SuspenseException
? getSuspendedThenable()
: thrownValue),
"object" === typeof node &&
null !== node &&
"function" === typeof node.then)
) {
var thenableState$15 = getThenableStateAfterSuspending(),
segment = task.blockedSegment,
newSegment = createPendingSegment(
)
(segment = getThenableStateAfterSuspending()),
(childrenLength = task.blockedSegment),
(chunkLength = createPendingSegment(
request,
segment.chunks.length,
childrenLength.chunks.length,
null,
segment.formatContext,
segment.lastPushedText,
childrenLength.formatContext,
childrenLength.lastPushedText,
!0
);
segment.children.push(newSegment);
segment.lastPushedText = !1;
request = createTask(
request,
thenableState$15,
task.node,
task.blockedBoundary,
newSegment,
task.abortSet,
task.legacyContext,
task.context,
task.treeContext
).ping;
node.then(request, request);
task.blockedSegment.formatContext = previousFormatContext;
task.legacyContext = previousLegacyContext;
task.context = previousContext;
switchContext(previousContext);
} else
)),
childrenLength.children.push(chunkLength),
(childrenLength.lastPushedText = !1),
(request = createTask(
request,
segment,
task.node,
task.blockedBoundary,
chunkLength,
task.abortSet,
task.legacyContext,
task.context,
task.treeContext
).ping),
node.then(request, request),
(task.blockedSegment.formatContext = previousFormatContext),
(task.legacyContext = previousLegacyContext),
(task.context = previousContext),
switchContext(previousContext);
else
throw (
((task.blockedSegment.formatContext = previousFormatContext),
(task.legacyContext = previousLegacyContext),
Expand Down Expand Up @@ -3345,6 +3350,8 @@ function performWork(request$jscomp$1) {
var segment = task.blockedSegment;
if (0 === segment.status) {
switchContext(task.context);
var childrenLength = segment.children.length,
chunkLength = segment.chunks.length;
try {
var prevThenableState = task.thenableState;
task.thenableState = null;
Expand All @@ -3363,6 +3370,8 @@ function performWork(request$jscomp$1) {
finishedTask(request, task.blockedBoundary, segment);
} catch (thrownValue) {
resetHooksState();
segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException
? getSuspendedThenable()
Expand Down Expand Up @@ -3900,4 +3909,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-modern-a116db68";
exports.version = "18.3.0-www-modern-ef656b14";
20 changes: 16 additions & 4 deletions compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -11181,10 +11181,13 @@ function spawnNewSuspendedTask(request, task, thenableState, x) {
// a new task and restores the context of this task to what it was before.

function renderNode(request, task, node) {
// TODO: Store segment.children.length here and reset it in case something
// Store how much we've pushed at this point so we can reset it in case something
// suspended partially through writing something.
// Snapshot the current context in case something throws to interrupt the
var segment = task.blockedSegment;
var childrenLength = segment.children.length;
var chunkLength = segment.chunks.length; // Snapshot the current context in case something throws to interrupt the
// process.

var previousFormatContext = task.blockedSegment.formatContext;
var previousLegacyContext = task.legacyContext;
var previousContext = task.context;
Expand All @@ -11197,7 +11200,10 @@ function renderNode(request, task, node) {
try {
return renderNodeDestructive(request, task, null, node);
} catch (thrownValue) {
resetHooksState();
resetHooksState(); // Reset the write pointers to where we started.

segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException // This is a special type of exception used for Suspense. For historical
? // reasons, the rest of the Suspense implementation expects the thrown
Expand Down Expand Up @@ -11476,6 +11482,9 @@ function retryTask(request, task) {
currentTaskInDEV = task;
}

var childrenLength = segment.children.length;
var chunkLength = segment.chunks.length;

try {
// We call the destructive form that mutates this task. That way if something
// suspends again, we can reuse the same task instead of spawning a new one.
Expand All @@ -11495,7 +11504,10 @@ function retryTask(request, task) {
segment.status = COMPLETED;
finishedTask(request, task.blockedBoundary, segment);
} catch (thrownValue) {
resetHooksState();
resetHooksState(); // Reset the write pointers to where we started.

segment.children.length = childrenLength;
segment.chunks.length = chunkLength;
var x =
thrownValue === SuspenseException // This is a special type of exception used for Suspense. For historical
? // reasons, the rest of the Suspense implementation expects the thrown
Expand Down
Loading

0 comments on commit 399d6ad

Please sign in to comment.