Skip to main content

Screen Load Time Tracking

Overview​

This guide demonstrates how to track and measure screen load time in your React Native application using Marco. You'll learn how to:

  • Track navigation start time
  • Measure screen load completion
  • Generate and visualize performance reports
  • Automate testing with Maestro

Implementation Steps​

1. Setting Up the Screens​

First, let's create two basic screens - Home and Details - that we'll use to demonstrate screen load tracking:

import { View, Button } from 'react-native';

// Home Screen
const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

// Details Screen
const DetailsScreen = () => {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
};

2. Implementing Performance Tracking​

Now, let's enhance our screens with Marco's performance tracking capabilities:

Home Screen Implementation​

// HomeScreen.tsx
import { PerformanceTracker } from '@d11/marco';

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

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="Go to Details"
        onPress={() => {
          // Track when navigation starts
          PerformanceTracker.track('Navigation_Started', Date.now());
          navigation.navigate('Details');
        }}
      />
    </View>
  );
};

Details Screen Implementation​

// DetailsScreen.tsx
import { PerformanceTracker } from '@d11/marco';

const DetailsScreen = () => {
  return (
    <PerformanceTracker
      tagName="Details_Screen_Loaded"
      onTrackingEnd={(event) => {
        // Access performance metrics
        console.log('Draw Time:', event.nativeEvent.drawTime);
        console.log('Render Time:', event.nativeEvent.renderTime);
      }}
    >
      <View>
        <Text>Details Screen</Text>
      </View>
    </PerformanceTracker>
  );
};

3. Automated Testing with Maestro​

Create a Maestro test file to automate the screen load time measurement:

# test.yaml
appId: com.example.app # Replace with your app's ID

---
- launchApp:
    clearState: true
- repeat:
    times: 2
    commands:
      - tapOn: 'Go to Details'
      - assertVisible: 'Details Screen'

4. Configuration Setup​

Create a marco.config.js file in your project root to configure performance data collection:

// 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 at ./navigation-reports/android/log.json with the following structure:

[
  {
    "tagName": "Navigation_Started",
    "timestamp": 1733301898369
  },
  {
    "tagName": "Details_Screen_Loaded",
    "timestamp": 1733301898878
  }
]

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 (or your configured port) and provides:

  • Timeline view of all tracked events
  • Performance metrics visualization
  • Comparison across multiple test runs
  • Detailed analysis of screen load times

Next Steps​