react-native-release-profiler

react-native-release-profiler

A fast and simple library to passively profile JS/Hermes performance in production and release builds.

Why

Usually performance issues are profiled in debug builds, which could lead to false positives (e.g. JS Garbage Collectors, Hermes-specific debug markers, or other LLDB hangs).

react-native-release-profiler allows you to profile your app in release builds, both in a local environment to profile specific issues, as well as in a production environment to spot regressions or collect performance samples from a wider variety of user devices.

Web support

The web support is based on sampling JS Self-Profiling API, so not all browsers support it yet. To see in which browsers it is supported, check this page.

To make it possible to work you'll need to add 'Document-Policy': 'js-profiling' header to your server response. Using webpack in dev mode you can do that by adding these lines to your webpack.config.js:

devServer: {
    headers: {
        'Document-Policy': 'js-profiling',
    },
}

[!WARNING] By default sampling interval is set to 10 milliseconds. This is the lowest supported interval, but on Windows machines this interval will be 16 milliseconds.

Need help?

If you're having performance problems in your app, feel free to reach out to us at https://margelo.com. We do this a lot. 😉

Installation

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

Expo

Expo requires you to also install @react-native-community/cli

yarn add --dev @react-native-community/cli

Usage

• Install react-native-release-profiler
• 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:

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

  • On iOS and web:

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

• Open the performance trace in your tool of choice:
  • SpeedScope (https://www.speedscope.app)
  • Perfetto UI (https://ui.perfetto.dev/)
  • Google Chrome's Tracing UI (chrome://tracing)

API

startProfiling(): void

Synchronously starts the Hermes Profiling Session.

stopProfiling(saveInDownloadsDirectory?: boolean, fileName?: string): Promise<string>

Asynchronously stops the Hermes Profiling Session, and saves the file in a cache or downloads directory if saveInDownloadsDirectory is true using the provided fileName (web only).

Returns the path of the saved profile.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT