Hermes Profile Support in Speedscope

[zacharyfmarion]

I have a PR open to add the JSON object trace format that Hermes uses to speedscope. Hopefully this will be helpful to react native engineers (and maybe the Hermes devs as well) 🙂. I find speedscope way better for investigating performance issues compared to perfetto or chrome dev tools, specifically their sandwich view is 🔥.

Right now I am also maintaining a fork of speedscope here that properly formats profiles transformed to the chrome trace format with npx react-native@latest profile-hermes [destinationDir]. If I can get hermes-profile-transformer to apply sourcemaps to the native hermes trace format I will get rid of the fork and just start using the native hermes format + speedscope.

[zacharyfmarion]

These changes are all merged and live on https://www.speedscope.app! It now correctly handles both the raw and converted Hermes profiles

[zacharyfmarion]

This PR adds support for the production hermes format to hermes-profile-transformer. @tmikov would you mind validating that the transformation of funcVirtAddr and offset is done correctly?

[tmikov]

I am not familiar with the profile format, but I will ask someone on the team to look at it.

[dannysu]

@zacharyfmarion, I think hermes-profile-transformer was necessary back when the Hermes debugger did not produce a Chrome DevTools compatible output.

Nowadays, you can do profiler captures that's compatible with the "known good" versions of Chrome DevTools.

Late last year with RN 0.73, we released a new experimental debugger: https://reactnative.dev/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks#debugging-improvements

If you bring up the new experimental debugger, you should be able to do a capture using the Profiler tab.
See https://reactnative.dev/docs/debugging?js-debugger=new-debugger

[zacharyfmarion]

@dannysu does that profiler work on production builds? Specifically this is adding compatibility for production Hermes profiles (taken using react-native-release-profiler). See #760 (comment).

[dannysu]

Ah, thanks for the additional context.

I'm unclear on using DevTools with production builds. I'll follow up with the React Native team.

But from Hermes perspective, we already support outputting things in the DevTools format: sampledTraceToStreamInDevToolsFormat(). You can see how that transformation is done in ChromeTraceSerializer.cpp.

Perhaps another problem is that the underlying Hermes functionality isn't exposed to HermesSamplingProfiler.java. It's there available through HermesRuntime though, so if that's accessible, then the function can be called.

Once a Chrome DevTools compatible capture is made, we expect you can use a known good version of DevTools to open it. Currently that's https://chrome-devtools-frontend.appspot.com/serve_file/@60127beb442528082b3f6eff7392267e145262c3/js_app.html