Adding a custom systrace with React Native

Question

According to the React Native documentation https://reactnative.dev/docs/systrace there is support for Systrace. However when adding a trace to my project I do not see the added event in the recorded trace.

Following the example posted in https://reactnative.dev/docs/systrace:

import React from 'react';
import {
  Button,
  Text,
  View,
  SafeAreaView,
  StyleSheet,
  Systrace,
} from 'react-native';

const App = () => {
  const enableProfiling = () => {
    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
    Systrace.beginEvent('event_label');
    Systrace.counterEvent('event_label', 10);
  };

  const stopProfiling = () => {
    Systrace.endEvent();
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={[styles.header, styles.paragraph]}>
        React Native Systrace API
      </Text>
      <View style={styles.buttonRow}>
        <Button
          title="Capture the non-Timed JS events in EasyProfiler"
          onPress={() => enableProfiling()}
        />
        <Button
          title="Stop capturing"
          onPress={() => stopProfiling()}
          color="#FF0000"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 44,
    padding: 8,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  paragraph: {
    margin: 24,
    fontSize: 25,
    textAlign: 'center',
  },
  buttonRow: {
    flexBasis: 150,
    marginVertical: 16,
    justifyContent: 'space-evenly',
  },
});

export default App;

When recording a trace with Perfetto tool, I do not see any trace named 'event_label' which should have previously recorded (when interacting with the screen buttons that would trigger it with the above logic). Is there anything else required in order to see the traces from React Native side?

Answer 1

If you are running on android device then you have to enable custom tracing with the below commands.

adb shell "setprop debug.atrace.app_number 1"
adb shell "setprop debug.atrace.app_0 <full_app_name_with_package>"