Skip to content

Commit

Permalink
[Fiber] Use Owner/JSX Stack When Appending Stacks to Console (#29206)
Browse files Browse the repository at this point in the history
This one should be fully behind the `enableOwnerStacks` flag.

Instead of printing the parent Component stack all the way to the root,
this now prints the owner stack of every JSX callsite. It also includes
intermediate callsites between the Component and the JSX call so it has
potentially more frames. Mainly it provides the line number of the JSX
callsite. In terms of the number of components is a subset of the parent
component stack so it's less information in that regard. This is usually
better since it's more focused on components that might affect the
output but if it's contextual based on rendering it's still good to have
parent stack. Therefore, I still use the parent stack when printing DOM
nesting warnings but I plan on switching that format to a diff view
format instead (Next.js already reformats the parent stack like this).

__Follow ups__

- Server Components show up in the owner stack for client logs but logs
done by Server Components don't yet get their owner stack printed as
they're replayed. They're also not yet printed in the server logs of the
RSC server.

- Server Component stack frames are formatted as the server and added to
the end but this might be a different format than the browser. E.g. if
server is running V8 and browser is running JSC or vice versa. Ideally
we can reformat them in terms of the client formatting.

- This doesn't yet update Fizz or DevTools. Those will be follow ups.
Fizz still prints parent stacks in the server side logs. The stacks
added to user space `console.error` calls by DevTools still get the
parent stacks instead.

- It also doesn't yet expose these to user space so there's no way to
get them inside `onCaughtError` for example or inside a custom
`console.error` override.

- In another follow up I'll use `console.createTask` instead and
completely remove these stacks if it's available.

DiffTrain build for [d6cfa0f](d6cfa0f)
  • Loading branch information
sebmarkbage committed May 25, 2024
1 parent 4374cb6 commit 6af8405
Show file tree
Hide file tree
Showing 29 changed files with 1,061 additions and 466 deletions.
4 changes: 4 additions & 0 deletions compiled/facebook-www/JSXDEVRuntime-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -1184,6 +1184,10 @@ var didWarnAboutKeySpread = {};
*/

function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}

function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
{
if (!isValidElementType(type)) {
// This is an invalid element type.
Expand Down
4 changes: 4 additions & 0 deletions compiled/facebook-www/JSXDEVRuntime-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -1187,6 +1187,10 @@ var didWarnAboutKeySpread = {};
*/

function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}

function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
{
if (!isValidElementType(type)) {
// This is an invalid element type.
Expand Down
2 changes: 1 addition & 1 deletion compiled/facebook-www/REVISION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
ee5c19493086fdeb32057e16d1e3414370242307
d6cfa0f295f4c8b366af15fd20c84e27cdd1fab7
19 changes: 14 additions & 5 deletions compiled/facebook-www/React-dev.classic.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ if (
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = '19.0.0-www-classic-f3d67148';
var ReactVersion = '19.0.0-www-classic-5a597884';

// Re-export dynamic flags from the www version.
var dynamicFeatureFlags = require('ReactFeatureFlags');
Expand Down Expand Up @@ -1448,13 +1448,13 @@ function ReactElement(type, key, _ref, self, source, owner, props, debugStack, d
function jsxProdSignatureRunningInDevWithDynamicChildren(type, config, maybeKey, source, self) {
{
var isStaticChildren = false;
return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self);
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}
}
function jsxProdSignatureRunningInDevWithStaticChildren(type, config, maybeKey, source, self) {
{
var isStaticChildren = true;
return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self);
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}
}
var didWarnAboutKeySpread = {};
Expand All @@ -1466,6 +1466,10 @@ var didWarnAboutKeySpread = {};
*/

function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}

function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
{
if (!isValidElementType(type)) {
// This is an invalid element type.
Expand Down Expand Up @@ -1639,6 +1643,7 @@ function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
* See https://reactjs.org/docs/react-api.html#createelement
*/


function createElement(type, config, children) {
{
if (!isValidElementType(type)) {
Expand Down Expand Up @@ -2731,7 +2736,9 @@ function forwardRef(render) {
// This kind of inner function is not used elsewhere so the side effect is okay.

if (!render.name && !render.displayName) {
render.displayName = name;
Object.defineProperty(render, 'name', {
value: name
});
}
}
});
Expand Down Expand Up @@ -2771,7 +2778,9 @@ function memo(type, compare) {
// This kind of inner function is not used elsewhere so the side effect is okay.

if (!type.name && !type.displayName) {
type.displayName = name;
Object.defineProperty(type, 'name', {
value: name
});
}
}
});
Expand Down
19 changes: 14 additions & 5 deletions compiled/facebook-www/React-dev.modern.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ if (
) {
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
}
var ReactVersion = '19.0.0-www-modern-7638663c';
var ReactVersion = '19.0.0-www-modern-c9630b74';

// Re-export dynamic flags from the www version.
var dynamicFeatureFlags = require('ReactFeatureFlags');
Expand Down Expand Up @@ -1451,13 +1451,13 @@ function ReactElement(type, key, _ref, self, source, owner, props, debugStack, d
function jsxProdSignatureRunningInDevWithDynamicChildren(type, config, maybeKey, source, self) {
{
var isStaticChildren = false;
return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self);
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}
}
function jsxProdSignatureRunningInDevWithStaticChildren(type, config, maybeKey, source, self) {
{
var isStaticChildren = true;
return jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self);
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}
}
var didWarnAboutKeySpread = {};
Expand All @@ -1469,6 +1469,10 @@ var didWarnAboutKeySpread = {};
*/

function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
return jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self);
}

function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self, debugStack, debugTask) {
{
if (!isValidElementType(type)) {
// This is an invalid element type.
Expand Down Expand Up @@ -1642,6 +1646,7 @@ function jsxDEV$1(type, config, maybeKey, isStaticChildren, source, self) {
* See https://reactjs.org/docs/react-api.html#createelement
*/


function createElement(type, config, children) {
{
if (!isValidElementType(type)) {
Expand Down Expand Up @@ -2734,7 +2739,9 @@ function forwardRef(render) {
// This kind of inner function is not used elsewhere so the side effect is okay.

if (!render.name && !render.displayName) {
render.displayName = name;
Object.defineProperty(render, 'name', {
value: name
});
}
}
});
Expand Down Expand Up @@ -2774,7 +2781,9 @@ function memo(type, compare) {
// This kind of inner function is not used elsewhere so the side effect is okay.

if (!type.name && !type.displayName) {
type.displayName = name;
Object.defineProperty(type, 'name', {
value: name
});
}
}
});
Expand Down
Loading

0 comments on commit 6af8405

Please sign in to comment.