Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-performance

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-performance

Measure React Native performance

  • 5.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
82K
increased by6.46%
Maintainers
1
Weekly downloads
 
Created
Source

React Native Performance API

This is an implementation of the Performance API for React Native based on the User Timing Level 3 and Performance Timeline Level 2 drafts.

Note: The timestamps used are high resolution (fractions of milliseconds) and monotonically increasing, meaning that they are independent of system clock adjustments. To convert a performance timestamp to a unix epoch timestamp do like this:

const timestamp = Date.now() - performance.timeOrigin + entry.startTime;

Installation

Yarn: yarn add --dev react-native-performance

NPM: npm install --save-dev react-native-performance

Manual integration

If your project is not set up with autolinking you need to link manually.

iOS

Add the following to your Podfile and run pod install:

pod 'react-native-performance', :path => '../node_modules/react-native-performance/ios'

Usage

See examples/vanilla for a demo of the different features.

Basic measure example

Marking timeline events, measuring the duration between them and fetching these entries works just like on the web:

import performance from 'react-native-performance';

performance.mark('myMark');
performance.measure('myMeasure', 'myMark');
performance.getEntriesByName('myMeasure');
-> [{ name: "myMeasure", entryType: "measure", startTime: 98, duration: 123 }]

Meta data

If you want to add some additional details to your measurements or marks, you may pass a second options object argument with a detail entry per the User Timing Level 3 draft:

import performance from 'react-native-performance';

performance.mark('myMark', {
  detail: {
    screen: 'settings',
    ...
  }
});
performance.measure('myMeasure', {
  start: 'myMark',
  detail: {
    category: 'render',
    ...
  }
});
performance.getEntriesByType('measure');
-> [{ name: "myMeasure", entryType: "measure", startTime: 98, duration: 123, detail: { ... } }]

Subscribing to entries

The PerformanceObserver API enables subscribing to different types of performance entries. The handler is called in batches.

Passing buffered: true would include entries produced before the observe() call which is useful to delay handing of measurements until after performance critical startup processing.

import { PerformanceObserver } from 'react-native-performance';
const measureObserver = new PerformanceObserver((list, observer) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name} took ${entry.duration}ms`);
  });
});
measureObserver.observe({ type: 'measure', buffered: true });

Network resources

Resource logging is disabled by default and currently will only cover fetch/XMLHttpRequest uses.

import performance, {
  setResourceLoggingEnabled,
} from 'react-native-performance';

setResourceLoggingEnabled(true);

await fetch('https://domain.com');
performance.getEntriesByType('resource');
-> [{
  name: "https://domain.com",
  entryType: "resource",
  startTime: 98,
  duration: 123,
  initiatorType: "xmlhttprequest", // fetch is a polyfill on top of XHR in react-native
  fetchStart: 98,
  responseEnd: 221,
  transferSize: 456,
  ...
}]

Custom metrics

If you want to collect custom metrics not based on time, this module provides an extension of the Performance API called .metric() that produces entries with the type metric.

import performance from 'react-native-performance';

performance.metric('myMetric', 123);
performance.getEntriesByType('metric');
-> [{ name: "myMetric", entryType: "metric", startTime: 98, duration: 0, value: 123 }]

Native marks

This library exposes a set of native timeline events and metrics such as native app startup time, script execution time etc under the entryType react-native-mark.

To install the native iOS dependency required, simply run pod install in ios/ directory and rebuild the project. For android it should be enough by just rebuilding.

If you wish to opt out of autolinking of the native dependency, you may create or alter the react-native.config.js file to look something like this:

// react-native.config.js

module.exports = {
  dependencies: {
    'react-native-performance': {
      platforms: {
        android: null,
        ios: null,
      },
    },
  },
};

Note that the native marks are not available immediately upon creation of the JS context, so it's best to set up an observer for the relevant end event before making measurements.

import performance, { PerformanceObserver } from 'react-native-performance';

new PerformanceObserver((list, observer) => {
  if (list.getEntries().find((entry) => entry.name === 'runJsBundleEnd')) {
    performance.measure('nativeLaunch', 'nativeLaunchStart', 'nativeLaunchEnd');
    performance.measure('runJsBundle', 'runJsBundleStart', 'runJsBundleEnd');
  }
}).observe({ type: 'react-native-mark', buffered: true });
Custom marks

ephemeral is an optional parameter to mark/metric functions which if set to NO/false will retain the entries when the React Native bridge is (re)loaded.

iOS
#import <react-native-performance/RNPerformance.h>

[RNPerformance.sharedInstance mark:@"myCustomMark"];
[RNPerformance.sharedInstance mark:@"myCustomMark" detail:@{ @"extra": @"info" }];
[RNPerformance.sharedInstance mark:@"myCustomMark" ephemeral:NO];

[RNPerformance.sharedInstance metric:@"myCustomMetric" value:@(123)];
[RNPerformance.sharedInstance metric:@"myCustomMetric" value:@(123) detail:@{ @"unit": @"ms" }];
[RNPerformance.sharedInstance metric:@"myCustomMetric" value:@(123) ephemeral:NO];
Android
import com.oblador.performance.RNPerformance;

RNPerformance.getInstance().mark("myCustomMark");
RNPerformance.getInstance().mark("myCustomMark", false); // ephermal flag to disable resetOnReload
Bundle bundle = new Bundle();
bundle.putString("extra", "info");
RNPerformance.getInstance().mark("myCustomMark", bundle); // Bundle to pass some detail payload

RNPerformance.getInstance().metric("myCustomMetric", 123);
RNPerformance.getInstance().metric("myCustomMetric", 123, false); // ephermal flag to disable resetOnReload
Bundle bundle = new Bundle();
bundle.putString("unit", "ms");
RNPerformance.getInstance().metric("myCustomMetric", 123, bundle); // Bundle to pass some detail payload
Supported marks
NamePlatformsDescription
nativeLaunchStartBothNative process initialization started
nativeLaunchEndBothNative process initialization ended
downloadStartBothOnly available in development. Development bundle download started
downloadEndBothOnly available in development. Development bundle download ended
runJsBundleStartBothNot available with debugger. Parse and execution of the bundle started.
runJsBundleEndBothNot available with debugger. Parse and execution of the bundle ended
contentAppearedBothInitial component mounted and presented to the user.
bridgeSetupStartBoth
bridgeSetupEndiOS
reactContextThreadStartAndroid
reactContextThreadEndAndroid
vmInitAndroid
createReactContextStartAndroid
processCoreReactPackageStartAndroid
processCoreReactPackageEndAndroid
buildNativeModuleRegistryStartAndroid
buildNativeModuleRegistryEndAndroid
createCatalystInstanceStartAndroid
createCatalystInstanceEndAndroid
preRunJsBundleStartAndroid
createReactContextEndAndroid
preSetupReactContextStartAndroid
preSetupReactContextEndAndroid
setupReactContextStartAndroid
attachMeasuredRootViewsStartAndroid
createUiManagerModuleStartAndroid
createViewManagersStartAndroid
createViewManagersEndAndroid
createUiManagerModuleConstantsStartAndroid
createUiManagerModuleConstantsEndAndroid
createUiManagerModuleEndAndroid
attachMeasuredRootViewsEndAndroid
setupReactContextEndAndroid

License

MIT © Joel Arvidsson 2021 – present

Keywords

FAQs

Package last updated on 08 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc