Skip to content

Conversation

unstubbable
Copy link
Collaborator

@unstubbable unstubbable commented Sep 18, 2025

This PR ensures that server components are reliably included in the DevTools component tree, even if debug info is received delayed, e.g. when using a debug channel. The fix consists of three parts:

  • We must not unset the debug chunk before all debug info entries are resolved.
  • We must ensure that the "RSC Stream" IO debug info entry is pushed last, after all other entries were resolved.
  • We need to transfer the debug info from blocked element chunks onto the lazy node and the element.

Ideally, we wouldn't even create a lazy node for blocked elements that are at the root of the JSON payload, because that would basically wrap a lazy in a lazy. This optimization that ensures that everything around the blocked element can proceed is only needed for nested elements. However, we also need it for resolving deduped references in blocked root elements, unless we adapt that logic, which would be a bigger lift.

When reloading the Flight fixture, the component tree is now displayed deterministically. Previously, it would sometimes omit synchronous server components.

complete

@meta-cla meta-cla bot added the CLA Signed label Sep 18, 2025
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Sep 18, 2025
@react-sizebot
Copy link

react-sizebot commented Sep 18, 2025

Comparing: e02c173...74ce56a

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 = 534.43 kB 534.43 kB = 94.34 kB 94.34 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.11% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 663.68 kB 663.68 kB = 117.01 kB 117.01 kB
facebook-www/ReactDOM-prod.classic.js = 687.59 kB 687.59 kB = 121.04 kB 121.05 kB
facebook-www/ReactDOM-prod.modern.js = 678.02 kB 678.02 kB = 119.40 kB 119.40 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/esm/react-server-dom-esm-client.browser.production.js +1.58% 92.15 kB 93.61 kB +1.64% 18.88 kB 19.19 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +1.58% 92.15 kB 93.61 kB +1.64% 18.88 kB 19.19 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +1.56% 92.94 kB 94.39 kB +1.63% 18.99 kB 19.30 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +1.37% 128.15 kB 129.91 kB +1.05% 22.95 kB 23.19 kB
oss-stable/react-client/cjs/react-client-flight.development.js +1.37% 128.18 kB 129.94 kB +1.06% 22.97 kB 23.22 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.33% 132.75 kB 134.51 kB +1.16% 24.08 kB 24.36 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.33% 132.80 kB 134.56 kB +1.17% 24.10 kB 24.38 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.32% 133.34 kB 135.10 kB +1.26% 24.38 kB 24.69 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.32% 133.34 kB 135.10 kB +1.26% 24.38 kB 24.69 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.31% 134.71 kB 136.47 kB +1.15% 24.53 kB 24.81 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.31% 134.76 kB 136.52 kB +1.15% 24.55 kB 24.83 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.29% 136.55 kB 138.31 kB +1.22% 24.90 kB 25.20 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.29% 136.55 kB 138.31 kB +1.22% 24.90 kB 25.20 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.29% 136.57 kB 138.33 kB +1.23% 24.91 kB 25.22 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.29% 136.57 kB 138.33 kB +1.23% 24.91 kB 25.22 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.28% 137.28 kB 139.04 kB +1.08% 25.01 kB 25.28 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.28% 137.33 kB 139.09 kB +1.09% 25.03 kB 25.30 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.28% 137.80 kB 139.56 kB +1.12% 25.08 kB 25.36 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.28% 137.80 kB 139.56 kB +1.12% 25.08 kB 25.36 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.28% 137.91 kB 139.67 kB +1.08% 25.18 kB 25.45 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.28% 137.96 kB 139.72 kB +1.08% 25.20 kB 25.47 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.26% 139.48 kB 141.24 kB +1.20% 25.15 kB 25.45 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.26% 139.48 kB 141.24 kB +1.20% 25.15 kB 25.45 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.25% 141.18 kB 142.94 kB +1.17% 25.42 kB 25.72 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.25% 141.18 kB 142.94 kB +1.17% 25.42 kB 25.72 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.23% 142.59 kB 144.35 kB +1.15% 25.67 kB 25.97 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.23% 142.59 kB 144.35 kB +1.15% 25.67 kB 25.97 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.23% 142.62 kB 144.38 kB +1.15% 25.69 kB 25.98 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.23% 142.62 kB 144.38 kB +1.15% 25.69 kB 25.98 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +1.04% 169.84 kB 171.60 kB +0.98% 29.61 kB 29.90 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.01% 174.47 kB 176.23 kB +0.89% 30.67 kB 30.95 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.01% 175.03 kB 176.79 kB +0.91% 31.06 kB 31.34 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.00% 176.43 kB 178.19 kB +0.90% 31.10 kB 31.38 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +0.99% 178.24 kB 180.00 kB +0.89% 31.56 kB 31.84 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.99% 178.26 kB 180.02 kB +0.89% 31.57 kB 31.85 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.98% 179.01 kB 180.77 kB +0.92% 31.58 kB 31.87 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +0.98% 179.46 kB 181.22 kB +0.94% 31.70 kB 32.00 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.98% 179.63 kB 181.39 kB +0.91% 31.74 kB 32.03 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +0.97% 181.14 kB 182.90 kB +0.91% 31.76 kB 32.05 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.96% 182.84 kB 184.60 kB +0.90% 32.03 kB 32.32 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +0.96% 184.25 kB 186.01 kB +0.92% 32.27 kB 32.57 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.96% 184.27 kB 186.03 kB +0.92% 32.29 kB 32.59 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.86% 185.84 kB 187.44 kB +0.36% 42.38 kB 42.54 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.86% 185.86 kB 187.46 kB +0.37% 42.41 kB 42.56 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.73% 220.92 kB 222.53 kB +0.32% 48.99 kB 49.14 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +0.42% 57.28 kB 57.52 kB +0.26% 11.31 kB 11.33 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +0.42% 57.28 kB 57.52 kB +0.26% 11.31 kB 11.33 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.42% 57.57 kB 57.81 kB +0.27% 11.38 kB 11.41 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.42% 57.57 kB 57.81 kB +0.27% 11.38 kB 11.41 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +0.42% 57.88 kB 58.12 kB +0.26% 11.43 kB 11.46 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.42% 58.17 kB 58.41 kB +0.30% 11.50 kB 11.54 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.41% 59.54 kB 59.79 kB +0.25% 11.79 kB 11.82 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.41% 59.54 kB 59.79 kB +0.25% 11.79 kB 11.82 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.40% 59.91 kB 60.15 kB +0.24% 11.87 kB 11.90 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.40% 59.91 kB 60.15 kB +0.24% 11.87 kB 11.90 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.40% 60.15 kB 60.39 kB +0.30% 11.91 kB 11.94 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.40% 60.51 kB 60.76 kB +0.27% 11.99 kB 12.02 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js +0.39% 65.52 kB 65.77 kB +0.25% 11.89 kB 11.92 kB
oss-stable/react-client/cjs/react-client-flight.production.js +0.39% 65.54 kB 65.80 kB +0.25% 11.91 kB 11.94 kB
oss-experimental/react-client/cjs/react-client-flight.production.js +0.39% 66.11 kB 66.37 kB +0.28% 12.03 kB 12.06 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +0.39% 62.80 kB 63.05 kB +0.34% 12.52 kB 12.57 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +0.39% 62.80 kB 63.05 kB +0.34% 12.52 kB 12.57 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +0.38% 63.40 kB 63.65 kB +0.27% 12.65 kB 12.68 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +0.37% 65.88 kB 66.12 kB +0.27% 13.13 kB 13.16 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +0.37% 65.88 kB 66.12 kB +0.27% 13.13 kB 13.16 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +0.37% 65.90 kB 66.14 kB +0.26% 13.14 kB 13.18 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +0.37% 65.90 kB 66.14 kB +0.26% 13.14 kB 13.18 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +0.37% 66.00 kB 66.24 kB +0.28% 12.89 kB 12.92 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +0.37% 66.00 kB 66.24 kB +0.28% 12.89 kB 12.92 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +0.36% 66.48 kB 66.72 kB +0.26% 13.25 kB 13.28 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +0.36% 66.50 kB 66.74 kB +0.26% 13.26 kB 13.30 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +0.36% 66.64 kB 66.88 kB +0.27% 13.00 kB 13.04 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +0.36% 67.17 kB 67.41 kB +0.31% 13.14 kB 13.19 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +0.36% 67.17 kB 67.41 kB +0.31% 13.14 kB 13.19 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +0.36% 67.80 kB 68.04 kB +0.29% 13.28 kB 13.32 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +0.35% 69.29 kB 69.53 kB +0.26% 13.57 kB 13.60 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +0.35% 69.29 kB 69.53 kB +0.26% 13.57 kB 13.60 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +0.35% 69.92 kB 70.17 kB +0.26% 13.70 kB 13.74 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +0.34% 70.44 kB 70.68 kB +0.26% 13.79 kB 13.83 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +0.34% 70.44 kB 70.68 kB +0.26% 13.79 kB 13.83 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +0.34% 70.46 kB 70.71 kB +0.25% 13.81 kB 13.84 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +0.34% 70.46 kB 70.71 kB +0.25% 13.81 kB 13.84 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +0.34% 71.08 kB 71.32 kB +0.27% 13.93 kB 13.97 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +0.34% 71.10 kB 71.34 kB +0.25% 13.94 kB 13.98 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js +0.26% 666.78 kB 668.54 kB +0.24% 117.54 kB 117.83 kB

Generated by 🚫 dangerJS against 74ce56a

@unstubbable unstubbable force-pushed the blocked-debug-info-dev-tools branch 2 times, most recently from 22694f0 to 2d54b9a Compare September 18, 2025 18:58
@unstubbable unstubbable marked this pull request as ready for review September 18, 2025 19:03
@unstubbable unstubbable force-pushed the blocked-debug-info-dev-tools branch from 2d54b9a to 253a081 Compare September 18, 2025 19:33
@sebmarkbage
Copy link
Collaborator

I think what you should do to unblock is go back to the strategy where you transfer debug info onto the referenced Lazy node. That is wrong but it's also wrong when we do that on elements since it mutates an element that might be used elsewhere too, so we should fix that independently. Perhaps by cloning but I have some other ideas for lazy too.

@unstubbable unstubbable force-pushed the blocked-debug-info-dev-tools branch 3 times, most recently from d976077 to b448f15 Compare September 23, 2025 19:20
@unstubbable unstubbable force-pushed the blocked-debug-info-dev-tools branch 3 times, most recently from 8c1deb8 to a355a27 Compare September 23, 2025 20:19
@unstubbable unstubbable force-pushed the blocked-debug-info-dev-tools branch from a355a27 to 74e3721 Compare September 23, 2025 20:47
@unstubbable unstubbable force-pushed the blocked-debug-info-dev-tools branch from c22c38f to 5ef8452 Compare September 23, 2025 20:56
@unstubbable unstubbable merged commit ac2c1a5 into facebook:main Sep 25, 2025
241 checks passed
@unstubbable unstubbable deleted the blocked-debug-info-dev-tools branch September 25, 2025 13:13
EugeneChoi4 pushed a commit to EugeneChoi4/react that referenced this pull request Sep 29, 2025
This PR ensures that server components are reliably included in the
DevTools component tree, even if debug info is received delayed, e.g.
when using a debug channel. The fix consists of three parts:

- We must not unset the debug chunk before all debug info entries are
resolved.
- We must ensure that the "RSC Stream" IO debug info entry is pushed
last, after all other entries were resolved.
- We need to transfer the debug info from blocked element chunks onto
the lazy node and the element.

Ideally, we wouldn't even create a lazy node for blocked elements that
are at the root of the JSON payload, because that would basically wrap a
lazy in a lazy. This optimization that ensures that everything around
the blocked element can proceed is only needed for nested elements.
However, we also need it for resolving deduped references in blocked
root elements, unless we adapt that logic, which would be a bigger lift.

When reloading the Flight fixture, the component tree is now displayed
deterministically. Previously, it would sometimes omit synchronous
server components.

<img width="306" height="565" alt="complete"
src="https://github.com/user-attachments/assets/db61aa10-1816-43e6-9903-0e585190cdf1"
/>

---------

Co-authored-by: Sebastian Markbage <sebastian@calyptus.eu>
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.

3 participants