MobX-state-tree plugin

The LogRocket MobX-state-tree plugin allows you to log state changes to a single mobx-state-tree store. This plugin may be used in conjunction with the LogRocket MobX plugin.

Installation

Install the plugin via NPM

npm i logrocket-mobx-state-tree --save

Initialize the plugin after you initialize LogRocket

import LogRocket from 'logrocket';
import logStore from 'logrocket-mobx-state-tree';

import someStore from './store'; // import your mobx-state-tree store

// initialize logrocket
LogRocket.init('your app here');

// attach logrocket to the store to watch for state changes
logStore(LogRocket, someStore);

📘

Note

You may use the plugin multiple times to log changes to multiple stores.

State changes will be reported in LogRocket as if they came from Redux. You can filter over log entries by using the "redux" log filter category. In the action dropdown view you will see the action as reported from mobx-state-tree as well as the previous and next state and a view of the difference between the two.

Sanitizing state

Just like Redux, you can sanitize the actions and state passed to LogRocket. The third parameter to the plugin accepts the same options as our reduxMiddleware plugin.

logStore(LogRocket, someStore, {
  // example of sanitizing a part of the state tree
  stateSanitizer: function (state) {
    return {
      ...state,
      removeThisKey: undefined,
    };
  },

  // example of sanitizing 
  actionSanitizer: function (action) {
    if (action.type === 'ignoreThis') {
      return null;
    }
    return action;
  },
});

📘

Session Filtering

This plugin is implemented by wrapping our Redux middleware. Therefore you can filter over sessions containing mobx-state-tree state changes using the redux action type filter. In the log entry pane in the session view they will appear under the redux label.