Profiler 플러그인을 사용하면 JS 함수의 성능을 측정하고, 각 호출의 인자와 결과를 모두 캡처할 수 있습니다.

npm i @openreplay/tracker-profiler

트래커를 초기화하고 플러그인을 로드합니다. 그런 다음 코드 안의 원하는 함수를 생성된 함수로 감싸 데코레이트합니다.

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

앱이 SSR인 경우 아래 예시를 따르세요. 앱이 시작된 후(useEffect 또는 componentDidMount 안에서) tracker.start()가 한 번 호출되도록 하세요.

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

이 플러그인 설정에 문제가 있나요? Slack에 접속하여 커뮤니티의 도움을 받으세요.