@eastsideco/escshopify/src/utils/loggers/ConsoleLogger.js

WIP JS library for Shopify, containing a variety of useful functionality.

import logLevel from './logLevel.js';
import Logger from './Logger';


/**
 * Basic logger that logs to the environment console.
 */
export default class ConsoleLogger extends Logger {

    /**
     * Create a new ConsoleLogger.
     */
    constructor() {
        super();

        /** @type {Number} */
        this.level = logLevel.DEBUG;
        /** @type {Boolean} */
        this.useFancyStyling = this._canUseFancyStyling();
    }

    _canUseFancyStyling() {
        var browser = {};
        browser.isFirefox = /firefox/i.test(navigator.userAgent);
        browser.isIE = document.documentMode;

        var support = {};
        support.consoleApply = !browser.isIE || document.documentMode && document.documentMode > 9;
        support.functionGetters = support.consoleApply;
        support.console = !!window.console;
        support.modifiedConsole = !browser.isIE && support.console && console.log.toString().indexOf('apply') !== -1;
        support.consoleStyles = !!window.chrome || !!browser.isFirefox;
        support.consoleGroups = !!(window.console && console.group);
        return support.consoleStyles;
    }


    /**
     * Sets current logging level. Messages below this log level will be ignored.
     * @param {Number}	level
     */
    setLogLevel(level) {
        this.level = level;
    }

     /**
      * Logs a message to the console
      * @param {type}	level - Logging level
      * @param {type}	tag - Logging tag
      * @param {type}	text - Text to log
      */
    send(level, tag, text) {
        if (level < this.level) { return; }

        var fn = console.log;
        if ((console.error && level == logLevel.ERROR)
            || (console.error && level == logLevel.FATAL)) {
            fn = console.error;
        }
        if (console.warn && level == logLevel.WARN) {
            fn = console.warn;
        }
        if (console.info && level == logLevel.INFO) {
            fn = console.info;
        }
        if (console.debug && level == logLevel.DEBUG) {
            fn = console.debug;
        }
        // Binding back to console because iOS Safari is weird
        if (this.useFancyStyling) {
            var str = '%c' + this.logPrefix + '%c' + logLevel.levelToString(level);
            str += '%c %c'+tag+'%c'+text;
            var levelColor = {
                DEBUG: '#454F5B; color: white;',
                INFO: '#007ACE; color: white;',
                WARN: '#EEC200; color: white;',
                ERROR: '#BF0711; color: white;',
                FATAL: 'linear-gradient(to top, #EEC200 0, #BF0711 100%); color: white;'
            }[logLevel.levelToString(level)];
            var styles = [
                'background: #202E78; border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0 8px;color: white',
                'width: 55px; text-align: center; padding: 0 8px; border-bottom-right-radius: 4px; border-top-right-radius: 4px;background:'+levelColor,
                'padding: 0 2px;',
                'background: #084E8A;padding:0 8px; color: white;border-radius: 8px;',
                'padding:0 8px;'
            ];

            fn.bind(console)(str, ...styles);
        } else {
            fn.bind(console)('['+this.logPrefix+'] ' + logLevel.levelToString(level) + ': ' + '[' + tag + '] ' + text);
        }
    }

    /**
     * Log an object.
     * @param {type}	level - Logging level
     * @param {type}	tag - Logging tag
     * @param {type}	text - Logging text
     * @param {type}	object - Object to be logged
     */
    sendObject(level, tag, text, object) {
        if (level < this.level) { return; }

        var fn = console.log;
        if ((console.error && level == logLevel.ERROR)
            || (console.error && level == logLevel.FATAL)) {
            fn = console.error;
        }
        if (console.warn && level == logLevel.WARN) {
            fn = console.warn;
        }
        if (console.info && level == logLevel.INFO) {
            fn = console.info;
        }
        if (console.debug && level == this.DEBUG) {
            fn = console.debug;
        }
        // Binding back to console because iOS Safari is weird
        if (this.useFancyStyling) {
            var str = '%c' + this.logPrefix + '%c' + logLevel.levelToString(level);
            str += '%c %c'+tag+'%c'+text+ ' %o';
            var levelColor = {
                DEBUG: '#454F5B; color: white;',
                INFO: '#007ACE; color: white;',
                WARN: '#EEC200; color: white;',
                ERROR: '#BF0711; color: white;',
                FATAL: 'linear-gradient(to top, #EEC200 0, #BF0711 100%); color: white;'
            }[logLevel.levelToString(level)];
            var styles = [
                'background: #202E78; border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0 8px;color: white',
                'width: 55px; text-align: center; padding: 0 8px; border-bottom-right-radius: 4px; border-top-right-radius: 4px;background:'+levelColor,
                'padding: 0 2px;',
                'background: #084E8A;padding:1px 8px; color: white;border-radius: 8px;',
                'padding-left: 8px;'
            ];

            fn.bind(console)(str, ...styles, object);
        } else {
            fn.bind(console)('['+this.logPrefix+'] ' + logLevel.levelToString(level) + ': ' + '[' + tag + '] ' + text, object);
        }
    }
}