Mit dem Profiler-Plugin können Sie die Performance Ihrer JS-Funktionen messen und für jeden Aufruf sowohl die Argumente als auch das Ergebnis erfassen.

npm i @openreplay/tracker-profiler

Initialisieren Sie den Tracker und laden Sie das Plugin hinein. Dekorieren Sie anschließend beliebige Funktionen in Ihrem Code mit der generierten Funktion.

import trackerProfiler from '@openreplay/tracker-profiler';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
const profiler = tracker.use(trackerProfiler());

tracker.start();

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

Orientieren Sie sich am folgenden Beispiel, wenn Ihre App SSR verwendet. Stellen Sie sicher, dass tracker.start() aufgerufen wird, sobald die App gestartet ist (in useEffect oder componentDidMount).

import trackerProfiler from '@openreplay/tracker-profiler/cjs';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
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

Haben Sie Probleme bei der Einrichtung dieses Plugins? Verbinden Sie sich mit unserem Slack und holen Sie sich Hilfe von unserer Community.