Profiling javascript thread performance

Description

When profiling a react-native app, often the bottleneck is in the JS thread. But there’s no way to know which javascript functions are the bottleneck.

As shown in the profiling doc, we can’t see the exact js calls:

Reproduction

I’ve reproduced it by using systrace.py as shown in the docs and got a profile looking like this:

Solution

Ideal solution would be some doc to use the V8 profiler.

Also, for react.js, we have React.addons.Perf. Maybe showing how to use it for react-native would be also nice.

EDIT3: looks like using react-addons-perf solve most of the issues for my specific case, I should maybe include it in the docs

I don’t know much about the react-native profiling infrastructure, maybe there’s already something built-in that I missed.

EDIT: after a bit more of research, I saw a few things:

• PerformanceLogger, seems to be what I want but can’t find docs on how to use it
• looks like systrace already mesure component rendering time
• there’s a sampling profiler, not sure how to use it too

EDIT2: also, looks like something is planned

I’m interested in contributing a PR for this if necessary.

Additional Information

• React Native version: 0.30.0
• Platform: android
• Operating System: linux

EDIT4: managed to something like what I wanted with react-addons-perf by using something like this:

import Perf from 'react-addons-perf';

....
    componentDidMount() {
        console.log('start perf tracking');
        Perf.start();
        setTimeout(() => {
            console.log('stop perf tracking');
            Perf.stop();
            Perf.printExclusive();
        }, 10000);
   }
...

But something nicer would be to be able to get a flamegraph

EDIT5: Looks like debugging with chrome allow to use the profiler from chrome directly, making this whole issue solved

[jeremyong]

With react-addons-perf and Perf.start/Perf.stop I wasn’t able to measure anything (getLastMeasurements always returns an empty array). What might I be doing wrong?

[jeremyong]

Yep tried that too. I get zero output. When I tried debugging it, it seemed like the Perf module being imported wasn’t instrumenting the same component that react native was using. Also, I verified that the react, react-addons-perf, and react-dom versions matched my RN version. Note that the react-addons-perf module transitively imports the react-dom debug tool.