Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/effector/logger below:

effector/logger: Simple logger with stores inspector

Pretty logger for stores, events, effects and domains.

npm add effector
npm add --dev effector-logger

or yarn

yarn add effector
yarn add -D effector-logger

Note: effector-logger requires effector to be installed

To make logs more useful we need additional metadata (like names, locations in the code, etc), which is provided by one of the effector plugins.

Babel-plugin is built-in in the effector package.

Just add it to your babel configuration.

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

It is also useful to enable loc generation for dev environment, to see for exact locations of units in the code.

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

Read the docs

Read effector SWC plugin documentation

Just call attachLogger in your entrypoint module.

NOTE: To "see" the createStore, createEvent, etc calls effector-logger needs to be imported at the very top of your entrypoint module. This way initial states of stores will be properly logged at the moment of attachLogger call.

Update logs are not affected by import order.

// src/index.tsx
import { attachLogger } from 'effector-logger';

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './app';
import { appStarted } from './shared/app-events';

attachLogger();

appStarted();

createRoot(document.querySelector('#app')).render(<App />);

After that you will see the logs in your console.

If your app uses scope (e.g. you have Server-Side-Rendering) - you will need to pass it to the logger to work.

Updates related to provided scope will be prefixed with scope id.

There optional name prefix to the logs. It can be useful if there are few instances of your app, which are using different scopes or if you just want prefix that is better than boring scope id.

attachLogger({
  scope,
  name: `my-cool-app-${appId}`, // all logs will be prefixed with this string
});

To stop logs just call unsubscribe function.

const unlogger = attachLogger();

unlogger();

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

By default only non-derived units are logged. If you want to force some unit to be logged, use configure enabled

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

const pageMounted = createEvent<number>();

const mappedMounted = pageMounter.map((x) => x);

configure(mappedMounted, { log: 'enabled' });

// You can pass multiple units as array
configure([$data, loadDataFx], { log: 'enabled' });

Redux DevTools is moved to a different package.

See the @effector/redux-devtools-adapter

Thanks go to these wonderful people (emoji key):

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

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"

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4