effector / logger Goto Github PK
View Code? Open in Web Editor NEWSimple logger with stores inspector
Home Page: https://npmjs.com/effector-logger
Simple logger with stores inspector
Home Page: https://npmjs.com/effector-logger
It will be nice to add a checkbox to hide .inFlight
, .updates
, and .pending
.
Ref.: #23
Когда используется 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"], то все работает, но нет логов :(
прошу рассмотреть доработку.
Добрый день! когда мы подключаем logger к NextJs + effector в ts получаем ошибку "Error: combine expects a store in a field clock"
если из .babelrc убрать настройку logger то все работает и ошибки нет
git clone [email protected]:accesso-app/frontend.git
v14.15.3
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
import { createStore, attach } from "effector-logger/macro";
https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/author.md#config-experimental
Please, clear out, what required steps to setup logger? Documentation says about:
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",
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
Is there a way to mute events from one of the stores completely?
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
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
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!
Just
import "effector-logger/inspector";
Then CTRL+B
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"
:
import {} from "effector"
store $gate
contains true
after calculationsimport {} 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
Codesandbox (react + effector): https://codesandbox.io/s/serene-frog-rvcke7?file=/src/App.js
SyntaxError: Unexpected token u in JSON at position 0
Error is not expected because when I'm using createStore
and createEvent
from 'effector' - there is no error.
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
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((
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.
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()
)
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.
The package.json
has an entry for "typings"
, but the dist/
folder is missing from the package. Possibly a publishing issue.
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.
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$');
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.
effector-logger/babel-plugin
import {} from 'effector'
to import {} from 'effector-logger'
import {} from 'effector-root'
to import {} from 'effector-logger/root'
effector-logger/babel-plugin
MUST be AFTER effector/babel-plugin
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?
This package depends on 0.19 forest version, which is not compatible with effector 22
SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
at eval (https://z2ihj.csb.app/node_modules/effector-inspector/index.mjs:1844:20)
at be (https://z2ihj.csb.app/node_modules/effector/effector.mjs:1067:71)
at et (https://z2ihj.csb.app/node_modules/effector/effector.mjs:1194:12)
at o (https://z2ihj.csb.app/node_modules/effector/effector.mjs:318:61)
at Function.create (https://z2ihj.csb.app/node_modules/effector/effector.mjs:386:19)
at r (https://z2ihj.csb.app/node_modules/effector/effector.mjs:380:22)
at onClick (https://z2ihj.csb.app/src/App.tsx:36:40)
at HTMLUnknownElement.callCallback (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at Object.invokeGuardedCallbackDev (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at invokeGuardedCallbackAndCatchFirstError (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4070:25)
at executeDispatch (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8243:3)
at processDispatchQueueItemsInOrder (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8275:7)
at processDispatchQueue (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8288:5)
at dispatchEventsForPlugins (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8299:3)
at eval (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8508:12)
at batchedEventUpdates$1 (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22396:12)
at batchedEventUpdates (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3745:12)
at dispatchEventForPluginEventSystem (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8507:3)
at attemptToDispatchEvent (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:6005:3)
at dispatchEvent (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5924:19)
at unstable_runWithPriority (https://z2ihj.csb.app/node_modules/scheduler/cjs/scheduler.development.js:468:12)
at runWithPriority$1 (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
at discreteUpdates$1 (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22413:14)
at discreteUpdates (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3756:12)
at dispatchDiscreteEvent (https://z2ihj.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5889:3)
```
effector version: 22.1.2
effector-logger version: 0.13.0
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
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",
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.
we need to show up how to use this debugging tool without having babel in project
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?
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)
import { attachLogger } from 'effector-logger/dist/attach';
14.16.1
4.4.3
22.1.1
0.13.0
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.
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?
root.onCreateEvent(event => {
const watch = event.watch
event.watch = fn => watch(upd => {
console.group(...)
try {
fn(upd)
} finally {
console.groupEnd(...)
}
})
})
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
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.
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
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"
}
]
]
}
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.