Skip to content

[Flight] Emit the time we awaited something inside a Server Component #33402

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

Merged
merged 2 commits into from
Jun 3, 2025

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jun 2, 2025

Stacked on #33400.

Screenshot 2025-06-01 at 10 27 47 PM

This is emitted with the start/end time and stack of the "await". Which may be different than the thing that started the I/O.

These awaits aren't quite as simple as just every await since you can start a sequence in parallel there can actually be multiple overlapping awaits and there can be CPU work interleaved with the await on the same component.

function getData() {
  await fetch(...);
  await fetch(...);
}
const promise = getData();
doWork();
await promise;

This has two "I/O" awaits but those are actually happening in parallel with doWork().

Since these also could have started before we started rendering this sequence (e.g. a component) we have to clamp it so that we don't consider awaits that start before the component.

What we're conceptually trying to convey is the time this component was blocked due to that I/O resource. Whether it's blocked from completing the last result or if it's blocked from issuing a waterfall request.

@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Jun 2, 2025
@react-sizebot
Copy link

react-sizebot commented Jun 2, 2025

Comparing: 157ac57...9a8da78

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 = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 529.82 kB 529.82 kB = 93.51 kB 93.51 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 = 650.91 kB 650.91 kB = 114.64 kB 114.63 kB
facebook-www/ReactDOM-prod.classic.js = 675.86 kB 675.86 kB = 118.91 kB 118.91 kB
facebook-www/ReactDOM-prod.modern.js = 666.14 kB 666.14 kB = 117.30 kB 117.30 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +1.72% 111.87 kB 113.80 kB +1.47% 21.11 kB 21.42 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.71% 112.23 kB 114.15 kB +1.46% 21.06 kB 21.36 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +1.69% 113.52 kB 115.45 kB +1.56% 20.85 kB 21.18 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.69% 114.06 kB 115.98 kB +1.47% 21.50 kB 21.82 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.68% 114.61 kB 116.54 kB +1.43% 21.64 kB 21.95 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.66% 115.96 kB 117.88 kB +1.46% 21.86 kB 22.18 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.65% 116.47 kB 118.39 kB +1.47% 21.89 kB 22.22 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.63% 117.76 kB 119.68 kB +1.40% 22.24 kB 22.56 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.62% 119.11 kB 121.03 kB +1.44% 22.37 kB 22.69 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.59% 120.85 kB 122.78 kB +1.39% 22.74 kB 23.06 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.59% 120.94 kB 122.87 kB +1.38% 22.78 kB 23.09 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.58% 121.85 kB 123.77 kB +1.51% 22.64 kB 22.98 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.56% 123.18 kB 125.11 kB +1.50% 22.89 kB 23.23 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +1.01% 150.75 kB 152.27 kB +0.58% 35.19 kB 35.40 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js +0.33% 577.75 kB 579.67 kB +0.32% 103.19 kB 103.52 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js +0.33% 165.17 kB 165.71 kB +0.31% 30.84 kB 30.94 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +0.33% 165.19 kB 165.73 kB +0.32% 30.83 kB 30.93 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +0.32% 171.86 kB 172.40 kB +0.25% 31.91 kB 31.99 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js +0.31% 173.00 kB 173.54 kB +0.25% 32.20 kB 32.28 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +0.31% 173.07 kB 173.61 kB +0.25% 32.22 kB 32.30 kB

Generated by 🚫 dangerJS against 9a8da78

This is different than the I/O start/end because it represents the time that
an await was blocked where as other work can have been done between the start
and when we awaited.
@sebmarkbage sebmarkbage merged commit 9cc74fe into facebook:main Jun 3, 2025
177 of 179 checks passed
sebmarkbage added a commit that referenced this pull request Jun 3, 2025
Stacked on #33402.

There's a bug in Chrome Performance tracking which uses the enclosing
line/column instead of the callsite in stacks.

For our fake eval:ed functions that represents functions on the server,
we can position the enclosing function body at the position of the
callsite to simulate getting the right line.

Unfortunately, that doesn't give us exactly the right callsite when it's
used for other purposes that uses the callsite like console logs and
error reporting and stacks inside breakpoints. So I don't think we want
to always do this.

For ReactAsyncInfo/ReactIOInfo, the only thing we're going to use the
fake task for is the Performance tracking, so it doesn't have any
downsides until Chrome fixes the bug and we'd have to revert it.
Therefore this PR uses that techniques only for those entries.

We could do this for Server Components too but we're going to use those
for other things too like console logs. I don't think it's worth
duplicating the Task objects. That would also make it inconsistent with
Client Components.

For Client Components, we could in theory also generate fake evals but
that would be way slower since there's so many of them and currently we
rely on the native implementation for those. So doesn't seem worth
fixing.

But since we can at least fix it for RSC I/O/awaits we can do this hack.
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