effector / logger Goto Github PK

View Code? Open in Web Editor NEW

161.0 12.0 22.0 1.95 MB

Simple logger with stores inspector

Home Page: https://npmjs.com/effector-logger

JavaScript 4.23% TypeScript 95.41% HTML 0.36%

effector logger log inspector

logger's Introduction

☄️ effector

Business logic with ease

Visit effector.dev for docs, guides and examples

Introduction
- Effector follows five basic principles:
Installation
Documentation
Packages
Articles
Community
Online playground
DevTools
More examples in documentation
Learn more
Support us
Contributors

Introduction

Effector implements business logic with ease for Javascript apps (React/React Native/Vue/Svelte/Node.js/Vanilla), allows you to manage data flow in complex applications. Effector provides best TypeScript support out of the box.

Effector follows five basic principles:

Application stores should be as light as possible - the idea of adding a store for specific needs should not be frightening or damaging to the developer.
Application stores should be freely combined - data that the application needs can be statically distributed, showing how it will be converted in runtime.
Autonomy from controversial concepts - no decorators, no need to use classes or proxies - this is not required to control the state of the application and therefore the api library uses only functions and plain js objects
Predictability and clarity of API - a small number of basic principles are reused in different cases, reducing the user's workload and increasing recognition. For example, if you know how .watch works for events, you already know how .watch works for stores.
The application is built from simple elements - space and way to take any required business logic out of the view, maximizing the simplicity of the components.

Installation

You can use any package manager

npm add effector

React

To getting started read our article how to write React and Typescript application.

npm add effector effector-react

SolidJS

npm add effector effector-solid

Vue

npm add effector effector-vue

Svelte

Svelte works with effector out of the box, no additional packages needed. See word chain game application written with svelte and effector.

CDN

Documentation

For additional information, guides and api reference visit our documentation site

Packages

Articles

Community

official
awesome-effector a curated list of awesome effector packages, videos and articles
Twitter
Telegram (@effector_en)
Telegram 🇷🇺 (@effector_ru)
dev.to
Discord
Add a GitHub Topic effector to your project's home page

Online playground

You can try effector with online playground

Code sharing, Typescript and react supported out of the box. Playground repository

DevTools

Use effector-logger for printing updates to console, displaying current store values with ui or connecting application to familiar redux devtools

Learn more

Support us

Read more articles on a patreon page
Donate on OpenCollective
Be a sponsor on Github Sponsors

Your support allows us to improve the developer experience 🧡.

Contributors

_Dmitry	_{andretshurotshka}	_Sova	_{Alexander Khoroshikh}	_popuguy	_{Igor Kamyşev}
_Egor	_{Valeriy Kobzar}	_Yan	_{Ruslan @doasync}	_{Illia Osmanov}	_mg901
_{Igor Ryzhov}	_{Arthur Irgashev}	_Viktor	_Ilya	_Ainur	_{Arutiunian Artem}
_{Dmitrij Shuleshov}	_{Nikita Nafranets}	_{Ivan Savichev}	_{Aleksandr Osipov}	_{Ilya Olovyannikov}	_bakugod
_{Зухриддин Камильжанов}	_{Victor Didenko}	_{Viktor Pasynok}	_{Kirill Mironov}	_Andrei	_Ivan
_{Bohdan Petrov}	_sergey20x25	_{Ivanov Vadim}	_{Mikhail Kireev}	_{Tauyekel Kunzhol}	_Victor
_{Vladimir Ivakin}	_{Aldiyar Batyrbekov}	_cqh	_xaota	_☃︎	_{Andrei Antropov}
_Stanislav	_Sozonov	_Samir	_{Renat Sagdeev}	_Kirill	_{Denis Sikuler}
_Arsen-95	_{Anton Yurovskykh}	_{Anton Kosykh}	_{Aleksandr Belov}	_{Usman Yunusov}	_{vadimfilimonov}
_{Vasili Sviridov}	_{Vasili Svirydau}	_{Victor Kolb}	_{Vladislav Melnikov}	_{Vladislav Botvin}	_{Will Heslam}
_{The Gitter Badger}	_Shiyan7	_{Sergey Belozyorcev}	_{Satya Rohith}	_{Roman Paravaev}	_Roman
_{Robert Kuzhin}	_{Raman Aktsisiuk}	_{Rachael Dawn}	_xxxxue	_{vladthelittleone}	_qvelty
_roman	_{Marina Miyaoka}	_{Kirill Leushkin}	_kanno	_Ilya	_ilfey
_{Houston (Bot)}	_{Grigory Zaripov}	_{dmitryplyaskin}	_Stanislav	_ansunrisein	_{Anatoly Kopyl}
_{Yesset Zhussupov}	_Rasul	_{Edward Gigolaev}	_{Ed Prince}	_{Dmitry Dudin}	_Dmitry
_{Denis Skiba}	_{Dinislam Maushov}	_Ayu	_{Александр}	_Alexander	_{Alex Anokhin}
_Aleksei	_{Alex Arro}	_{Aleksandr Grigorii}	_{Abel Soares Siqueira}	_7iomka	_{Abdukerim Radjapov}
_0xflotus	_bigslycat	_{Pavel Hrakovich}	_Oleh	_Oleg	_{Mike Cann}
_{Nikita Svoyachenko}	_{Ludovic Dem}	_Leniorko	_{Lebedev Konstantin}	_{Joel Bandi}	_{Jesse Jackson}
_{Jan Keromnes}	_Ivan	_{Infant Frontender}	_{Ilya Martynov}	_{Gabriel Husek}	_{Filipkin Denis}

logger's People

Contributors

Stargazers

Watchers

logger's Issues

Do not show SyntheticEvent object

Hi.

Сan replace SyntheticEvent with a string symbol because logging an entire SyntheticEvent object causes lags in the browser.

Current behavior:

Expected:
☄️effector event * → editRate('SyntheticEvent ')

Don't show undefined if there is no path info

effector-logger doesn't support effector/compat version

I trying setup effector-logger on effector/compat and get errors below

Add babel-plugin

Remove module replacement recommendation from readme
Write babel plugin effector-logger/babel-plugin
Babel plugin should replace import {} from 'effector' to import {} from 'effector-logger'
? Add support for root: replace import {} from 'effector-root' to import {} from 'effector-logger/root'
effector-logger/babel-plugin MUST be AFTER effector/babel-plugin

Version 0.13.6 does not bundle typings for TypeScript

The package.json has an entry for "typings", but the dist/ folder is missing from the package. Possibly a publishing issue.

Logger shows some number instead of name

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


export const countStore = createDomain()

attachLogger(countStore);

export const $count = countStore.createStore(0)

Setting up logger with webpack and ts-loader

Hey,
I'm wondering if there is an easy way to use logger with webpack and ts-loader without replacing paths manually? I don't use babel-loader in my project.

Add option for non-babel users in readme

we need to show up how to use this debugging tool without having babel in project

Add integration tests for Next.js

https://codesandbox.io/s/musing-feistel-msn15

RFC: Allow to configure effector-logger via babel-plugin settings

Problem

Currently, if effector-logger is added via babel-plugin, like this:

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

There is no option to configure it in any way.

For e.g. i would prefer to keep easy one-line installation via plugin, but to disable logs to console in favor of inspector or redux-devtools

Propolsal

Allow configure effector-logger via plugin options, like it works now in attachLogger options

{
   "env":{
      "development":{
         "plugins":[
            [
               "effector-logger/babel-plugin",
               {
                  "reduxDevtools":"disabled",
                  "inspector":"disabled",
                  "console":"disabled"
               }
            ]
         ]
      }
   }
}

Logging of mapped/combined stores

In some cases, it would be nice to have mapped/combined stores to be logged as well. Although if we will log all of the derived stores it might add noise, if, for example, derived store is solely used as an argument for methods like sample, etc.

Maybe we could create an API for attaching logger to a particular derived store, which might look like this:

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

const myComplextCombinedStore$ = combine(authState$, todos$, permissions$, combinator);
attachLogger(myComplextCombinedStore, 'myComplextCombinedStore$');

Debug domain with settings is not working

I need to disable logging to the console for all effector modules.
Since it has no opportunities to disable it globally I've followed Debug domain with settings to do it manually for every module.

For example, I've got the next code, but it's not working. I still get logging for the detail module.

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

const domain = createDomain('detail')

export const fetchDetailFx = domain.createEffect()

export const setDetail = domain.createEvent()
export const clearDetail = domain.createEvent()

export const $detail = domain.createStore({})

attachLogger(domain, { console: 'disabled' })

What do I do wrong?

Migrate inspector source code there

effector/babel-plugin configuration doesn't work as expected

If reactSsr flag is provided through the effector-logger babel plugin - it does nothing

module.exports = {
  plugins: [['effector-logger/babel-plugin', { effector: { reactSsr: true } }]],
}

I've modified node-modules/effector/babel-plugin.js to see if rewrite actually happens

// node-modules/effector/babel-plugin.js#242
      ...
      if (reactSsr) {
        if (source === 'effector-react' || source === 'effector-react/compat') {
          path.node.source.value = 'effector-react/scope'
          console.log(source, 'rewrited')
        }
      }
      ...

It logs if effector/babel-plugin used directly, but not for effector-logger

Duplicated output for sub domains

https://codesandbox.io/s/priceless-thunder-yvkgr?file=/src/index.js

Can't resolve 'process/browser' in ...\node_modules\forest'

Try to start project and gott error:

"Module not found: Error: Can't resolve 'process/browser' in 'C:\Users\20074894\WebstormProjects\project\node_modules\forest'
Did you mean 'browser.js'?"

Also I tried add Webpack plugins:

new webpack.ProvidePlugin({
  process: "process/browser",
}),
new webpack.ProvidePlugin({
  Buffer: ["buffer", "Buffer"],
})

But have not luck((

Could not find a declaration file for module 'effector-logger'

When trying to use the module, it causes an error due to the unavailability of types

If we use publint for this package we will see the following error

Move effector-inspector to peer dependencies

In my project, I don't want to use effector-inspector, but it still installs and pulls a lot of unnecessary modules like solid.
I suggest to add effector-inspector to peer dependencies and install it by demand.

Group logs to handle stacks

root.onCreateEvent(event => {
  const watch = event.watch
  event.watch = fn => watch(upd => {
    console.group(...)
    try {
      fn(upd)
    } finally {
      console.groupEnd(...)
    }
  })
})

Option to allow disabling console logs

Hi, I really like effector and everything around it. Would it be possible to add config option to be able to disable console logs, let say I am using redux tool and to have also console logs seems redundant? Thanks

Error: combine expects a store in a field clock

Добрый день! когда мы подключаем logger к NextJs + effector в ts получаем ошибку "Error: combine expects a store in a field clock"

если из .babelrc убрать настройку logger то все работает и ошибки нет

codesandbox.io

Error: guard: expect clock to be a unit (store, event or effect) or array of units

Hey 👋 Not sure if I'm doing something wrong or there is actually a bug.

So I have this packages installed:

        "effector": "^21.8.11",
        "effector-react": "^21.3.2",
        "effector-logger": "^0.13.3",

And I'm using parcel v2 as a builder.

Every time I try to use anything related to effector-logger I get this error

I get this error either if I import bablel config or either just directly import something from 'effector-logger'.

Which other details can be useful?

`effector-logger/attach` is not exist, only `/dist/attach` works

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

Could not find a declaration file for module 'effector-logger/attach'. '/node_modules/effector-logger/attach.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/effector-logger` if it exists or add a new declaration (.d.ts) file containing `declare module 'effector-logger/attach';`ts(7016)

Works as expected

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

node

14.16.1

typescript

4.4.3

effector

22.1.1

effector-logger

0.13.0

Add macro to add support for CRA

import { createStore, attach } from "effector-logger/macro";

Reference https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/macro/index.js

https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/author.md#config-experimental

Select data type for logging

It will be nice to be able to choose what to log in the console and, mainly, in redux dev tools.
Like select only stores and events to be logged, otherwise, there's a lot of pollution by effects stores pending and inFlight in dev tools.

Error: sample: expect clock to be a unit (store, event or effect) or array of units

This seems similar to #75 except that the error is reported from sample rather than guard -- and I'm not using effector-logger.

sample(clock, source, fn) works fine, but when calling sample({ clock, source, fn, target }) I get this error:

I'm using effector with vite (& svelte but that doesn't seem relevant, as the code is compiled in a .ts file not a .svelte file).

The only effector library I'm using is:

    "effector": "^23.1.0"

and bundling is via:

    "tslib": "^2.6.2",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"

Any suggestions? Any other useful info I can provide? Thanks!

(My workaround for now is to use store.getState() in a reducer to achieve the result that I would have gotten with sample())

ReduxDevtools doesn't see effector-logger

ReduxDevtools doesn't see attached effector-logger printing No store found.

I'm using NextJs and attaching the logger like this:

if (!isServer) {
    const { attachLogger } = require('effector-logger/attach');

    attachLogger(rootDomain, { reduxDevtools: 'enabled', console: 'enabled' });
}

The console.log is working, though

Calling createInspector breaks the dom

If you remove the effector -> effector-logger substitution and leave createInspector, it breaks the house at the first update of any of the strings of the effector.
Example: https://tic-tac-toe-2gk598mdc.now.sh/ (look in devtools)
Code https://github.com/dimensi/tic-tac-toe/tree/5bc0eb9d2cbd97f685b4e70cf5002a4b9c361c25

CommonJS version tries to require() an ES Module and breaks

Maybe I'm missing something, but, to my understanding, the CommonJS version can't work because it forces a require() of an ES Module:

var effector_mjs = require('effector/effector.mjs');

Which of course leads to this error:

Error: require() of ES Module [EDITED]/node_modules/effector/effector.mjs not supported.
Instead change the require of [EDITED]/node_modules/effector/effector.mjs to a dynamic import() which is available in all CommonJS modules.

Remove createInspector

Just

import "effector-logger/inspector";

Then CTRL+B

`effector-logger` breaks operations' priorities

Subj, effector-logger somehow breaks effector priorities, for example, sample began to work earlier, than .on, which completely breaks synchronous logic.

Code

const passingBy = createEvent();
const goAhead = createEvent();
const $gate = createStore(true)
  .on(passingBy, () => false)
  .on(goAhead, () => true);

sample({
  clock: passingBy,
  target: goAhead
});

passingBy()

works differently, when you import from from "effector-logger":

with import {} from "effector" store $gate contains true after calculations
with import {} from "effector-logger" store $gate contains false after calculations, because sample executes earlier, than .on(passingBy

Repo with reproduce: https://github.com/yumauri/effector-logger-issue

Doesn't work with redux-devtools chrome extension

It gives an error

1.chunk.js:formatted:259960 TypeError: D.send is not a function
    at 1.chunk.js:formatted:140054
    at 1.chunk.js:formatted:140058
    at fe (1.chunk.js:formatted:142973)

D.send is reduxDevTools.send({
As I understand, this line https://github.com/effector/logger/blob/master/src/redux-devtools.ts#L8 should look like

typeof window !== "undefined" &&
window.__REDUX_DEVTOOLS_EXTENSION__.connect
  ? window.__REDUX_DEVTOOLS_EXTENSION__.connect()
  : window.__REDUX_DEVTOOLS_EXTENSION__;

If I try to debug, D is an object with just a connect function.

Upgrade effector version

effector/effector#755

Any way to disable based on a flag/setting?

Hi, this is probably a dumb question, but if I build to production and don't change import { createEvent, createStore } from "effector-logger"; is there a way to turn it off using a flag or env var etc, or do I have to change the import?

Thanks!

logger throws errors on circular references

in here:

function copy<T>(a: T): T {
  return JSON.parse(JSON.stringify(a));
}

This breaks if objects are not serializable. I have a tree nodes, which reference their parents and logging those should work.

Update `forest` and `effector` dependencies

This package depends on 0.19 forest version, which is not compatible with effector 22

Optionally log combined and mapped stores

https://share.effector.dev/5x9KO6ZK

Update dependencies

Getting JSON parse error when calling events with no parameters after upgrade

What is the current behavior:
Hi, just upgraded to:

        "effector": "^22.1.1",
        "effector-logger": "^0.12.1",
        "effector-react": "^22.0.4",

Please provide the steps to reproduce and if possible a minimal demo of the problem via https://share.effector.dev, https://codesandbox.io or similar

export const resetSurvey = createEvent();

export default createStore<surveyStore>(emptySurveyStore)
    .on(resetSurvey, (state) => {
        return {
            ...state,
        };
    })

What is the expected behavior:
With the above snippet, nothing should change. However I'm getting a JSON parse error show in the console here:

$events
  .on(eventAdd, (map, payload) => ({
    ...map,
    [payload.name]: {
      mapped: payload.mapped,
      history: [],
    },
  }))
  .on(eventTriggered, (map, { name, params }) => {
    // should not change the order of fields

    map[name] = {
      ...map[name],
      history: [JSON.parse(JSON.stringify(params)), ...map[name].history],     <--- here
    };
    return { ...map };
  });

I'm guessing since the event has no params, it's trying to stringify/parse a null/undefined and that is causing the error.

Which versions of effector packages, and which browser and OS are affected by this issue? Did this work in previous versions of effector?:
yea used to work, I just reverted back to these and not seeing the error again

        "effector": "^21.8.5",
        "effector-logger": "^0.10.0",
        "effector-react": "^21.2.1",

How to disable all Farfetched related logs

I'm using createJsonQuery and "effector-logger" in my project and I want to mute all farfetched related service logs from my console because they are too verbose and seem to clutter up the console. Please take a look on the screenshot.

I've tried to use configure with { log: 'disabled' } for all states and effects from query returned by createJsonQuery(). But it didn't help. Could be someone can help to figure it out how to do that?

Allow to hide internal stores and events from log

It will be nice to add a checkbox to hide .inFlight, .updates, and .pending.

Ref.: #23

Cyclic object value error

When I pass event or effect or what use(Unit/Store/Event and etc.) has returned me to handler of HTML5 element(like input or button) or UI component(MUI and etc.) and then start to interact with this element I catch an error with message Cyclic obejct value(Firefox) or called Converting circular structure to JSON(Chromium) or my tab falls. Also i tried to reproduce this script on my phone. Browser was falled.

Why i think that i bug in effector
Because, if i pass arrow-function into handler where i will be call event/effect and etc. and don't be pass event object, it will be work fine. But i can't do like this every time when i need because it's very uncomfortable

Please provide the steps to reproduce and if possible a minimal demo of the problem via https://share.effector.dev, https://codesandbox.io or similar
I couldn't to repeat it on others services

What is the expected behavior:
I expect It will be work like a simple handler

Which versions of effector packages, and which browser and OS are affected by this issue? Did this work in previous versions of effector?:
effector: 22.4.0
effector-react: 22.3.4
Firefox: 107
Chromium: 105
OS: Fedora 37
Kernel: 6.0.11

Can't setup logger

Please, clear out, what required steps to setup logger? Documentation says about:

babel-plugin (I do not use babel in project build). Therefore, I added plugin to storybook (wich uses babel) and nothing happens
replacing imports (I do not want to modify my sources for dev/prod builds, and do not know, how to setup replace imports automaticly in rollup),
calling attach to domain (I have no single root domain, and do not want to place debug call in every component, and remove it in production build). I can't use effector-root, because of p.2.

When I just simple call createInspector() I receive empty inspector window. Ho to add my stores to this inspector?

 "effector": "^21.7.5",
"effector-logger": "^0.9.0",
"effector-react": "^21.2.1",

Refactor attachLogger with Scope

Error: Error serializing `.initialState.bxdte["-2xkzew"].effect` returned from `getStaticProps` in "/catalog/[...slug]".

Когда используется effector-logger вместе с NextJs и effector22+, SSR\GSSP то,конфигурация babel заменяет импорты из 'effector' на "effector-logger" в следствии чего приложение падает из-за не соотвествия сериализации данных как я понял :\

"effector-logger": "^0.13.1",
"effector": "^22.1.1",
"effector-react": "^22.0.4",
"next": "^12.0.4",

Если убрать из конфигурации babel "plugins": ["effector-logger/babel-plugin"], то все работает, но нет логов :(

прошу рассмотреть доработку.

Incorrect document usage breaks SSR

Nodejs have no document and effector-inspector is breaking application in case of importing 'effector-logger/inspector' on server. This line is dangerous even if createInspector is not called at all.

[BUG] attachLogger and createInspector - Payloads too large and input handler took lot of time

When:

git clone [email protected]:accesso-app/frontend.git
attachLogger to root
createInspector after client initialization
Without createInspector there is no "Application state or actions payloads are too large" and input handlers reduce time consuming to 300ms

Current behavior:

Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See https://git.io/fpcP5 on how to configure it.
'input' handler took more then 1000ms
This synthetic event is reused for performance reasons

Expected behavior:

'input' handler took less than 10ms without errors

Environment:

node vesrion: v14.15.3

Screenshots:

SyntaxError: Unexpected token u in JSON at position 0 when using chaining operator in store.map

Versions

effector: 22.2.0
effector-logger: 0.13.4
node: 14.19.1

Reproduction

Codesandbox (react + effector): https://codesandbox.io/s/serene-frog-rvcke7?file=/src/App.js

Steps to reproduce:

Open sandbox repro
Type some player name into input
Click set player name
Open console and you'll see this error: SyntaxError: Unexpected token u in JSON at position 0

What is expected?

Error is not expected because when I'm using createStore and createEvent from 'effector' - there is no error.

Important

I observe this error only when using the chaining operator ?. is store.map. For example, if we change this line: const $playerName = $player.map((player) => player?.name); to const $playerName = $player.map((player) => player ? player.name : null); - there is no error

"Unexpected token u in JSON at position 0" when call event without payload

codesandbox

stacktrace

```

effector version: 22.1.2
effector-logger version: 0.13.0

Mute events from store

Is there a way to mute events from one of the stores completely?

effector / logger Goto Github PK

logger's Introduction

☄️ effector

Visit effector.dev for docs, guides and examples

Table of Contents

Introduction

Effector follows five basic principles:

Installation

Documentation

Packages

Articles

Community

Online playground

DevTools

More examples in documentation

Learn more

Support us

Contributors

logger's People

Contributors

Stargazers

Watchers

Forkers

logger's Issues

Problem

Propolsal

Works as expected

node

typescript

effector

effector-logger

When:

Current behavior:

Expected behavior:

Environment:

Screenshots:

Versions

Reproduction

Steps to reproduce:

What is expected?

Important

Recommend Projects

Recommend Topics

Recommend Org