Skip to content

[Flight] Log "Server Requests" Track #33394

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

Stacked on #33392.

This adds another track to the Performance Track called "Server Requests".

Screenshot 2025-06-01 at 12 02 14 AM

This logs the flat list of I/O awaited on by Server Components. There will be other views that are more focused on what data blocks a specific Component or Suspense boundary but this is just the list of all the I/O basically so you can get an overview of those waterfalls without the noise of all the Component trees and rendering. It's similar to what the "Network" track is on the client.

I've been going back and forth on what to call this track but I went with "Server Requests" for now. The idea is that the name should communicate that this is something that happens on the server and is a pairing with the "Server Components" track. Although we don't use that feature, since it's missing granularity, it's also similar to "Server Timings".

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

react-sizebot commented Jun 1, 2025

Comparing: 65a46c7...8ce8c1a

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.63 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.15% 110.35 kB 111.62 kB +1.10% 20.85 kB 21.08 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +1.15% 110.70 kB 111.97 kB +1.14% 20.78 kB 21.02 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +1.13% 112.00 kB 113.27 kB +1.02% 20.61 kB 20.82 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +1.13% 112.53 kB 113.80 kB +1.08% 21.24 kB 21.47 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +1.12% 113.09 kB 114.36 kB +1.06% 21.38 kB 21.60 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +1.11% 114.43 kB 115.70 kB +1.12% 21.58 kB 21.82 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +1.10% 114.94 kB 116.21 kB +1.17% 21.61 kB 21.86 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +1.09% 116.23 kB 117.50 kB +1.09% 21.97 kB 22.20 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.08% 117.58 kB 118.85 kB +1.13% 22.09 kB 22.33 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.06% 119.33 kB 120.60 kB +1.10% 22.46 kB 22.70 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.06% 119.42 kB 120.69 kB +1.09% 22.49 kB 22.74 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.05% 120.33 kB 121.59 kB +1.10% 22.36 kB 22.61 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.04% 121.66 kB 122.93 kB +1.08% 22.61 kB 22.86 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.77% 149.44 kB 150.59 kB +0.56% 35.01 kB 35.21 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js +0.22% 575.89 kB 577.16 kB +0.20% 102.89 kB 103.09 kB

Generated by 🚫 dangerJS against 8ce8c1a

Helps distinguish various helpers like fetch vs query.

I also switched dedupes to use primary/secondary color. It was standing out too much.

By using the tertiary color for I/O we can avoid confusing the color with
the color Server Components.

This lets us associate the I/O track with the await in the Server Components track
by using the same color scheme but make it different from Server Component rendering.
@sebmarkbage sebmarkbage force-pushed the ioperformancetrack branch from 0ca49ea to 8ce8c1a Compare June 3, 2025 19:08
@sebmarkbage sebmarkbage merged commit d8919a0 into facebook:main Jun 3, 2025
240 checks passed
sebmarkbage added a commit that referenced this pull request Jun 3, 2025
Stacked on #33394.

This lets us create async stack traces to the owner that was in context
when the I/O was started or awaited.

<img width="615" alt="Screenshot 2025-06-01 at 12 31 52 AM"
src="https://github.com/user-attachments/assets/6ff5a146-33d6-4a4b-84af-1b57e73047d4"
/>

This owner might not be the immediate closest parent where the I/O was
awaited.
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