Quick Start

Installation

1. Add marco to project.

   • yarn
   • npm

   1
   yarn add @d11/marco

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

   1
     // Import the PerformanceTracker component
   2
     import { PerformanceTracker } from '@d11/marco';
   3
   
   4
     // Configure PerformanceTracker to persist data on the device
   5
     PerformanceTracker.configure({ persistToFile: true });
   6
   
   7
     const MyScreen = () => {
   8
       // Track specific actions
   9
       useEffect(() => {
   10
         PerformanceTracker.track('Screen_Mounted', Date.now());
   11
       }, [])
   12
   
   13
       return (
   14
         // Wrap screen with PerformanceTracker to measure draw time
   15
         <PerformanceTracker tagName="Screen_Loaded">
   16
           {/* Screen content goes here */}
   17
           <button onClick={handleOnPress}>Click Me</button>
   18
         </PerformanceTracker>
   19
       );
   20
     };

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.

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

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

   • yarn
   • npm

   1
   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.

   • yarn
   • npm

   1
   yarn marco visualize --platform android

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