Profiling for React Native

[krystofwoldrich]

Hello everyone!

Sentry offers Profiling for multiple platforms, more in the docs, but React Native is not one of them, yet.

We see your interest and decided to start building this feature. Some of you might have seen the original issue and reacted to it.

We aim to add profiling for React Native JavaScript and combine it with the existing Android and iOS profiling features. As the Hermes engine is the default in the RN world it's our priority to support it. Currently, you can use our native profiling feature but you have to initialize the underlying SDKs manually as described here. With the RN support, this won't be needed and the native profiling will be set automatically through RN.

We are opening this discussion to hear from you, please let us know your thought about RN Profiling in the discussion below!

Example of React Native JS Profile in Sentry:

[fabiendem]

Hi,

Few questions to understand the scope:

• Do you intend to support both RN architectures (old and new)?
• What should we expect in the profiling for RN? A similar flamegraph to what we see in Flipper via the React Profiler?
• Do you intend to track the RAM and CPU usage?
• What would the be performance cost added via this profiling option?

cheers!

[krystofwoldrich]

Thanks for the questions.

• Yes, we would like to support both architectures.
• Yes, you can expect a similar flamegraph.
• Likely in the future, but not in the first version.
• We don't know yet.

[fabiendem]

cheers!

[pizzacoffeecode]

This would be really helpful for our cross platform app. Our UI is mainly react native and easily the area we are most interested in profiling.

[krystofwoldrich]

Hello everyone,
I would like to give you a small update on the Profiling progress.

As mentioned above we are focusing on Hermes first. We are not planning support for JSC. Mainly because the RN Tooling doesn't have a built-in JSC profiler.

To create the JavaScript profiles we are using the Hermes SamplingProfiler.

In the screenshot below you can see an example of a Profile sent from the @sentry/react-native SDK using the Hermes SamplingProfiler.

[krystofwoldrich]

Experimental support released in https://github.com/getsentry/sentry-react-native/releases/tag/5.8.0

Docs: https://docs.sentry.io/platforms/react-native/profiling/

yarn add @sentry/react-native@latest

Sentry.init({
  dsn: '__DSN__',
  tracesSampleRate: 1.0,
  _experiments: {
    // The sampling rate for profiling is relative to TracesSampleRate.
    // In this case, we'll capture profiles for 100% of transactions.
    profilesSampleRate: 1.0,
  },
});

[kahest]

Experimental support for mixed Profiles on iOS has been released in 5.14.0.