winterbe / mobx-logger Goto Github PK

A lot of people are using MobX with TypeScript. Can you provide a embedded .d.ts file?

❤️

This package is awesome :)

This threw me off on a quick debugging journey, from the README:

import {enableLogging} from 'mobx-logger';

// optional
const config = {...};

enableLogging(config);

Since enableLogging is imported by name, I expected this to work:

import mobxLogger from 'mobx-logger'

mobxLogger.enableLogging()

And that threw an error, since both the default export and named export are the same:

// mobx-logger/src/index.js

export const enableLogging = (options = defaultOptions) => {
    const predicate = options.predicate || defaultOptions.predicate;
    if (predicate() === true) {
        return spy(ev => log(ev, options));
    }
    return () => void(0);
};

export default enableLogging;

This is the first time I encountered such exporting convention.

I would change either the named or default export, as long as they are not the same.

Thoughts?

I'll gladly prepare a PR, mobx is awesome! 🚀

eg: Action a.setUsername()
a.setUsername({name: 'todo'})

log: todo.setUsername().......

The name keyword confused

enableLogging({
predicate: () => DEV && Boolean(window.navigator.userAgent),
});

it dosent log anything on the console

Since 0.4.0 logging of computed values is suboptimal because the function name is no longer accessible from spy events in Mobx 3.

Try: extras.getDebugName(event.fn)

Hi

I think it should be fine if we can define in config object filters for Mobx events.

So properties of the config object can accept boolean or callbacks.

This should help avoid situations in ReactJS, where console has a lot of reactions on component's renders.

For example:

enableLogging({
  reaction: (e) => !e.name.includes('render'),
  action: true,
  transaction: true,
  compute: true,
});

Whether it supports printing out all store state values? It would be very handy.

I'm getting %s in my console instead of the transaction name:

21:31:08.725        TX  %s
21:31:08.732    ACTION  GridStore.setOptions()
21:31:08.739    ACTION  GridStore.setData()
21:31:08.754        TX  %s

Looks like the name wasn't passed to groupCollapsed in log.js - line 31 - adding it as the last arg seems to fix it 👍

console.groupCollapsed('%c%s  %s  %s', style('#7B7B7B'), now(), padStart('TX', 8), ev.name);

screenshot

predicate get true, but i also cant see the logs on chrome , how can i get it works?

Very cool logger :)

Would be great to change the predicate on the fly for debugging production. Is that possible? Should I send a PR?

This is what I want to do:

enableLogging({ predicate })

function predicate() {
  return window.__MOBX_LOGGER__
}

and then can do window.__MOBX_LOGGER__ = true in the console

sorry, this problem from my carelessness. I close the issue.

Only actions & reactions are visible

UPD: It looks like this library is no longer supported. I've created a logger that supports Mobx 6: https://github.com/kubk/mobx-log

Hi there,

We're running into some issues with MobX logger and Safari (v 11.1.1). Whenever it is enabled it's causing the browser to hang when loading the app and making changes to MobX stores.

Our enableLogging currently looks like this:

    enableLogging({
      predicate: () => true,
      action: true,
      reaction: false,
      transaction: false,
      compute: false
    });

Happy to do some testing to figure this out!

Hi-
I'd like a very simple logging format for when output is going to the Terminal (from unit tests). Would you be open to a PR with an option {plain: true} ?

Just simple stuff like -

var logAction = function logAction(ev) {
    if (!isLoggingEnabled(ev)) {
        return;
    }
    console.log(ev.type +" "+ ev.name + " " + JSON.stringify(ev.arguments));```