MobX

This plugin allows you to capture MobX mutations and inspect them later on while replaying session recordings. This is useful for understanding and fixing issues.

Installation

npm i @openreplay/tracker-mobx

Usage

Initialize the @openreplay/tracker package as usual and load the plugin into it. Then use returned value to track MobX obervables.

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

Options

You can customize the middleware behavior to sanitize your data.

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

Where predicate can be used to dynamically turn off capturing and sanitize can be used to modify the payload before sending it to backend. Most of the actions fall into update type, refer to mobx documentation for more details about add and delete (mostly for Maps)

Have questions?

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