Description

A React Native logging utility that enables enhanced, structured logging. It includes built-in support for parsing logs to extract workflow steps and visualize them as interactive flow diagrams, helping developers easily track and analyze app behavior and processes.

Event Reporting Flow

Measurement Script Flow

Output Demonstration

How to send log events

Network requests from native (iOS & Android) and React Native are logged automatically.

RN

import {logAsync, logSync} from 'react-native-flow-diagram';
logSync('App.tsx -> Start (Sync RN Example)');
logAsync('App.tsx -> Network call successful (Async RN Example)');

Android

// import net.alexandroid.flowdiagram.LogTime
LogTime.logSync("MainActivity.onCreate -> Start - (Sync Native Example)")
LogTime.logAsync("MainActivity.makeNetworkRequest -> onResponse - (Async Native Example)")

iOS

FlowDiagramUtil.logSync(message: "AppDelegate.didFinishLaunchingWithOptions (Sync Native Example)")
FlowDiagramUtil.logAsync(message: "AppDelegate.makeNetworkRequest -> Network call successful(Sync Native Example)")

Installation -> Adding to your project

React Native

1. Install npm package

   npm i react-native-flow-diagram

   cd ios

   pod install

Android

1. Add to settings.gradle

   include ':react-native-flow-diagram'
   project(':react-native-flow-diagram').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-flow-diagram/android')

2. Sync Gradle

3. Android -> Application class

   // import net.alexandroid.flowdiagram.LogTime
   
   override fun onCreate() {
       // The true parameter enables detailed logging for app launch measurement
       // Another option is false - it will log only when measurement script 
       // is launched with -extra True (it will use option 5 below)
       LogTime.onApplicationOnCreate(true) // <-- Add this line before "super.onCreate()"
       super.onCreate()
       setupOkHttpClient()
       // Remaining code
   }

4. Setup OkHttpClient with interceptor:

   // import okhttp3.OkHttpClient
   // import com.facebook.react.modules.network.OkHttpClientProvider
   // import com.facebook.react.modules.network.ReactCookieJarContainer
   private fun setupOkHttpClient() {
       val okHttpClient = OkHttpClient.Builder()
           .cookieJar(ReactCookieJarContainer())
           .addInterceptor(LogTime.loggingInterceptor)
           .build()
       
       OkHttpClientProvider.setOkHttpClientFactory {
           okHttpClient
       }
   }

5. MainActivity -> onCreate() (Optional: Support special launch mode)

   class RNMainActivity : ReactActivity() {
       public override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate()
           LogTime.onIntent(intent)
       }
   }

iOS

1. Add to AppDelegate.swift

   import FlowDiagramModule
   
   class AppDelegate: RCTAppDelegate {
       override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
           // The true parameter enables detailed logging for app launch measurement
           // Another option is false - it will log only when measurement script launched with -extra True 
           FlowDiagramUtil.onAppLaunched(true)
           // Remaining code
       }
   }    

Installation -> How to run sample project

    npm install

    cd ios

    pod install

Open xCode/Android Studio and launch.

Launch Measurements

Script configuration

Add to your package.json:

"scripts": {
"flow-setup": "cd node_modules/react-native-flow-diagram/py && python3 -m venv .venv && . .venv/bin/activate && pip install -r requirements.txt",
"flow": "node_modules/react-native-flow-diagram/py/.venv/bin/python node_modules/react-native-flow-diagram/py/src/flow/main.py",
"flow:android": "npm run flow -- --platform android",
"flow:android_extra": "npm run flow -- --platform android --extra True android --package com.flowdiagram --activity com.flowdiagram.MainActivity",
"flow:ios_simulator": "npm run flow -- --platform ios_simulator",
"flow:ios_simulator_extra": "npm run flow -- --platform ios_simulator --extra True",
"flow:ios_device": "npm run flow -- --platform ios_device",
"flow:ios_device_extra": "npm run flow -- --platform ios_device --extra True"
}

Launch the setup script once:

    npm run flow-setup

Launch Measurement Flow

Android

    npm run flow:android

Launch with extras:

    npm run flow:android_extra

iOS Simulator

    npm run flow:ios_simulator

Launch with launch argument:

    npm run flow:ios_simulator_extra

iOS Real Device

    npm run flow:ios_device

Launch with launch argument:

    npm run flow:ios_device_extra

Configuration Options

The measurement script supports several configuration options to customize its behavior. Below are the available options:

  usage: main.py [-h] [--platform {android,ios_device,ios_simulator}] [--output-dir OUTPUT_DIR] 
                 [--bundle_id BUNDLE_ID] [--wait_time WAIT_TIME] [--launch_times LAUNCH_TIMES] [--package PACKAGE]
                 [--activity ACTIVITY] [--extra EXTRA] [--open_csv OPEN_CSV] [--open_png OPEN_PNG]
  
  options:
    -h, --help            show this help message and exit
    --platform {android,ios_device,ios_simulator}
                          Platform to run measurements on. (Default: android)
    --output-dir OUTPUT_DIR
                          Directory to save results. (Default: output)
    --bundle_id BUNDLE_ID
                          iOS Bundle ID. (Default: org.reactjs.native.example.FlowDiagram)
    --wait_time WAIT_TIME
                          Wait time after app launch in seconds. (Default: 10)
    --launch_times LAUNCH_TIMES
                          How many times to launch the app. (Default: 1)
    --package PACKAGE     Android package name. (Default: com.flowdiagram)
    --activity ACTIVITY   Android activity full name. (Default: com.flowdiagram.MainActivity)
    --extra EXTRA         Extra Intent / Bundle Settings (Default: False)
    --open_csv OPEN_CSV   Should open CSV with results (Default: False)
    --open_png OPEN_PNG   Extra Should open PNG with results (Default: False)