Tracking Multiple Events

This guide is created to track multiple events and how to visualize the data. For this example, we will extend the app startup example to track multiple events. Checkout the App Startup guide for more context.

Let’s breakdown the Startup Time of the app.

Tracking Multiple Events

We already have one start marker AppLaunchStart (say T1) and one end marker HomeScreen_Loaded (say T). Lets add few more markers

T2: Add Main Application OnCreate Marker


7 collapsed lines
1
    override fun onCreate() {
2
        // App Launch Start
3
        PerformanceTracker.track(
4
            "AppLaunchStart",
5
            System.currentTimeMillis(),
6
            null,
7
            true,
8
            applicationContext
9
        )
10
        super.onCreate()
11

12
        // Application OnCreate code
13

14
        PerformanceTracker.track(
15
            "Application_onCreate",
16
            System.currentTimeMillis(),
17
            null,
18
            true,
19
            applicationContext
20
        )
21
    }

T3: Add Activity OnCreate Marker

Add a marker to track the start of the activity in the onCreate method of MainActivity class. This is the first method that is called when the activity is going to be created.

1
    override fun onCreate(savedInstanceState: Bundle?) {
2
        super.onCreate(savedInstanceState)
3

4
        PerformanceTracker.track(
5
            "ActivityCreated",
6
            System.currentTimeMillis(),
7
            null,
8
            true,
9
            applicationContext
10
        )
11
    }

T4: Add a marker at the mount of HomeScreen

1
import { PerformanceTracker } from '@d11/marco';
2

3
// enable logging to file
4
PerformanceTracker.configure({
5
  persistToFile: true,
6
});
7

8
function HomeScreen(): React.JSX.Element {
9
    const [isLoading, setIsLoading] = useState(true);
10

11
    useEffect(() => {
12
        PerformanceTracker.track("HomeScreen_Mounted", Date.now());
13
    }, []);
14

23 collapsed lines
15
    // Simulating Async operation
16
    useEffect(() => {
17
        setTimeout(() => {
18
            setIsLoading(false);
19
        }, 1000);
20
    }, []);
21

22
    if (isLoading) {
23
        return (
24
                <View style={styles.container}>
25
                    <ActivityIndicator size="large" color="#0000ff" />
26
                </View>
27
        );
28
    }
29
  return (
30
    <SafeAreaView style={styles.outerContainer}>
31
        <PerformanceTracker tagName="HomeScreen_Loaded"  style={styles.outerContainer}>
32
            <View style={styles.container}>
33
                <Text testID="home_screen_text" style={styles.text}>Home Screen</Text>
34
            </View>
35
        </PerformanceTracker>
36
    </SafeAreaView>
37
  );
38
}
39

40
const styles = StyleSheet.create({
18 collapsed lines
41
  container: {
42
    justifyContent: 'center',
43
    alignItems: 'center',
44
    backgroundColor: '#f0f0f0',
45
    borderWidth: 1,
46
    borderColor: 'black',
47
    borderRadius: 10,
48
    padding: 10,
49
  },
50
  text: {
51
    fontSize: 24,
52
    fontWeight: 'bold',
53
  },
54
  outerContainer: {
55
    flex: 1,
56
    justifyContent: 'center',
57
    alignItems: 'center',
58
  },
59
});

T5: Add a marker on display of LoadingState

1
import { PerformanceTracker } from '@d11/marco';
2

3
// enable logging to file
3 collapsed lines
4
PerformanceTracker.configure({
5
  persistToFile: true,
6
});
7

8
function HomeScreen(): React.JSX.Element {
12 collapsed lines
9
    const [isLoading, setIsLoading] = useState(true);
10

11
    useEffect(() => {
12
        PerformanceTracker.track("HomeScreen_Mounted", Date.now());
13
    }, []);
14

15
    // Simulating Async operation
16
    useEffect(() => {
17
        setTimeout(() => {
18
            setIsLoading(false);
19
        }, 1000);
20
    }, []);
21

22
    if (isLoading) {
23
        return (
24
            <PerformanceTracker tagName="LoadingState">
25
                <View style={styles.container}>
26
                    <ActivityIndicator size="large" color="#0000ff" />
27
                </View>
28
            </PerformanceTracker>
29
        );
30
    }
31
  return (
7 collapsed lines
32
    <SafeAreaView style={styles.outerContainer}>
33
        <PerformanceTracker tagName="HomeScreen_Loaded"  style={styles.outerContainer}>
34
            <View style={styles.container}>
35
                <Text testID="home_screen_text" style={styles.text}>Home Screen</Text>
36
            </View>
37
        </PerformanceTracker>
38
    </SafeAreaView>
39
  );
40
}
41

42
const styles = StyleSheet.create({
18 collapsed lines
43
  container: {
44
    justifyContent: 'center',
45
    alignItems: 'center',
46
    backgroundColor: '#f0f0f0',
47
    borderWidth: 1,
48
    borderColor: 'black',
49
    borderRadius: 10,
50
    padding: 10,
51
  },
52
  text: {
53
    fontSize: 24,
54
    fontWeight: 'bold',
55
  },
56
  outerContainer: {
57
    flex: 1,
58
    justifyContent: 'center',
59
    alignItems: 'center',
60
  },
61
});

Instrumentation

Again perform the same steps as in App Startup guide to run the iteration.

Generate Data

Use the same marco config file as in App Startup guide.

Run generate command to generate the data.

1
yarn marco generate --platform android

Visualize Data

Run visualize command to visualize the data.

1
yarn marco visualize --platform android

Below I had attached the screenshot of the dashboard .
- At left side, we can see all the markers with there occurrence.
- Bar chart shows that between which 2 events most of the time is spent.
- Correctness of the data is predicted using mean, standard deviation, error rate.
- And at last we can see the difference between any 2 events iteration wise.

Multiple Events Iteration

Multiple Events Metrics

Multiple Events Raw

👉 Code reference: Example