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?