feat[DevTools]: Use Chrome DevTools Performance extension API #29231

and-oli · 2024-05-23T12:50:01Z

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

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.
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.
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)
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 · 2024-05-23T12:50:05Z

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

Thanks for upstreaming this!

Looks good to me, the test failures are expected, because some of the test cases are based on the relative order of the markers and when .clearMarks() is called.

I am currently blocked with working on something else, but will plan some time for fixing and merging this.

hoxyq · 2024-05-28T19:33:51Z

packages/react-devtools-shared/src/backend/profilingHooks.js

+    if (!startMarkName) {
+      console.error(
+        'endMarkAndClear was unexpectedly called without a corresponding start mark',
+      );
+      return;
+    }


Note to self: check if these can be safely stored in a stack, especially with concurrent root case

hoxyq · 2024-06-18T14:06:19Z

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

…ed in tests (#29929) ## Summary This is the pre-requisite for #29231. Current implementation of profiling hooks is only using `performance.mark` and then makes `performance.clearMarks` call right after it to free the memory. We've been relying on this assumption in the tests that every mark is cleared by the time we check something. #29231 adds `performance.measure` calls and the `start` mark is not cleared until the corresponding `stop` one is registered, and then they are cleared together. ## How did you test this change? To test against React from source: ``` yarn test --build --project=devtools -r=experimental --ci ``` To test against React 18: ``` ./scripts/circleci/download_devtools_regression_build.js 18.0 --replaceBuild node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 18.0 --ci ```

hoxyq · 2024-06-19T15:52:05Z

@and-oli Applying changes from hoxyq@bc840a5 and rebasing commits on main should have the tests fixed.

Could you please try this?

and-oli · 2024-07-19T10:15:54Z

@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. :)

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](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMeasure) are modified to also use [Performance measure](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMeasure). with the `detail` field format specification of the Performance extension API. Because the marks in these hooks 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.

sebmarkbage · 2024-09-13T22:31:36Z

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. #30960

github-actions · 2024-12-12T23:05:12Z

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 · 2024-12-20T00:20:25Z

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!

facebook-github-bot added the CLA Signed label May 23, 2024

vercel bot deployed to Preview May 23, 2024 12:55 View deployment

vercel bot deployed to Preview May 23, 2024 13:01 View deployment

hoxyq approved these changes May 28, 2024

View reviewed changes

hoxyq mentioned this pull request Jun 19, 2024

refactor[react-devtools/tests]: use registered marks instead of cleared in tests #29929

Merged

and-oli force-pushed the main branch 2 times, most recently from 1f5239a to d07835a Compare July 19, 2024 09:30

vercel bot deployed to Preview July 19, 2024 09:39 View deployment

and-oli force-pushed the main branch from d07835a to 807c6db Compare July 19, 2024 09:53

vercel bot deployed to Preview July 19, 2024 10:00 View deployment

and-oli force-pushed the main branch from 807c6db to 9a4df9c Compare July 19, 2024 10:06

vercel bot deployed to Preview July 19, 2024 10:09 View deployment

and-oli force-pushed the main branch from 9a4df9c to 54db944 Compare July 19, 2024 12:41

vercel bot deployed to Preview July 19, 2024 12:43 View deployment

and-oli mentioned this pull request Jul 26, 2024

Add a non-normative format for the detail param that allows developers to customize the presentation of timings in devtools w3c/user-timing#111

Open

nolanlawson mentioned this pull request Aug 30, 2024

Enhance performance timings with the DevTools extensibility API salesforce/lwc#4511

Closed

sebmarkbage requested a review from hoxyq September 13, 2024 22:30

github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Dec 12, 2024

github-actions bot closed this Dec 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat[DevTools]: Use Chrome DevTools Performance extension API #29231

feat[DevTools]: Use Chrome DevTools Performance extension API #29231

and-oli commented May 23, 2024

vercel bot commented May 23, 2024 •

edited

Loading

hoxyq left a comment

hoxyq May 28, 2024

hoxyq commented Jun 18, 2024

hoxyq commented Jun 19, 2024

and-oli commented Jul 19, 2024

sebmarkbage commented Sep 13, 2024

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 20, 2024

feat[DevTools]: Use Chrome DevTools Performance extension API #29231

feat[DevTools]: Use Chrome DevTools Performance extension API #29231

Conversation

and-oli commented May 23, 2024

Summary

Motivation

vercel bot commented May 23, 2024 • edited Loading

hoxyq left a comment

Choose a reason for hiding this comment

hoxyq May 28, 2024

Choose a reason for hiding this comment

hoxyq commented Jun 18, 2024

hoxyq commented Jun 19, 2024

and-oli commented Jul 19, 2024

sebmarkbage commented Sep 13, 2024

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 20, 2024

vercel bot commented May 23, 2024 •

edited

Loading