Skip to content

Commit

Permalink
[Fizz] Add Component Stacks to onError and onPostpone when in dev…
Browse files Browse the repository at this point in the history
… mode or during prerenders in prod mode (#27761)

Historically React would produce component stacks for dev builds only.
There is a cost to tracking component stacks and given the prod builds
try to optimize runtime performance these stacks were left out. More
recently React added production component stacks to Fiber in because it
can be immensely helpful in tracking down hard to debug production
issues. Fizz was not updated to have a similar behavior.

With the advent of prerendering however stacks for production in Fizz
are more relevant because prerendering is not really a dev-time task. If
you want the ability to reason about errors or postpones that happen
during a prerender having component stacks to interrogate is helpful and
these component stacks need to be available in production otherwise you
are really never going to see them. (it is possible that you could do
dev-mode prerenders but we don't expect this to be a common dev mode
workflow)

To better support the prerender use case and to make error logging in
Fizz more useful the following changes have been made

1. `onPostpone` now accepts a second `postponeInfo` argument which will
contain a componentStack. Postpones always originate from a component
render so the stack should be consistently available. The type however
will indicate the stack is optional so we can remove them in the future
if we decide the overhead is the wrong tradeoff in certain cases
2. `onError` now accepts a second `errorInfo` argument which may contain
a componentStack. If an error originated from a component a stack will
be included in the following cases.

This change entails tracking the component hierarchy in prod builds now.
While this isn't cost free it is implemented in a relatively lean
manner. Deferring the most expensive work (reifying the stack) until we
are actually in an error pathway.

In the course of implementing this change a number of simplifications
were made to the code which should make the stack tracking more
resilient. We no longer use a module global to curry the stack up to
some handler. This was delicate because you needed to always reset it
properly. We now curry the stack on the task itself.

Another change made was to track the component stack on SuspenseBoundary
instances so that we can provide the stack when aborting suspense
boundaries to help you determine which ones were affected by an abort.

DiffTrain build for commit 63310df.
  • Loading branch information
gnoff committed Dec 16, 2023
1 parent 8991f3e commit 5344d07
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -25476,7 +25476,7 @@ if (__DEV__) {
return root;
}

var ReactVersion = "18.3.0-canary-493610f29-20231212";
var ReactVersion = "18.3.0-canary-63310df2b-20231215";

// Might add PROFILE later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9083,7 +9083,7 @@ var devToolsConfig$jscomp$inline_1033 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-493610f29-20231212",
version: "18.3.0-canary-63310df2b-20231215",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1226 = {
Expand Down Expand Up @@ -9114,7 +9114,7 @@ var internals$jscomp$inline_1226 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-493610f29-20231212"
reconcilerVersion: "18.3.0-canary-63310df2b-20231215"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1227 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9509,7 +9509,7 @@ var devToolsConfig$jscomp$inline_1075 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-canary-493610f29-20231212",
version: "18.3.0-canary-63310df2b-20231215",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1267 = {
Expand Down Expand Up @@ -9540,7 +9540,7 @@ var internals$jscomp$inline_1267 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-canary-493610f29-20231212"
reconcilerVersion: "18.3.0-canary-63310df2b-20231215"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1268 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ if (__DEV__) {
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = "18.3.0-canary-493610f29-20231212";
var ReactVersion = "18.3.0-canary-63310df2b-20231215";

// ATTENTION
// When adding new symbols to this file,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -580,4 +580,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-493610f29-20231212";
exports.version = "18.3.0-canary-63310df2b-20231215";
Original file line number Diff line number Diff line change
Expand Up @@ -576,7 +576,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactCurrentDispatcher.current.useTransition();
};
exports.version = "18.3.0-canary-493610f29-20231212";
exports.version = "18.3.0-canary-63310df2b-20231215";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
493610f299ddf7d06e147e60dc4f2b97482982d2
63310df2b243b6c3b2f01e8b121e7d115e839cfb

0 comments on commit 5344d07

Please sign in to comment.