이 플러그인을 사용하면 MobX 뮤테이션을 캡처하여 세션 녹화를 재생하면서 나중에 확인할 수 있습니다. 문제를 파악하고 해결하는 데 유용합니다.

npm i @openreplay/tracker-mobx

@openreplay/tracker 패키지를 평소처럼 초기화하고 플러그인을 로드합니다. 그런 다음 반환된 값을 사용해 MobX 옵저버블을 추적합니다.

import { observable, observe } from 'mobx';
import Tracker from '@openreplay/tracker';
import trackerMobX from '@openreplay/tracker-mobx';

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
});

// this instance can be exported and used for multiple stores
const mobxObserver = tracker.use(trackerMobX({ ...options }));

const myArray = observable(['foo', 'bar', 42]);

observe(myArray, mobxObserver)

myArray.push("Hello world"); // This mutation will be tracked

미들웨어 동작을 커스터마이징하여 데이터를 정제할 수 있습니다.

interface Options {
    predicate?: (observeEvent: { type: string; name: string; object: any; debugObjectName: string }) => boolean;
    sanitize?: (resultAction: { state: any; type: string; property: string }) => { state: any; type: string; property: string };
    update?: boolean;
    add?: boolean;
    delete?: boolean;
}

trackerMobX({
  predicate: () => true,
  sanitize: (event) => event
})

predicate는 캡처를 동적으로 끌 때 사용하고, sanitize는 백엔드로 전송하기 전에 페이로드를 수정할 때 사용합니다. 대부분의 액션은 update 유형에 해당하며, add와 delete(주로 Map용)에 대한 자세한 내용은 mobx 문서를 참고하세요.

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