react-native-perf-logger
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

react-native-perf-logger

background

This library created to enable production measurement of your react native application.

  • In the first phase (based on Parashuram's blog: React Native Performance Playbook) - I tried to measure the duration of app's startup time.
  • On the way, allow measurement of memory consumption, battery consumption and other footprints of your application.

Getting started

$ npm install react-native-perf-logger --save

Manual installation

iOS

[ WIP]

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-perf-logger and add PerfLogger.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libPerfLogger.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import statements
import com.reactnativeperflogger.PerfLoggerPackage; 
import com.reactnativeperflogger.RNPerfLogger;

to the imports at the top of the file

  • Add private RNPerfLogger perfLogger
  • Add perfLogger = new RNPerfLogger(); to the first line of onCreate() method:
@Override
public void onCreate() {
  perfLogger = new RNPerfLogger();
  super.onCreate();
  ...
}
  • Add new PerfLoggerPackage(perfLogger) to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-perf-logger'
    project(':react-native-perf-logger').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-perf-logger/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-perf-logger')
    

Usage

  1. Add a prop nativeID to the last view of the first screen of every loading flow of your application.
  render() {
    return (
      <FlatList
        ...
        id={'HOME_SCREEN_LIST'}
        nativeID="myHomeScreen"
      />
    );
  }
  1. Register all such nativeIDs with
// you can register for multiple ids
const ids = ["myHomeScreen"]; 
PerfLogger.registerTTINativeIds(ids);
  1. Register to TTI completed event, and get the JSON includes all the recorded markers:
import PerfLogger from 'react-native-perf-logger';
    PerfLogger.registerTTICompletedListener(async (id: string, time: string) => {
      console.log(`tti_complete time: ${time}`);
      const result = await PerfLogger.getAllMarkers();
      
      // you can use alternatively PerfLogger.getIntervalBounds()
      // to get start and end time of all completed interval measurements 
      
      console.log(result);
    });
  }
  1. Do whatever you want with the result (send to your server, send bi..)
  2. To force the logger stop listening to events and remove all stored data use:
PerfLogger.stopAndClear();

Readme

Keywords

Package Sidebar

Install

npm i react-native-perf-logger

Weekly Downloads

2

Version

2.0.2

License

MIT

Unpacked Size

214 kB

Total Files

96

Last publish

Collaborators

  • bruchim
  • evgenis