The LogRocket MobX plugin allows you to logs changes to a single MobX observable.

Installation

Install the LogRocket MobX plugin from NPM:
Be sure you have installed the peer dependencies (mobx@5 and logrocket)

Typescript definition files are included in the package.

npm i --save logrocket-mobx

🚧
Using MobX v3?
If you are using MobX v3 use the logrocket-mobx@0.1.5 version. We do not support MobX v4.

Usage

Setup

import createPlugin from 'logrocket-mobx';
import { observable } from 'mobx';


// hook up the plugin to LogRocket
const lr = createPlugin(LogRocket);

// lr object contains 4 functions
lr.watchValue(target, options) // target is a boxed value
lr.watchArray(target, options)
lr.watchObject(target, options)
lr.watchObject(target, property, options) // watch a specific property
lr.watchMap(target, options)
lr.watchMap(target, key, options) // watch a specific key
// target must be a MobX observable

// options object has two optional properties:
// name: String  (optional string to identify the observable in LogRocket)
// sanitizer: change => change (optional sanitizer function which receives and returns the change object

The plugin is implemented by calling MobX's observe function on the target observable and logging to logrocket the changes. The logs will appear in the sessions recording's log pane but not your local console tab. You can provide an optional identifier string and a sanitizer function if you wish.

🚧
Session Filtering
There currently is no way to filter over sessions containing a given MobX observable change. They will appear as log entries in your session.