feat[DevTools]: Use Chrome DevTools Performance extension API

[and-oli]

Summary

Hi there React team! ⚛️ 👋

This change is a proof of concept of how the new Chrome DevTools Performance extension API (https://bit.ly/rpp-e11y) can be used to surface React runtime data directly in the Chrome DevTools Performance panel.

To do this, the hooks in profilingHooks.js that mark beginning and end of React measurements using Performance marks are modified to also use Performance measure with the detail field format specification of the Performance extension API.

Because these marks are used by React Profiler, they are kept untouched and the calls to performance.measure are added on top to surface them to the Chrome DevTools Performance panel, along with the browser's native runtime data.

Because this is a proof of concept, not all the tasks and marks taken by the React Profiler are added to the Chrome DevTools Performance panel (f.e. update scheduling marks), but this could be done as a follow up of this commit.

Note: to enable the user timings to be collected in the first place, the React DevTools extension needs to be installed (so that the hooks are loaded to the website). In an alternative approach, the calls to the api could be added directly to the framework so that no extension needs to be installed, but this would require a more careful implementation.

Motivation

We (the Chrome Page Quality team) think allowing developers to extend the Chrome Peformance Panel can significantly offer a better experience for developers looking to improve performance to the current solutions available.

Right now, the React Profiler has its own implementation of a timeline that parses a Chromium's trace data and merges it with its own instrumentation data. This is problematic because

1. It fragments the developer workflow: Users are required to profile with React DevTools and with the browser profiler (the Performance panel). After the recording is finished the output of the Performance panel (browser trace data) needs to be imported into the React profiler.
2. Insufficient details in specialized tools: Users might still need a more detailed view of the browser runtime which is not available in specialized tools like the react profiler (f.e. dropped frames). This leads them to frequently jump back and forth between tools to obtain the whole picture.
3. Broken deps: Changes to the upstream trace data format will cause the React profiler to break (f.e. React profiler doesn't support the current format exported by the Chrome Performance panel)
4. Cost of maintenance: Framework tool developers need to implement and maintain code that mimics the functionality of the native browser tools (f.e. JS flamechart, network lane, etc.).

With the proposed API this problems could be significantly alleviated and it could potentially yield to an overall better experience for web developers.

For reference, here's at an example of a timeline recorded by React's profiler being surfaced to the Chrome DevTools Performance timeline:

React Profiler:

Chrome DevTools Performance panel extended with React runtime data:

We aim to collect feeback about the API and explore further potential use cases where the API (or an expansion of it) would offer value in the web ecosystem. The React team is a key player in this space and we would greatly appreciate it if you collaborated in this regard, so please let us know your thoughts! 🙏

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 19, 2024 0:43am

[hoxyq]

Hey, sorry for the delay, I have started working on merging this. Looks like we need to fix some incorrect assumptions in our timeline profiler in order to ship this. I will publish some PRs separately to this one and will publish the one in your fork to fix the failing tests, hopefully this week.

cc @and-oli

[hoxyq]

@and-oli Applying changes from https://github.com/hoxyq/react/commit/bc840a5ee363105fa47c54b1d55be529706161ea and rebasing commits on main should have the tests fixed.

Could you please try this?

[and-oli]

@hoxyq I've updated the PR to use the latest API status and applied the changes you suggested to fix the failing tests. Tests seem to be passing now, please lmk if this looks good to you. :)

[sebmarkbage]

This will be superseded but a new take on the timeline profiler that'll be integrated with performance.measure and replace the React DevTools one. Starting with the flag added in. https://github.com/facebook/react/pull/30960

[github-actions[bot]]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions[bot]]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!