mobx-log

Logger + Redux devtools for Mobx 6+. Works only in dev mode.

Installation

npm i mobx-log

Usage with Redux Devtools

1. Make sure Redux Devtools are installed
2. Add makeLoggable to each store you'd like to debug:

1import { makeLoggable } from 'mobx-log'
2
3class SomeStore {
4  ...
5
6  constructor() {
7    makeAutoObservable(this)
8+   makeLoggable(this)
9  }
10}

Usage with browser logger

1. Add makeLoggable to a store:

1class SomeStore {
2  ...
3
4  constructor() {
5    makeAutoObservable(this)
6+   makeLoggable(this)
7  }
8}

2. In Chrome DevTools, press F1 to load the Settings. Scroll down to the Console section and check "Enable custom formatters":

You'll only need to do it once.

3. If you have Redux devtools installed then you need to deactivate it. The mobx-log package tries to detect automatically what you'd like to use - browser console or Redux devtools. Installed Redux devtools take precedence over browser console.

Use only browser formatters

mobx-log uses custom Chrome formatters, so you won't see awkward [Proxy, Proxy] in your console anymore. All your console.log(store) calls will be nicely formatted. If it is the only feature you need from this package, you can use just formatters:

1import { applyFormatters } from 'mobx-log';
2
3applyFormatters();

Make sure this function is called at the very top of your code

Customize

Access stores as global variables in browser console.

By default, all the stores marked as loggable become accessible as global variables. Example:

1class AuthStore {
2  constructor() {
3    makeLoggable(this);
4  }
5}

Then you can type store.authStore in your browser console. Feel free to log store, call actions and computeds in the console. Works only in dev mode.

If you'd like to disable this feature use this:

1import { configureLogger } from 'mobx-log';
2
3configureLogger({
4  storeConsoleAccess: false,
5});

Make sure this function is called at the very top of your code

Log observables / computeds / actions conditionally

An example how to log only actions and computeds:

1import { configureLogger } from 'mobx-log';
2
3configureLogger({
4  filters: {
5    computeds: true,
6    actions: true,
7    observables: false,
8  },
9});

Log observables / computeds / actions of a specific store.

An example how to log only changes in computeds of a store Counter.

1import { makeLoggable } from 'mobx-log';
2
3class Counter {
4  value = 0;
5
6  constructor() {
7    makeAutoObservable(this);
8    makeLoggable(this, {
9      filters: {
10        events: {
11          computeds: true,
12          observables: false,
13          actions: false,
14        },
15      },
16    });
17  }
18}

Customize logger output

Example - add time for each log entry:

1import { configureLogger, DefaultLogger, LogWriter } from 'mobx-log';
2
3export const now = () => {
4  const time = new Date();
5  const h = time.getHours().toString().padStart(2, '0');
6  const m = time.getMinutes().toString().padStart(2, '0');
7  const s = time.getSeconds().toString().padStart(2, '0');
8  const ms = time.getMilliseconds().toString().padStart(3, '0');
9
10  return `${h}:${m}:${s}.${ms}`;
11};
12
13class MyLogWriter implements LogWriter {
14  write(...messages: unknown[]) {
15    console.log(now(), ...messages);
16  }
17}
18
19configureLogger({
20  logger: new DefaultLogger(new MyLogWriter()),
21});

Usage with factory functions

With Mobx 6 you can create stores without classes using makeAutoObservable / makeObservable:

1export const createDoubler = () => {
2  return makeAutoObservable({
3    value: 0,
4    get double() {
5      return this.value * 2;
6    },
7    increment() {
8      this.value++;
9    },
10  });
11};

You can also log such stores using makeLoggable:

1export const createDoubler = () => {
2  return makeLoggable(
3    makeAutoObservable({
4      loggableName: 'doubler', // <-- Required
5      value: 0,
6      get double() {
7        return this.value * 2;
8      },
9      increment() {
10        this.value++;
11      },
12    })
13  );
14};

The store also become available in console if you turn on storeConsoleAccess option.

Usage with useLocalObservable

Before:

1import { useLocalObservable } from 'mobx-react-lite'
2
3...
4
5const App = observer(() => {
6  const counterStore = useLocalObservable(() => {
7    count: 0,
8    increment: () => this.count++,
9  })
10
11  return ...
12})

After:

1import { useMakeLoggable } from 'mobx-log'
2
3...
4
5const App = observer(() => {
6  const counterStore = useLocalObservable(() => {
7    count: 0,
8    increment: () => this.count++,
9  })
10  useMakeLoggable(counterStore, 'counter')
11
12  return ...
13})

The store also become available in console if you turn on storeConsoleAccess option.

How it is different from alternatives?

• mobx-logger doesn't show observables and computeds with Mobx 6 due to changes in Mobx internals.
• mobx-remotedev is not maintained anymore. It also doesn't show computeds.
• mobx-devtools does not show changes in computeds
• mobx-react-devtools is deprecated
• mobx-formatters doesn't support Map & Set. Also it's just a proxy formatter, not a logger

Example project

This library has example project located in ./example folder. It is used for development purposes. To run it go to ./example folder and run npm run start.

Store destructuring

Prior to Mobx 6.3.4 bound actions didn't appear in the log. If you are using store destructuring and want your actions appear in the log please update your Mobx to 6.3.4. See the discussion for details: https://github.com/mobxjs/mobx/discussions/3140