Skip to content

[Flight] Support classes in renderDebugModel #33590

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

sebmarkbage
Copy link
Collaborator

This adds better support for serializing class instances as Debug values.

It adds a new marker on the object { "": "$P...", ... } which indicates which constructor's prototype to use for this object's prototype. It doesn't encode arbitrary prototypes and it doesn't encode any of the properties on the prototype. It might get some of the properties from the prototype by virtue of toString on a class constructor will include the whole class's body.

This will ensure that the instance gets the right name in logs.

Additionally, this now also invokes getters if they're enumerable on the prototype. This lets us reify values that can only be read from native classes.

@sebmarkbage sebmarkbage requested a review from unstubbable June 22, 2025 03:35
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Jun 22, 2025
@react-sizebot
Copy link

react-sizebot commented Jun 22, 2025

Comparing: 6c7b1a1...a1dc769

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB +0.05% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 530.57 kB 530.57 kB = 93.67 kB 93.67 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 651.66 kB 651.66 kB = 114.78 kB 114.78 kB
facebook-www/ReactDOM-prod.classic.js = 674.81 kB 674.81 kB = 118.78 kB 118.78 kB
facebook-www/ReactDOM-prod.modern.js = 665.30 kB 665.30 kB = 117.19 kB 117.19 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.75% 98.61 kB 100.34 kB +1.18% 18.69 kB 18.91 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.75% 98.66 kB 100.39 kB +1.19% 18.71 kB 18.93 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.75% 98.97 kB 100.70 kB +1.21% 18.65 kB 18.87 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.75% 99.02 kB 100.75 kB +1.21% 18.67 kB 18.90 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +1.73% 100.29 kB 102.02 kB +1.20% 18.44 kB 18.66 kB
oss-stable/react-client/cjs/react-client-flight.development.js +1.72% 100.31 kB 102.04 kB +1.21% 18.46 kB 18.69 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.72% 100.79 kB 102.52 kB +1.16% 19.08 kB 19.30 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.72% 100.84 kB 102.57 kB +1.16% 19.10 kB 19.33 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.71% 101.35 kB 103.08 kB +1.16% 19.22 kB 19.44 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.71% 101.40 kB 103.13 kB +1.16% 19.24 kB 19.47 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.68% 103.27 kB 105.00 kB +1.21% 19.47 kB 19.71 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.68% 103.27 kB 105.00 kB +1.21% 19.47 kB 19.71 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.65% 104.56 kB 106.29 kB +1.19% 19.79 kB 20.03 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.65% 104.56 kB 106.29 kB +1.19% 19.79 kB 20.03 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.64% 105.80 kB 107.53 kB +1.08% 19.95 kB 20.17 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.64% 105.80 kB 107.53 kB +1.08% 19.95 kB 20.17 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.61% 107.65 kB 109.38 kB +1.17% 20.28 kB 20.51 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.61% 107.65 kB 109.38 kB +1.17% 20.28 kB 20.51 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.61% 107.74 kB 109.47 kB +1.17% 20.31 kB 20.55 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.61% 107.74 kB 109.47 kB +1.17% 20.31 kB 20.55 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.59% 108.72 kB 110.45 kB +1.07% 20.45 kB 20.67 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.59% 108.72 kB 110.45 kB +1.07% 20.45 kB 20.67 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.56% 111.08 kB 112.81 kB +1.04% 20.68 kB 20.90 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.56% 111.08 kB 112.81 kB +1.04% 20.68 kB 20.90 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.54% 112.41 kB 114.14 kB +1.04% 20.94 kB 21.15 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.54% 112.41 kB 114.14 kB +1.04% 20.94 kB 21.15 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.49% 116.16 kB 117.89 kB +0.93% 21.72 kB 21.92 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.48% 116.51 kB 118.24 kB +0.92% 21.64 kB 21.84 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +1.47% 117.81 kB 119.54 kB +0.93% 21.48 kB 21.68 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.46% 118.34 kB 120.07 kB +0.92% 22.11 kB 22.31 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.46% 118.90 kB 120.63 kB +0.91% 22.25 kB 22.45 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.43% 120.75 kB 122.48 kB +0.94% 22.50 kB 22.71 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.42% 122.04 kB 123.77 kB +0.93% 22.85 kB 23.06 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.40% 123.28 kB 125.01 kB +0.93% 22.98 kB 23.19 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.38% 125.14 kB 126.87 kB +0.94% 23.35 kB 23.57 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.38% 125.23 kB 126.96 kB +0.94% 23.39 kB 23.61 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.37% 126.21 kB 127.94 kB +0.93% 23.48 kB 23.70 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.35% 128.56 kB 130.29 kB +0.92% 23.72 kB 23.94 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.33% 129.89 kB 131.62 kB +0.91% 23.98 kB 24.20 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +1.19% 137.08 kB 138.71 kB +0.93% 32.20 kB 32.50 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +1.19% 137.11 kB 138.74 kB +0.93% 32.23 kB 32.53 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +1.06% 154.30 kB 155.93 kB +0.82% 36.03 kB 36.33 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js +0.60% 113.03 kB 113.71 kB +0.26% 20.92 kB 20.98 kB
oss-stable/react-server/cjs/react-server-flight.development.js +0.60% 113.03 kB 113.71 kB +0.26% 20.92 kB 20.98 kB
oss-experimental/react-server/cjs/react-server-flight.development.js +0.56% 120.88 kB 121.56 kB +0.34% 22.32 kB 22.40 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +0.41% 151.84 kB 152.46 kB +0.19% 28.14 kB 28.19 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +0.41% 151.84 kB 152.46 kB +0.19% 28.14 kB 28.19 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js +0.41% 590.89 kB 593.29 kB +0.33% 105.65 kB 105.99 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +0.40% 155.54 kB 156.16 kB +0.21% 28.64 kB 28.70 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +0.40% 155.54 kB 156.16 kB +0.21% 28.64 kB 28.70 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.40% 156.31 kB 156.93 kB +0.17% 29.00 kB 29.05 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.40% 156.31 kB 156.93 kB +0.17% 29.00 kB 29.05 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.39% 159.68 kB 160.30 kB +0.19% 29.54 kB 29.59 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.39% 159.68 kB 160.30 kB +0.19% 29.54 kB 29.59 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +0.39% 159.71 kB 160.33 kB +0.24% 29.56 kB 29.63 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.39% 160.22 kB 160.84 kB +0.18% 29.67 kB 29.72 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.39% 160.22 kB 160.84 kB +0.18% 29.67 kB 29.72 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +0.39% 160.98 kB 161.60 kB +0.19% 29.45 kB 29.51 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +0.39% 160.98 kB 161.60 kB +0.19% 29.45 kB 29.51 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.38% 163.39 kB 164.01 kB +0.17% 30.03 kB 30.08 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.38% 163.39 kB 164.01 kB +0.17% 30.03 kB 30.08 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.38% 163.41 kB 164.04 kB +0.20% 30.01 kB 30.07 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.38% 163.41 kB 164.04 kB +0.20% 30.01 kB 30.07 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +0.38% 163.76 kB 164.38 kB +0.24% 30.09 kB 30.16 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js +0.37% 167.55 kB 168.17 kB +0.24% 30.93 kB 31.01 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.37% 167.81 kB 168.44 kB +0.21% 30.51 kB 30.57 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.37% 167.81 kB 168.44 kB +0.21% 30.51 kB 30.57 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js +0.37% 168.09 kB 168.71 kB +0.25% 31.06 kB 31.13 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.37% 168.96 kB 169.59 kB +0.20% 30.81 kB 30.87 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.37% 168.96 kB 169.59 kB +0.20% 30.81 kB 30.87 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.37% 169.02 kB 169.64 kB +0.20% 30.83 kB 30.89 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.37% 169.02 kB 169.64 kB +0.20% 30.83 kB 30.89 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js +0.36% 171.61 kB 172.23 kB +0.25% 31.49 kB 31.57 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js +0.36% 171.63 kB 172.25 kB +0.25% 31.48 kB 31.56 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.35% 175.35 kB 175.97 kB +0.22% 32.60 kB 32.67 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +0.34% 180.02 kB 180.64 kB +0.21% 33.06 kB 33.13 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.33% 186.85 kB 187.48 kB +0.22% 34.14 kB 34.22 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.33% 188.00 kB 188.63 kB +0.21% 34.43 kB 34.50 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.33% 188.06 kB 188.68 kB +0.22% 34.44 kB 34.52 kB

Generated by 🚫 dangerJS against a1dc769

Such as if the body contains native code.
return name.replace(/^\[object (.*)\]$/, function (m, p0) {
return p0;
});
return name.slice(8, name.length - 1);
Copy link
Collaborator

@unstubbable unstubbable Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the regex now gone, a comment explaining the magic 8 would be nice, e.g.:

Suggested change
return name.slice(8, name.length - 1);
// Extract 'Object' from '[object Object]':
return name.slice(8, name.length - 1);

for (const propName in object) {
if (hasOwnProperty.call(value, propName) || isGetter(proto, propName)) {
// We intentionally invoke getters on the prototype to read any enumerable getters.
instanceDescription[propName] = object[propName];
Copy link
Collaborator

@unstubbable unstubbable Jun 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit concerned that this might trigger unwanted side effects, like the getters on the "exotic" promises in Next.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants