Add hermes-specific support for the trace event format #458

zacharyfmarion · 2023-12-26T19:40:15Z

Profiles that are transformed into the hermes trace event format are guaranteed to have specific arguments that supply metadata that is useful for debugging - namely the filename, line + col number that the function call originated from, with sourcemaps applied. This PR adds specific support for this information to the trace event importer. This means that we can have the Frame name be just the name of the function, since we know all the information we want to be displayed in the UI is captured in the frame info, which makes the traces cleaner to look at.

Before	After

coveralls · 2023-12-26T19:41:38Z

coverage: 43.517% (+0.1%) from 43.39%
when pulling a8aabb2 on zacharyfmarion:zac/hermes-specfic-changes
into 88f4fe6 on jlfwong:main.

zacharyfmarion · 2023-12-26T19:45:02Z

src/import/trace-event.ts

@@ -48,12 +48,30 @@ interface TraceEvent {
  cat?: string

  // Any arguments provided for the event. Some of the event types have required argument fields, otherwise, you can put any information you wish in here. The arguments are displayed in Trace Viewer when you view an event in the analysis section.
-  args: any
+  args?: any


Based on the spec this is not a required field for some event types, so marked it as optional. Happy to change back if this was intentional

jlfwong

Cool! High level looks good. A few minor requests inline, and then more generally please change all of the isHermesProfile arguments to be enum args instead of an ExporterSource with current values of UNKNOWN or HERMES. That way this will extend well if we want to specialize for other trace events types in the future, and also makes call-sites more self-documenting

jlfwong · 2023-12-26T20:57:18Z

src/import/trace-event.ts

@@ -669,6 +739,8 @@ export function importTraceEvents(rawProfile: Trace): ProfileGroup {
    return sampleListToProfileGroup(rawProfile)
  } else if (isTraceEventObject(rawProfile)) {
    return eventListToProfileGroup(rawProfile.traceEvents)
+  } else if (isHermesTraceEventList(rawProfile)) {
+    return eventListToProfileGroup(rawProfile, true)


As much as possible, I like to use enums rather than bare boolean arguments because it makes it clearer what's going on at the call-site. The true here isn't self documenting, but if this was e.g. return eventListToProfileGroup(rawProfile, ExportSource.HERMES) it would be really clear

makes sense - generally I just make any function that takes in more than one obvious parameter take in an object so the meaning of every param is clear at the callsite, but I saw that it isn't a pattern in the codebase. Using an enum is super readable, will do that

jlfwong · 2023-12-26T20:59:35Z

src/import/trace-event.ts

+function isHermesTraceEventList(maybeEventList: any): maybeEventList is HermesTraceEvent[] {
+  if (!isTraceEventList(maybeEventList)) return false
+
+  return maybeEventList.every(el => isHermesTraceEvent(el.args))


For the sake of hermes profile import speed, it's IMO fine to just check the first event. Otherwise this seems like it might be needlessly slow.

jlfwong · 2023-12-26T21:02:10Z

src/import/trace-event.ts

+  const requiredProperties: Array<keyof HermesTraceEventArgs> = [
+    'line',
+    'column',
+    'name',
+    'category',
+    'url',
+    'params',
+    'allocatedCategory',
+    'allocatedName',
+  ]


Browsers probably optimize this anyway, but just for sanity, let's move this array outside of the call-stack. This seems like it would fit well as a constant directly below HermesTraceEventArgs as heremesTraceEventRequiredProperties

zacharyfmarion · 2023-12-26T21:52:16Z

@jlfwong thanks for the feedback, pushed up some fixes!

jlfwong · 2023-12-26T21:59:04Z

src/import/trace-event.ts

+  // We just check the first element to avoid iterating over all trace events,
+  // and asumme that if the first one is formatted like a hermes profile then
+  // all events will be
+  return isHermesTraceEvent(maybeEventList[0].args)


[0]?.args please!

Nevermind, this is guarded in isTraceEventList

jlfwong · 2023-12-26T22:02:19Z

Amazing!

If you write a markdown description (just in a comment here is fine) for React Native profiling, then I'll copy that into the wiki and update the README to link to it to indicate there's specific support for React Native via Hermes.

Here's an example of such a page: https://github.com/jlfwong/speedscope/wiki/Importing-from-pprof-(go)

zacharyfmarion · 2023-12-27T13:52:03Z

Importing from Hermes

Hermes is a javascript engine developed by facebook for use in react-native applications. For the most up-to-date instructions on how to take a profile, see Profiling with Hermes.

Profiling in Development Mode

To record a sampling profiler from the Dev Menu:

Navigate to your running Metro server terminal.
Press d to open the Dev Menu.
Select Enable Sampling Profiler.

Execute your JavaScript by in your app (press buttons, etc.)
Open the Dev Menu by pressing d again.
Select Enable Sampling Profiler again (this is currently a bug and might correctly say disable in the future) to stop recording and save the sampling profiler.

A toast will show the location where the sampling profiler has been saved, usually in /data/user/0/com.appName/cache/*.cpuprofile

You can then extract the profile from your emulator / device using the following command:

npx react-native@latest profile-hermes [destinationDir]

To view, drag and drop the profile from destinationDir into Speedscope.

Profiling in Release Mode

To profile hermes in a release build of your app, you can use the react-native-release-profiler npm package:

yarn add react-native-release-profiler
cd ios && pod install

Build your app in release mode
Start a profiling session:

import { startProfiling } from 'react-native-release-profiler'

startProfiling()

Stop the profiling session:

import { stopProfiling } from 'react-native-release-profiler'

// `true` to save the trace to the phone's downloads folder, `false` otherwise
const path = await stopProfiling(true)

Download and process the performance trace from your phone to your PC:

On Android:

First find your app id. It should look something like com.mypackage and be visible in app/build.gradle in the defaultConfig section:

android {
    defaultConfig {
        applicationId "com.profilern" // <-- This one!
        // ...
    }
}

Then run:

npx react-native-release-profiler --fromDownload --appId <your appId>

On iOS:

npx react-native-release-profiler --local <path to profile>

To view, drag and drop the profile saved in your current working directory into Spedscope. It should be transformed with sourcemaps!

zacharyfmarion · 2023-12-27T13:52:56Z

@jlfwong took a pass at some docs ^. Profiling in release mode is something that Margelo recently worked one while contracting for my company, so honestly these are probably the most up-to-date / complete docs that exist anywhere right now.

jlfwong · 2023-12-27T15:49:05Z

@zacharyfmarion Great! Added to the wiki, and updated the README.

Whenever you'd like to do an awareness push on Twitter or LinkedIn or wherever, let me know and I'll help signal boost.

Zachary Marion added 4 commits December 26, 2023 09:10

Scaffold approach

9f13a1a

Support the hermes trace event format

84cc8fe

Add test

d1f6bcb

Self nits

82c741a

zacharyfmarion commented Dec 26, 2023

View reviewed changes

jlfwong reviewed Dec 26, 2023

View reviewed changes

Address PR feedback

a8aabb2

jlfwong reviewed Dec 26, 2023

View reviewed changes

jlfwong merged commit 4feb1e5 into jlfwong:main Dec 26, 2023
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add hermes-specific support for the trace event format #458

Add hermes-specific support for the trace event format #458

zacharyfmarion commented Dec 26, 2023 •

edited

coveralls commented Dec 26, 2023 •

edited

zacharyfmarion Dec 26, 2023

jlfwong Dec 26, 2023

jlfwong left a comment

jlfwong Dec 26, 2023 •

edited

zacharyfmarion Dec 26, 2023

jlfwong Dec 26, 2023

jlfwong Dec 26, 2023

zacharyfmarion commented Dec 26, 2023

jlfwong Dec 26, 2023

jlfwong Dec 26, 2023

jlfwong commented Dec 26, 2023 •

edited

zacharyfmarion commented Dec 27, 2023 •

edited

zacharyfmarion commented Dec 27, 2023

jlfwong commented Dec 27, 2023

Add hermes-specific support for the trace event format #458

Add hermes-specific support for the trace event format #458

Conversation

zacharyfmarion commented Dec 26, 2023 • edited

coveralls commented Dec 26, 2023 • edited

zacharyfmarion Dec 26, 2023

Choose a reason for hiding this comment

jlfwong Dec 26, 2023

Choose a reason for hiding this comment

jlfwong left a comment

Choose a reason for hiding this comment

jlfwong Dec 26, 2023 • edited

Choose a reason for hiding this comment

zacharyfmarion Dec 26, 2023

Choose a reason for hiding this comment

jlfwong Dec 26, 2023

Choose a reason for hiding this comment

jlfwong Dec 26, 2023

Choose a reason for hiding this comment

zacharyfmarion commented Dec 26, 2023

jlfwong Dec 26, 2023

Choose a reason for hiding this comment

jlfwong Dec 26, 2023

Choose a reason for hiding this comment

jlfwong commented Dec 26, 2023 • edited

zacharyfmarion commented Dec 27, 2023 • edited

Importing from Hermes

Profiling in Development Mode

Profiling in Release Mode

zacharyfmarion commented Dec 27, 2023

jlfwong commented Dec 27, 2023

zacharyfmarion commented Dec 26, 2023 •

edited

coveralls commented Dec 26, 2023 •

edited

jlfwong Dec 26, 2023 •

edited

jlfwong commented Dec 26, 2023 •

edited

zacharyfmarion commented Dec 27, 2023 •

edited