Ce plugin vous permet de capturer les mutations MobX et de les inspecter ultérieurement lors de la relecture des enregistrements de sessions. Cela est utile pour comprendre et résoudre les problèmes.

npm i @openreplay/tracker-mobx

Initialisez le paquet @openreplay/tracker comme d’habitude et chargez-y le plugin. Utilisez ensuite la valeur renvoyée pour suivre les observables 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

Vous pouvez personnaliser le comportement du middleware afin d’assainir vos données.

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
})

Où predicate peut être utilisé pour désactiver dynamiquement la capture et sanitize peut être utilisé pour modifier la charge utile avant de l’envoyer au backend. La plupart des actions sont de type update ; consultez la documentation de mobx pour plus de détails sur add et delete (principalement pour les Maps)

Vous rencontrez des difficultés pour configurer ce plugin ? Rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.