Skip to main content

Quick Start

Installation​

  1. Add marco to project.

    sh yarn add @d11/marco

  2. Wrap screen with PerformanceTracker to track the draw time of the screen, and use track to send custom markers.

    // Import the PerformanceTracker component
    import { PerformanceTracker } from '@d11/marco';

    // Configure PerformanceTracker to persist data on the device
    PerformanceTracker.configure({ persistToFile: true });

    const MyScreen = () => {
      // Track specific actions
      useEffect(() => {
        PerformanceTracker.track('Screen_Mounted', Date.now());
      }, []);

      return (
        // Wrap screen with PerformanceTracker to measure draw time
        <PerformanceTracker tagName="Screen_Loaded">
          {/* Screen content goes here */}
          <TouchableOpacity onPress={handleOnPress}>
            <Text>Click Me</Text>
          </TouchableOpacity>
        </PerformanceTracker>
      );
    };

  3. For instrumentation, you can choose maestro or detox, or use any pre-configured instrumentation tool to run the iteration.

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

    // 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',
      },
    };
    Defaults
    • outputPath is ./marco-reports
    • dataDir is ./marco-reports/log.json

  5. Run the following command from the CLI to fetch data from the device.

    sh yarn marco generate --platform android

  6. To visualize the data on a dashboard, run the following command. This will open a dashboard on localhost at the desired port.

    sh yarn marco visualize --platform android

🎉 Yeah! First marker is tracked. Now leverage the marco panel to track the performance of your app.