Skip to content
Marco Logo Marco Logo Marco

App Startup Performance Tracking

Overview

This guide shows you how to track and optimize your app’s startup performance using Marco. You’ll learn how to:

  • Track app launch start time
  • Measure initial screen load time
  • Generate performance reports
  • Visualize startup metrics

Implementation Guide

1. Tracking App Launch Start

Add a marker at the beginning of your app’s lifecycle to track when the app starts launching.

import com.performancetracker.PerformanceTracker;


override fun onCreate() {
    super.onCreate()


    // Track app launch start time
    PerformanceTracker.track(
        "AppLaunchStart",
        System.currentTimeMillis(),
        null,
        true, // Enable file logging
        applicationContext
    )
    // Continue with other initialization
}

2. Tracking Initial Screen Load

Let’s create a sample home screen that demonstrates tracking the initial screen load time:

import { PerformanceTracker } from '@d11/marco';
import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';


// Configure Marco to persist performance data
PerformanceTracker.configure({
  persistToFile: true,
});


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


  // Simulate initial data loading
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }, []);


  if (isLoading) {
    return (
      <PerformanceTracker tagName="LoadingState" style={styles.outerContainer}>
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      </PerformanceTracker>
    );
  }


  return (
    <SafeAreaView style={styles.outerContainer}>
      <PerformanceTracker
        tagName="HomeScreen_Loaded"
        style={styles.outerContainer}
      >
        <View style={styles.container}>
          <Text testID="home_screen_text" style={styles.text}>
            Home Screen
          </Text>
        </View>
      </PerformanceTracker>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    borderWidth: 1,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  outerContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

3. Running Performance Tests

Use an instrumentation tool like Maestro to run automated tests and collect performance data.

4. Configuration

Create a marco.config.js file in your project root:

marco.config.js
module.exports = {
  android: {
    packageName: 'com.example.app',
    outputPath: './marco-reports/android',
    dataDir: [
      {
        path: './marco-reports/android/log.json',
        reportName: 'AndroidReport1',
      },
    ],
    port: '8080',
  },
  ios: {
    packageName: 'com.example.app',
    outputPath: './marco-reports/ios',
    dataDir: [
      {
        path: './marco-reports/ios/log.json',
        reportName: 'iosReport1',
      },
    ],
    port: '8080',
  },
};

5. Generating Performance Reports

Run the following command to collect performance data:

yarn marco generate --platform android

This will generate a JSON report with the following structure:

[
  {
    "tagName": "AppLaunchStart",
    "timestamp": "1738089908375"
  },
  {
    "tagName": "HomeScreen_Loaded",
    "timestamp": "1738089908973"
  }
]

6. Visualizing Performance Data

To view your performance data in an interactive dashboard:

yarn marco visualize --platform android

The dashboard will be available at http://localhost:8080 and provides:

  • Timeline view of app startup events
  • Performance metrics visualization
  • Comparison across multiple test runs
  • Detailed analysis of startup times

Next Steps