Console Logger Module

My Money Calendar has a custom logger module that wraps the console API. It does 2 key things:

• Provides channel-based control of log messages. Each component you register has its own group name, and the log messages from that group can be shown or hidden independently of other groups' messages.
• Shows you which group emitted the log message with color coded labels in console, helping you keep track of where the message is coming from in your code.

It uses localStorage in order to remember which message groups are enabled/disabled across page refreshes.

API

See JSDoc comments in cfgov/unprocessed/apps/mmt-my-money-calendar/js/lib/logger.js.

Usage Example

The logger module creates a single instance of class Logger and exports that to anything that imports it. It also ensures that a window global called logger is created, which allows you to interact with the logging service in DevTools console.

In your module:

Let's say you have a MobX store, and you want to log messages when certain things happen. The logger.addGroup function registers a new group with the logger and returns an object that wraps the console API. It has methods available like log(), info(), warn(), debug(), error(), etc.

// cfgov/unprocessed/apps/mmt-my-money-calendar/js/stores/widget-store.js

import { observable, action } from 'mobx';
import logger from '../lib/logger';

class WidgetStore {
  @observable widgets = [];

  constructor() {
    this.logger = logger.addGroup('widgetStore');

    this.logger.debug('Widget Store initialized: %O', this);
  }

  @action addWidget(widget) {
    this.widgets.push(widget);
    this.logger.info('Widget added: %O', widget);
  }

  @action removeWidget(index) {
    this.widgets.splice(index, 1);
    this.logger.info('Widget removed at index %d. Widgets: %O', index, this.widgets);
  }
}

export default WidgetStore;

In console

In devtools, to view these log messages, you need to enable the WidgetStore's message group and refresh the page. The group will remain enabled until you call disable on it.

logger.enable('widgetStore');
window.location.reload();

When the page refreshes, you'll see the messages print to console as you interact with the store.

To disable the group, use logger.disable:

logger.disable('widgetStore');

Other useful methods:

• logger.enableAll() will display messages from all registered groups.
• logger.disableAll() will hide messages from all registered groups.
• logger.groupNames is a computed property that will give you an array of the names of all registered groups.

Blackboxing

Since all of the console methods are ultimately being called by the Logger instance in logger.js, devtools will incorrectly show all of your modules' logs as coming from that module unless you blackbox it. This tells Devtools to ignore logger.js and report the messages as coming from their correct origins.

Without blackboxing:

With blackboxing:

Instructions

• In Devtools, click on the 3 vertical dots toward the top right to open the menu. Select Settings.
• Click on the Blackboxing section in the sidebar on the left.
• Click the Add Pattern button.
• Enter logger\.js$ and click Add.
• Close settings. Logger module is now blackboxed