Unable to get JS function names in HermesSamplingProfiler

[demon-sword]

I have been trying to use HermesSamplingProfiler for the release builds in order to get function execution flamechart. But for some reason , some of the JS function names are missing in the trace.

Repro - https://github.com/demon-sword/sampleAppProfiling

This is a sample App which is using react-native-release-profiler(https://github.com/margelo/react-native-release-profiler) which internally uses HermesSamplingProfiler to generate the trace.

startProfiling()
function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <Component1 />
      <Button title={'StopProfiling'} onPress={() => {
        stopProfiling(true)
      }}/>
    </SafeAreaView>
  );
}

sampling-profiler-trace-1.cpuprofile.txt As you can see in the image that there is only App component is available in the trace. Nothing About Component1 in the trace and there are some empty blocks in the trace as well. The things I have tried -:

1. Class components
2. Functional Components
3. Exporting components by default
4. Adding displayNames to components
5. Tried with Arrow function components as well
6. Disabling minification of js bundle.
7. Tried on nightly as well

React Native version: 0.74.1 OS: Android

Steps To Reproduce

1. Create a release build with the given repo.
2. Run the build and click on stopprofiling button on the screen.
3. A trace will be saved in the downloads folder.
4. open the trace in speedscope.com

[tmikov]

We aren't ignoring this issue, we are just slammed with other things. We will get to it, I promise...

[neildhar]

Hey @demon-sword, thanks for reporting this. It looks like JS functions are showing up in your trace. The blank frames likely represent unnamed JS functions.

It looks like the trace you uploaded has very little activity though. Of the 297 samples captured by the profiler, only 2 have anything actually running on the stack. There just isn't enough running for the profiler to pick it up. If you increase the amount of activity in the application, you should get a more complete trace.

[demon-sword]

Hey @neildhar, thanks for getting back to me.

As I mentioned in the code, there aren't any unnamed JS functions in my code. Therefore, ideally, there shouldn't be any blank frames. If React Native is invoking some unnamed functions internally, that's a different matter.

The trace I've shared was recorded from the app start to the mounting of the App Component. Thus, it should include details of all the components mounted within the App Component, such as Component1 in my case. You can view it here:https://github.com/demon-sword/sampleAppProfiling/blob/main/App.tsx