Profiler

The profiler plugin allows you to measure your JS functions performance and capture both arguments and result for each call.

Installation

npm i @openreplay/tracker-profiler

Usage

Initialize the tracker and load the plugin into it. Then decorate any function inside your code with the generated function.

If your website is a Single Page Application (SPA)

import OpenReplay from '@openreplay/tracker';
import trackerProfiler from '@openreplay/tracker-profiler';

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
const profiler = tracker.use(trackerProfiler());

tracker.start();

// ...
const fn = profiler('MyFunction')(() => {
  // Inspecting function body
}, thisArg); // thisArg is optional

If your web app is Server-Side-Rendered (SSR)

Follow the below example if your app is SSR. Ensure tracker.start() is called once the app is started (in useEffect or componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
import trackerProfiler from '@openreplay/tracker-profiler/cjs';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
const profiler = tracker.use(trackerProfiler());

//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, [])
}
//...
const fn = profiler('MyFunction')(() => {
  // Inspecting function body
}, thisArg); // thisArg is optional

Have questions?

Having trouble setting up this plugin? Please connect to our Slack or check out our Forum and get help from our community.