App Startup

This guide demonstrates how to leverage Marco to track app startup performance. By adding markers at key points during the app’s lifecycle, one can gain insights into how long various parts of the startup process take. Additionally, we can fetch data using Marco’s generate command, and visualize the results for better analysis.

Tracking App Startup Performance

Step 1: Add Start Marker

For App Startup, we will add a start marker at the beginning of the app’s lifecycle.

• For Android, add a marker to track the start of the app in the onCreate method of MainApplication class. This is the first method that is called when the app is launched.

• For iOS, add a marker to track the start of the app in the application method of AppDelegate.m.

  • MainApplication.kt
  • AppDelegate.m

  1
  import com.performancetracker.PerformanceTracker;
  2
  
  3
  override fun onCreate() {
  4
      super.onCreate()
  5
  
  6
      PerformanceTracker.track(
  7
          "AppLaunchStart",
  8
          System.currentTimeMillis(),
  9
          null,
  10
          true, // writeLogInFile is true to save the data to a file
  11
          applicationContext // applicationContext is the context of the app to write the data to a file
  12
           )
  13
      // other code
  14
  }

Step 2: Add End Marker

Firstly let’s add a sample screen to track the end marker. Here we will simulate a real world scenarios using setTimeout to delay the screen loading(Assuming this is a network call or some heavy operation).

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
    // Simulating Async operation
5 collapsed lines
11
    useEffect(() => {
12
        setTimeout(() => {
13
            setIsLoading(false);
14
        }, 1000);
15
    }, []);
16

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

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

• For end marker, add a marker when the screen is fully drawn. This gives a sense of how long it takes for the app to be ready to interact with the user. For this just wrap the screen or any component with PerformanceTracker and provide a tag name.

This will track the time it took to draw the PerformanceTracker component entirely.

Step 3: Instrumentation

Use any instrumentation tool to run the iteration. For example: maestro. After running the iteration, it will save the data in device itself.

Step 4: Create a marco.config.js

Create a marco.config.js file at the root of project with the following content.

1
module.exports = {
2
  android: {
3
    packageName: 'com.example.app',
4
    outputPath: './app-startup-reports/android',
5
    dataDir: './app-startup-reports/android/log.json',
6
    port: '8080',
7
  },
8
  ios: {
9
    packageName: 'com.example.app',
10
    outputPath: './app-startup-reports/ios',
11
    dataDir: './app-startup-reports/ios/log.json',
12
    port: '8080',
13
  },
14
};

Step 5: Generate Data

Use generate command to generate the data.

1
yarn marco generate --platform android

• It will save the data in specified path (./app-startup-reports/android/log.json).

Here is the sample report generated:

1
[
2
    {
3
        "tagName": "AppLaunchStart",
4
        "timestamp": "1738089908375"
5
    },
6
    {
7
        "tagName": "HomeScreen_Loaded",
8
        "timestamp": "1738089908973"
9
    },
56 collapsed lines
10
    {
11
        "tagName": "AppLaunchStart",
12
        "timestamp": "1738089914779"
13
    },
14
    {
15
        "tagName": "HomeScreen_Loaded",
16
        "timestamp": "1738089915349"
17
    },
18
    {
19
        "tagName": "AppLaunchStart",
20
        "timestamp": "1738089918248"
21
    },
22
    {
23
        "tagName": "HomeScreen_Loaded",
24
        "timestamp": "1738089918816"
25
    },
26
    {
27
        "tagName": "AppLaunchStart",
28
        "timestamp": "1738089921612"
29
    },
30
    {
31
        "tagName": "HomeScreen_Loaded",
32
        "timestamp": "1738089922182"
33
    },
34
    {
35
        "tagName": "AppLaunchStart",
36
        "timestamp": "1738089926458"
37
    },
38
    {
39
        "tagName": "HomeScreen_Loaded",
40
        "timestamp": "1738089927022"
41
    },
42
    {
43
        "tagName": "AppLaunchStart",
44
        "timestamp": "1738089944241"
45
    },
46
    {
47
        "tagName": "HomeScreen_Loaded",
48
        "timestamp": "1738089944833"
49
    },
50
    {
51
        "tagName": "AppLaunchStart",
52
        "timestamp": "1738089949008"
53
    },
54
    {
55
        "tagName": "HomeScreen_Loaded",
56
        "timestamp": "1738089949583"
57
    },
58
    {
59
        "tagName": "AppLaunchStart",
60
        "timestamp": "1738089954020"
61
    },
62
    {
63
        "tagName": "HomeScreen_Loaded",
64
        "timestamp": "1738089954616"
65
    }
66
]

Step 6: Visualize Data

Use visualize command to visualize the data.

1
yarn marco visualize --platform android

• It will open the dashboard in the browser.
• Below I had attached the screenshot of the dashboard.
  • At left side, it will show all the markers with there occurrence.
  • Iteration wise data is shown in bar chart.
  • Raw data are processed and shown in timeline.
  • Also have access to other metrics like mean, standard deviation, error rate to predict the correctness of the data.

👉 Code reference: Example