Excerpt of the formatted, hierarchical logger in Skylight

logger.js

/*
  Example usage:

  import logger from "app/system/logger";
  var LOG = logger.loggerFor("topic"');

  LOG.log({
    event: "data received",
    secondary: {
      resource: "photo",
      requestId: "1234"
    },
    args: payload
  });
*/

var DATE_FORMAT = 'MM/DD HH:mm:ss';
var FONT_WEIGHT_NORMAL = "font-weight: normal;";
var FONT_WEIGHT_BOLD = "font-weight: bold;";
var COLOR_PURPLE = "color: purple;";
var COLOR_RED = "color: red;";
var COLOR_GREEN = "color: green;";
var COLOR_BLUE = "color: blue;";

function logFormatted(name, type, message, additional) {
  var output = [], style = [];
  var date = moment().format(DATE_FORMAT);

  // Timestamp
  output.push("%c[" + date +"] ");
  if (type === "error") {
    style.push(FONT_WEIGHT_BOLD + COLOR_RED);
  } else {
    style.push(FONT_WEIGHT_NORMAL);
  }

  // Name
  output.push("%c" + name + " ");
  style.push(FONT_WEIGHT_NORMAL + COLOR_PURPLE);

  if (typeof message === 'string') {
    // Simple Message
    output.push("%c" + message);
    style.push(FONT_WEIGHT_NORMAL);
  } else {
    // Structured Message

    // Event Name
    output.push("%c" + message.event);
    style.push(FONT_WEIGHT_NORMAL + COLOR_RED);

    // Secondary Information
    var secondary = normalizeSecondary(message.secondary);

    for (var idx = 0; idx < secondary.length; idx += 2) {
      output.push(" %c" + secondary[idx]);
      style.push(FONT_WEIGHT_NORMAL + COLOR_GREEN);

      output.push("%c=");
      style.push(FONT_WEIGHT_NORMAL);

      output.push("%c" + secondary[idx+1]);
      style.push(FONT_WEIGHT_NORMAL + COLOR_BLUE);
    }
  }

  output = [output.join('')].concat(style);

  var args = message.args;

  if (args && args.length) {
    console.groupCollapsed.apply(console, output);
    console.log.apply(console, args);
    console.groupEnd();
  } else {
    console.log.apply(console, output);
  }

  if (additional) { console.log(additional); }
}

function normalizeSecondary(secondary) {
  if (Ember.typeOf(secondary) === 'array') {
    Ember.assert("Secondary arguments passed to the logger must have an even number of items. For example, ['foo=', bar].", secondary.length % 2 === 0);
    return secondary;
  }

  var array = [];

  for (var key in secondary) {
    array.push(key);
    array.push(secondary[key]);
  }

  return array;
}

var Logger = Ember.Object.extend({
  history: null,

  verbose: false,
  sendReports: true,

  name: "default",

  loggerFor: function(name) {
    return Logger.create({
      parent: this,
      name: name
    });
  },

  setup: function() {
    this.history = [];
    this._log('useragent', window.navigator.userAgent);
    return this;
  },

  log: function(message) {
    this._log('info', message);
  },

  warn: function(message) {
    this._log('warning', message);
  },

  error:  function(message) {
    this._log('error', message);
  },

  exception: function(error) {
    var stacktrace = printStackTrace({ e: error });
    this._log('exception', error.message, { exception: error, trace: stacktrace });
  },

  report: function() {
    if (!this.sendReports) { return; }
    if (this.verbose) { console.log("Sending report to server."); }

    return $.ajax('/internal/error.json', {
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        error: {
          history: this.history
        }
      }),
      context: this,
      success: function() {
        if (this.verbose) { console.log("Report sent successfully."); }
      },
      error: function() {
        this.error("Unable to send error report to server.");
        console.error("Unable to send error report to server.");
      }
    });
  },

  reportError: function(error) {
    this.exception(error);
    return this.report();
  },

  _log: function(type, message, additional, name) {
    var parent = this.get('parent');

    if (!name) {
      name = this.get('name');
    }

    if (parent) {
      parent._log(type, message, additional, name);
      return;
    }

    var date = new Date();

    var item = {
      name: name,
      dateStr:   date.toString(),
      timestamp: date.getTime(),
      type:      type,
      message:   message
    };

    if (additional) {
      $.extend(item, additional);
    }

    this.history.push(item);

    if (this.verbose) {
      logFormatted(name, type, message, additional);
    }
  },
});

var logger = Logger.create().setup();

export default logger;