@pleak/react-perf-monitor

Performance monitoring for React and React Native apps with Pleak.

Table of contents

• Getting Started
  • Installation
    • React Native
  • Initializing
    • Options
      • Required
        • uri
      • Optional
        • debug
        • publish
        • interval
        • environment
• Usage

Getting started

Installation

# With npm
npm install @pleak/react-perf-monitor

# With yarn
yarn add @pleak/react-perf-monitor

React Native

If you're using this package with a React Native app, you must link native dependencies to your project with react-native-cli.

react-native link

This command will automatically find native dependencies and link them to your project.

Initializing

We recommend you to initialize the lib in a separate file and then import it when you need it.

import { Pleak } from '@pleak/react-perf-monitor';

const pleak = new Pleak({
  uri: 'YOUR_PLEAK_DSN',
});

export default pleak;

Options

Required

uri

Your Pleak DSN, required to publish to Pleak. The structure of your DSN should look like this:

https://{publicKey}@{host}/{appId}

Optional

debug

Defaults to false

If true, informations about events and publishing will be logged in console.

publish

Defaults to true

If true, collected events will be published on Pleak.

interval

Defaults to 5000

Events are not published one by one, they are stored and published in batch at an interval in milliseconds defined by this option.

environment

Defaults to process.env.NODE_ENV

Define tracked environment of your app in Pleak.

Usage

Once you installed and initialized the lib you can use it to monitor your React components like so:

import React, { Component } from 'react';
import pleak from '../pleak'; // Import the Pleak instance you defined earlier

class MyComponent extends Component {
  state = { user: null };

  constructor(props) {
    super(props);

    // Capture your component's performance
    pleak.captureComponentPerfs(this, {
      // Optional. Use the excludes option to avoid collecting events on specific methods
      excludes: ['render'],
    });
  }

  componentDidMount() {
    /* Optional.
    This allows you to attach a context to any event triggered by this method */
    pleak.setContext({
      time: Date.now(),
    });

    this.loadData();
  }

  loadData = async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const user = await res.json();

    /* Optional.
    This allows you to attach a context to all events,
    from the moment when this method is triggered (overwritable) */
    pleak.setGlobalContext({
      user,
    });

    this.setState({
      user,
    });
  };

  render() {
    const { user } = this.state;

    return <div>Hello, {user ? user.name : 'world'}!</div>;
  }
}