Closed zacharyfmarion closed 8 months ago
@jlfwong thanks for the feedback, pushed up some fixes!
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)
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.
To record a sampling profiler from the Dev Menu:
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.
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
import { startProfiling } from 'react-native-release-profiler'
startProfiling()
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)
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>
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!
@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.
@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.
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.