Skip to content

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Jul 28, 2025

Stacked on #34012.

This shows a time track for when some I/O started and when it finished relative to other I/O in the same component (or later in the same suspense boundary).

This is not meant to be a precise visualization since the data might be misleading if you're running this in dev which has other perf characteristics anyway. It's just meant to be a general way to orient yourself in the data.

We can also highlight rejected promises here.

The color scheme is the same as Chrome's current Performance Track colors to add continuity but those could change.

Screenshot 2025-07-27 at 11 48 03 PM

@sebmarkbage sebmarkbage requested review from eps1lon and hoxyq July 28, 2025 03:54
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Jul 28, 2025
@sebmarkbage
Copy link
Collaborator Author

I shrank the width to have more space for the title:

Screenshot 2025-07-28 at 11 06 44 AM

@sebmarkbage sebmarkbage merged commit 101b20b into facebook:main Jul 28, 2025
241 checks passed
sebmarkbage added a commit that referenced this pull request Jul 28, 2025
Stacked on #34016.

This is using the same thing we already do for the performance track to
provide a description of the I/O based on the content of the resolved
Promise. E.g. a Response's URL.

<img width="375" height="388" alt="Screenshot 2025-07-28 at 1 09 49 AM"
src="https://github.com/user-attachments/assets/f3fdc40f-4e21-4e83-b49e-21c7ec975137"
/>
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