This npm package provides a system of log enhancements for vue applications.

vue-log enables you to implement multiple log levels with enhanced and coloured messages based on your environment. For example, you can log coloured debug messages to the console, discerning between sibling vue components in a list. In production you can send the same messages to your error reporting framework (for example Sentry/Raven) as breadcrumbs in case of an error occuring.

1. Install the module

   npm install -S @dreipol/vue-log

2. Register the plugin to your Vue instance

   import VueLog from '@dreipol/vue-log';
   Vue.use(VueLog);

3. Start logging!

   // As a global instance
   const Log = Vue.log();
   
   function isPrimary(color) {
       if (!color) {
           Log.error(`Uh oh, no color was provided. That doesn't look right...`);
       }
   
       return ['red', 'green', 'blue'].indexOf(color) > -1;
   }
   
   // In a component: my-favourite-color
   export default {
       props: {
           color: String
       },
       mounted() {
           this.$log.debug('Component mounted!');
   
           if (isPrimary(this.color)) {
               this.$log.info('Favourite color is a primary color');
           } else {
               this.$log.warn(`Favourite color is no primary color, but that's ok... We don't judge!`);
           }
       }
   }

You have multiple options to add a config either globally or when creating a new Logger.

When installing the plugin you may add a second parameter to extend the original presets. The new config will be used in two different ways:

• As a preset whenever you create a new log instance explicitly (by using Vue.log)
• As the config when creating a log instance implicitly (by using this.$log in a vue component)

    Vue.use(VueLog, { /* vue-log config */ });

For every log instance that you create explicitly (by using Vue.log), you can add a config object that will extend the global config.

    const Log = Vue.log({ /* vue-log config */ });

For a detailed description of the config object, please see the abstract-log documentation.

Switching between development and production code can be done like in many similar situations:

    Vue.use(VueLog, process.env.NODE_ENV === 'production' ? productionConfig : developmentConfig);

Console output should work out of the box with the default preset.

You can greatly customize your log messages by extending the log config object:

    Vue.use(VueLog, {
        logger: window.console,
        levels: [
            {
                name: 'log',
                fn: window.console.log,
                isCriticalError: false
            },
            {
                name: 'error',
                fn: window.console.error,
                isCriticalError: true
            },
        ],
        middlewares: [
            (result, { level, config }) => {
                const { isCriticalError } = level;

                if (isCriticalError) {
                    result.unshift('WARNING!!!');
                }

                return result;
            }
        ],
    });

To filter below a certain threshold, you can use the filter property:

    const LOG_THRESHOLD = 'info';

    Vue.use(VueLog, {
        filter({ config, level }) {
            const logIndex = config.levels.findIndex(l => l.name === level.name);
            const thresholdIndex = config.levels.findIndex(l => l.name === LOG_THRESHOLD);

            return logIndex >= thresholdIndex;
        }
    });

Sentry is a real-time crash reporting service. Its frontend reporting library is called Raven. When a javascript error occurs, Raven will report it to Sentry. You can add valuable debug information by storing what happened before the error occured:

    const { captureBreadcrumb } = window.Raven || {};
    const RAVEN_LEVEL_MAPPING = { debug: 'debug', info: 'info', warn: 'warning', error: 'error' };
    
    Vue.use(VueLog, {
        logger: window.Raven,
        proxy: false,
        levels: [
            { name: 'debug', fn: captureBreadcrumb },
            { name: 'info', fn: captureBreadcrumb },
            { name: 'warn', fn: captureBreadcrumb },
            { name: 'error', fn: captureBreadcrumb },
        ],
        middlewares: [
            (result, { level, config, statements }) => {
                result.push([
                    {
                        message: statements.toString ? statements.toString() : '',
                        category: 'vue-log',
                        level: RAVEN_LEVEL_MAPPING[level.name],
                        data: JSON.parse(JSON.stringify(config.context))
                    },
                ]);

                return result;
            }
        ]
    });