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

{
  "plugins": ["effector-logger/babel-plugin"]
}

Options

Babel plugin has few configuration options:

• inspector: boolean - enables or disables effector-inspector. Default: false
• effector: EffectorBabelPluginOptions - overrides for underlying effector/babel-plugin. Default: {}

Config example:

{
  "plugins": [
    [
      "effector-logger/babel-plugin",
      {
        "inspector": true,
        "effector": {
          "reactSsr": true,
          "factories": ["shared/lib/effector-timer", "effector-forms"]
        }
      }
    ]
  ]
}

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',
});

Hide any unit from log

Sometimes it is required to hide some events or stores from log. It is simple to implement: just call configure on your unit.

import { createEvent } from 'effector'
import { configure } from 'effector-logger'
import { $data, loadDataFx } from './model'

const pageMounted = createEvent<number>();

configure(pageMounted, { log: 'disabled' })

// You can pass multiple units as array
configure([$data, loadDataFx], { log: '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

Just import effector-logger/inspector in the app.ts and open DevTools Console in browser.

Note: inspector requires browser environment. ReactNative is not supported

import 'effector-logger/inspector';

Then press CTRL+B to open Inspector inside the app.

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 go to these wonderful people (emoji key):

Andrey Antropov 💻

Sergey Sova 💻

Sozonov 💻

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

Release process

1. Check out the draft release.
2. All PRs should have correct labels and useful titles. You can review available labels here.
3. Update labels for PRs and titles, next manually run the release drafter action to regenerate the draft release.
4. Review the new version and press "Publish"
5. If required check "Create discussion for this release"