@dreipol/vue-log

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

Stats

StarsIssuesVersionUpdatedCreatedSize
@dreipol/vue-log
700.0.83 years ago3 years agoMinified + gzip package size for @dreipol/vue-log in KB

Readme

vue-log

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

Build Status NPM version NPM downloads MIT License

Purpose

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.

Quickstart

  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!`);
            }
        }
    }
    

Config

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

Global config

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 */ });

Local 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 */ });

Config object

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

Environments

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

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

Examples

Logging to the console

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

Custom log messages

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;
            }
        ],
    });

Filter log levels

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

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;
            }
        ]
    });

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.