Skip to content

Commit cf9e68c

Browse files
AbbondanzoAbbondanzo
committed
Fix the Systrace profiling example
1 parent adc125c commit cf9e68c

12 files changed

Lines changed: 36 additions & 180 deletions

File tree

‎docs/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1414
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1515
1616
const App = () => {
17-
const enableProfiling = () => {
18-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
17+
const markEvent = () => {
1918
Systrace.beginEvent('event_label');
2019
Systrace.counterEvent('event_label', 10);
21-
};
22-
23-
const stopProfiling = () => {
2420
Systrace.endEvent();
2521
};
2622
@@ -31,15 +27,7 @@ const App = () => {
3127
React Native Systrace API
3228
</Text>
3329
<View style={styles.buttonsColumn}>
34-
<Button
35-
title="Capture the non-Timed JS events in EasyProfiler"
36-
onPress={() => enableProfiling()}
37-
/>
38-
<Button
39-
title="Stop capturing"
40-
onPress={() => stopProfiling()}
41-
color="#FF0000"
42-
/>
30+
<Button title="Mark event" onPress={markEvent} />
4331
</View>
4432
</SafeAreaView>
4533
</SafeAreaProvider>

‎website/versioned_docs/version-0.77/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,17 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import React from 'react';
1414
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1515
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1616
1717
const App = () => {
18-
const enableProfiling = () => {
19-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
18+
const markEvent = () => {
2019
Systrace.beginEvent('event_label');
2120
Systrace.counterEvent('event_label', 10);
22-
};
23-
24-
const stopProfiling = () => {
2521
Systrace.endEvent();
2622
};
2723
@@ -32,15 +28,7 @@ const App = () => {
3228
React Native Systrace API
3329
</Text>
3430
<View style={styles.buttonsColumn}>
35-
<Button
36-
title="Capture the non-Timed JS events in EasyProfiler"
37-
onPress={() => enableProfiling()}
38-
/>
39-
<Button
40-
title="Stop capturing"
41-
onPress={() => stopProfiling()}
42-
color="#FF0000"
43-
/>
31+
<Button title="Mark event" onPress={markEvent} />
4432
</View>
4533
</SafeAreaView>
4634
</SafeAreaProvider>

‎website/versioned_docs/version-0.78/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,17 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import React from 'react';
1414
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1515
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1616
1717
const App = () => {
18-
const enableProfiling = () => {
19-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
18+
const markEvent = () => {
2019
Systrace.beginEvent('event_label');
2120
Systrace.counterEvent('event_label', 10);
22-
};
23-
24-
const stopProfiling = () => {
2521
Systrace.endEvent();
2622
};
2723
@@ -32,15 +28,7 @@ const App = () => {
3228
React Native Systrace API
3329
</Text>
3430
<View style={styles.buttonsColumn}>
35-
<Button
36-
title="Capture the non-Timed JS events in EasyProfiler"
37-
onPress={() => enableProfiling()}
38-
/>
39-
<Button
40-
title="Stop capturing"
41-
onPress={() => stopProfiling()}
42-
color="#FF0000"
43-
/>
31+
<Button title="Mark event" onPress={markEvent} />
4432
</View>
4533
</SafeAreaView>
4634
</SafeAreaProvider>

‎website/versioned_docs/version-0.79/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,17 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import React from 'react';
1414
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1515
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1616
1717
const App = () => {
18-
const enableProfiling = () => {
19-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
18+
const markEvent = () => {
2019
Systrace.beginEvent('event_label');
2120
Systrace.counterEvent('event_label', 10);
22-
};
23-
24-
const stopProfiling = () => {
2521
Systrace.endEvent();
2622
};
2723
@@ -32,15 +28,7 @@ const App = () => {
3228
React Native Systrace API
3329
</Text>
3430
<View style={styles.buttonsColumn}>
35-
<Button
36-
title="Capture the non-Timed JS events in EasyProfiler"
37-
onPress={() => enableProfiling()}
38-
/>
39-
<Button
40-
title="Stop capturing"
41-
onPress={() => stopProfiling()}
42-
color="#FF0000"
43-
/>
31+
<Button title="Mark event" onPress={markEvent} />
4432
</View>
4533
</SafeAreaView>
4634
</SafeAreaProvider>

‎website/versioned_docs/version-0.80/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1414
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1515
1616
const App = () => {
17-
const enableProfiling = () => {
18-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
17+
const markEvent = () => {
1918
Systrace.beginEvent('event_label');
2019
Systrace.counterEvent('event_label', 10);
21-
};
22-
23-
const stopProfiling = () => {
2420
Systrace.endEvent();
2521
};
2622
@@ -31,15 +27,7 @@ const App = () => {
3127
React Native Systrace API
3228
</Text>
3329
<View style={styles.buttonsColumn}>
34-
<Button
35-
title="Capture the non-Timed JS events in EasyProfiler"
36-
onPress={() => enableProfiling()}
37-
/>
38-
<Button
39-
title="Stop capturing"
40-
onPress={() => stopProfiling()}
41-
color="#FF0000"
42-
/>
30+
<Button title="Mark event" onPress={markEvent} />
4331
</View>
4432
</SafeAreaView>
4533
</SafeAreaProvider>

‎website/versioned_docs/version-0.81/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1414
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1515
1616
const App = () => {
17-
const enableProfiling = () => {
18-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
17+
const markEvent = () => {
1918
Systrace.beginEvent('event_label');
2019
Systrace.counterEvent('event_label', 10);
21-
};
22-
23-
const stopProfiling = () => {
2420
Systrace.endEvent();
2521
};
2622
@@ -31,15 +27,7 @@ const App = () => {
3127
React Native Systrace API
3228
</Text>
3329
<View style={styles.buttonsColumn}>
34-
<Button
35-
title="Capture the non-Timed JS events in EasyProfiler"
36-
onPress={() => enableProfiling()}
37-
/>
38-
<Button
39-
title="Stop capturing"
40-
onPress={() => stopProfiling()}
41-
color="#FF0000"
42-
/>
30+
<Button title="Mark event" onPress={markEvent} />
4331
</View>
4432
</SafeAreaView>
4533
</SafeAreaProvider>

‎website/versioned_docs/version-0.82/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1414
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1515
1616
const App = () => {
17-
const enableProfiling = () => {
18-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
17+
const markEvent = () => {
1918
Systrace.beginEvent('event_label');
2019
Systrace.counterEvent('event_label', 10);
21-
};
22-
23-
const stopProfiling = () => {
2420
Systrace.endEvent();
2521
};
2622
@@ -31,15 +27,7 @@ const App = () => {
3127
React Native Systrace API
3228
</Text>
3329
<View style={styles.buttonsColumn}>
34-
<Button
35-
title="Capture the non-Timed JS events in EasyProfiler"
36-
onPress={() => enableProfiling()}
37-
/>
38-
<Button
39-
title="Stop capturing"
40-
onPress={() => stopProfiling()}
41-
color="#FF0000"
42-
/>
30+
<Button title="Mark event" onPress={markEvent} />
4331
</View>
4432
</SafeAreaView>
4533
</SafeAreaProvider>

‎website/versioned_docs/version-0.83/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1414
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1515
1616
const App = () => {
17-
const enableProfiling = () => {
18-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
17+
const markEvent = () => {
1918
Systrace.beginEvent('event_label');
2019
Systrace.counterEvent('event_label', 10);
21-
};
22-
23-
const stopProfiling = () => {
2420
Systrace.endEvent();
2521
};
2622
@@ -31,15 +27,7 @@ const App = () => {
3127
React Native Systrace API
3228
</Text>
3329
<View style={styles.buttonsColumn}>
34-
<Button
35-
title="Capture the non-Timed JS events in EasyProfiler"
36-
onPress={() => enableProfiling()}
37-
/>
38-
<Button
39-
title="Stop capturing"
40-
onPress={() => stopProfiling()}
41-
color="#FF0000"
42-
/>
30+
<Button title="Mark event" onPress={markEvent} />
4331
</View>
4432
</SafeAreaView>
4533
</SafeAreaProvider>

‎website/versioned_docs/version-0.84/systrace.md‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,16 @@ title: Systrace
77

88
## Example
99

10-
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
10+
`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Start profiling with an Android profiling tool such as Perfetto or EasyProfiler, then use these markers to identify the events in the captured trace.
1111

1212
```SnackPlayer name=Systrace%20Example
1313
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
1414
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
1515
1616
const App = () => {
17-
const enableProfiling = () => {
18-
Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
17+
const markEvent = () => {
1918
Systrace.beginEvent('event_label');
2019
Systrace.counterEvent('event_label', 10);
21-
};
22-
23-
const stopProfiling = () => {
2420
Systrace.endEvent();
2521
};
2622
@@ -31,15 +27,7 @@ const App = () => {
3127
React Native Systrace API
3228
</Text>
3329
<View style={styles.buttonsColumn}>
34-
<Button
35-
title="Capture the non-Timed JS events in EasyProfiler"
36-
onPress={() => enableProfiling()}
37-
/>
38-
<Button
39-
title="Stop capturing"
40-
onPress={() => stopProfiling()}
41-
color="#FF0000"
42-
/>
30+
<Button title="Mark event" onPress={markEvent} />
4331
</View>
4432
</SafeAreaView>
4533
</SafeAreaProvider>

0 commit comments

Comments
 (0)