Table of contents
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>;
}
}