Effector Logger

Pretty logger for stores, events, effects and domains.

Installation

npm install effector
npm install --dev effector-logger

or yarn

yarn add effector
yarn add -D effector-logger

Note: effector-logger requires effector to be installed

Usage

Add babel plugin to your babel.config.js or .babelrc file

babel-plugin included to effector package

{
  "plugins": [["effector/babel-plugin", { "addLoc": true }]]
}

Create React App and macros support

Just use effector-logger/macro:

import { createStore, createEvent } from 'effector-logger/macro';

Debug some modules

1. Open a module (js/ts/esm file) you need to debug

Replace import from "effector" to "effector-logger"

For example:

- import { Event, Store, createEvent, forward } from "effector"
+ import { Event, Store, createEvent, forward } from "effector-logger"

2. Open DevTools Console, use "Filter" to show only required logs

Debug domain with settings

1. Open a module with domain
2. import { attachLogger } from 'effector-logger/attach'
3. Attach logger to your domain

Example:

import { createDomain } from 'effector';
import { attachLogger } from 'effector-logger/attach';

export const myDomain = createDomain('my');
attachLogger(myDomain);

Settings available only on attachLogger

Second argument is an object { reduxDevtools, console, inspector }, each field is optional can be "enabled" or "disabled". If field is not provided it is "enabled" by default.

• reduxDevtools if "disabled" do not send updates to redux devtools extension
• inspector if "disabled" do not send updates to effector inspector
• console if "disabled" do not log updates to console.log in browser devtools

// disable all logs
attachLogger(myDomain, {
  reduxDevtools: 'disabled',
  inspector: 'disabled',
  console: 'disabled',
});

effector-root

Just import root domain and attach:

import { attachLogger } from 'effector-logger/attach';
import { root } from 'effector-root';

attachLogger(root);

Create React App and macros support

import { attachLogger } from 'effector-logger/attach';
import { root } from 'effector-root/macro';

attachLogger(root);

Inspector

In root file on the client side import createInspector from effector-logger/inspector, and call it after app initialized.

Note: inspector requires browser environment. ReactNative is not supported

import { createInspector } from 'effector-logger/inspector';
/* App initialization here */
createInspector();

Redux DevTools support

If you have redux devtools extensions, just open it.

Using in the project with Redux

If you are using [email protected] and lower with effector-logger in the project with redux, then you need to rewrite redux createStore import to createReduxStore and use it. Otherwise redux will give you an error: Unexpected keys found in preloadedState argument passed to createStore.

import { createStore as createReduxStore } from 'redux';

const store = createReduxStore();
// reducers

Using logger with SSR

import { attachLogger } from 'effector-logger/attach';
import { root, fork, hydrate } from 'effector-root';

const scope = fork(root);
hydrate(scope, { values: INITIAL_STATE });
attachLogger(scope);

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Andrey Antropov 💻

Sergey Sova 💻

Sozonov 💻

This project follows the all-contributors specification. Contributions of any kind welcome!