Logged event types should be configurable

[winterbe]

Hi,

it would be very handy if we could configure which particular event types gets logged. Currently every event gets logged by the spy listener which often results in huge amounts of console logs.

In most cases I would just like to see action logs per default and then enable more logs (e.g. reactions) on demand. This would be particular useful for ReactNative where you cannot rely on other devTools.

It would also be helpful to output timestamps for each log statements.

Regards.

PS: I think especially people coming from Redux are used to workflows like that, see Redux Logger: https://github.com/evgenyrodionov/redux-logger

[andykog]

@winterbe made a pr #32, it allows filtering top-level messages (not inside groups) like this:

configureDevtool({
   logFilter: change => change.type === 'reaction',
 });

What do you think? We don't need filtering inside console.group, right?

[Strate]

Also it would be useful to skip logging of state modifications, if them happens too often inside one action (for example, if action triggers more than 20 state modifications, stop logging them and only count, print count after action finished).

[winterbe]

@andykog Looks good to me. 👍 Top level filtering is enough for me. I primarily want to filter by event.type, e.g. show only actions, reactions and computations.

Currently I use mobx-logger (authored by me) but I'm happy to drop it if DevTools serve my needs.

Sometimes it would also be useful to further filter out some reactions, because if you use @observer on many child components you still get a lot of noise in the logs. E.g. if you render a table with 200 rows, where each row is an observer component, you would get too many logs.

In that case it would be handy to filter out reactions based on rows so you just see REACTION MyTable.render() in the logs and not 200x MyRow.render(). IIRC that would currently be possible by maintaining a blacklist of reaction names and filter by ev.object.name.

However a more sophisticated solution would be to filter by actual component type instead of a string name to prevent global namespace clashes. But I fear that's currently impossible because the components type of the reaction is not propagated via spy events?

cc @mweststrate

[mweststrate]

looks useful indeed! it is currently not possible to get the component via the spy event in a reliable way indeed, although some cross referencing with the mobx-react render events (used for the highlight and such) used by the devtools might be possible (it is possible to obtain the reaction belonging to an observer component via instance.render.$mobx)

[andykog]

Published as v4.2.5