Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to see components in the trace #4

Open
demon-sword opened this issue May 31, 2024 · 1 comment
Open

Unable to see components in the trace #4

demon-sword opened this issue May 31, 2024 · 1 comment

Comments

@demon-sword
Copy link

I have created some components in the react native sample app. But I am not being able to find them in profiler.
reproducer -> https://github.com/demon-sword/sampleAppProfiling

This is the App component

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>
  );
}
This is the profile that is generated by the produced by the package 

sampling-profiler-trace-1.cpuprofile.txt

Screenshot 2024-05-31 at 3 07 05 PM 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

Can you please help

@kirillzyusko
Copy link
Member

kirillzyusko commented Jun 25, 2024

The profiler is a sampling profiler, so if your function is executed within a short period of time (like <1ms) there is high chances that this function will not be included in a final report.

Can you add a code that blocks an execution of js thread for certain period of time (let's say 200ms) to your component (inside render) and check again?

const start = new Date().getTime();
while (new Date().getTime() - start < 200) {}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants