1.1.0 • Published 4 years ago

vue-logger-plugin v1.1.0

Weekly downloads
142
License
MIT
Repository
github
Last release
4 years ago

vue-logger-plugin

NPM Version License codecov circleci minified minzipped

Flexible logging functionality for Vue.js with support for custom hook operations.

Contents

NPM Package Install

npm i vue-logger-plugin@1.x-latest

Vue Plugin Install

The logging implementation can be installed a couple different ways, either by providing options or a constructed VueLogger instance to js.use.

Here is the simplest usage:

main.js

import VueLogger from 'vue-logger-plugin'
Vue.use(VueLogger, { <options here> })
// or simply Vue.use(VueLogger) to just use the default options

For advanced usage (i.e. using conditional options and hooks), it is recommended to export the constructed logger implementation in a separate file and then import into your main file.

logger/index.js

import VueLogger from 'vue-logger-plugin'

// define options
const options = {
  enabled: true,
  level: 'debug',
  beforeHooks: [ ... ],
  afterHooks: [ ... ]
}

// export logger with applied options
export default new VueLogger(options)

main.js

import logger from './logger'
Vue.use(logger)
// note that you may also provide the options argument here as well
// if provided, they would be merged with / override the options already applied

More information about hooks can be found in the Hooks section.

Options

NameTypeDefaultDescription
enabledbooleantrueenable/disable logger
consoleEnabledbooleantrueenable/disable console output
levelstring'debug'the logging level (one of: debug, info, warn, error, log)
beforeHooksLoggerHook[][]hooks invoked before a statement is logged, can be used to alter log arguments (use carefully)
afterHooksLoggerHook[][]hooks invoked after a statement is logged

Levels

log <-- error <-- warn <-- info <-- debug

(from left to right: least inclusive to most inclusive)

Specify an appropriate level to limit the amount of information logged. For example, using the 'warn' level will log the 'log', 'error', and 'warn' events but not the 'info' or 'debug' events.

enabled vs consoleEnabled

Setting enabled to false will disable all logger functionality (console output + hook invocations).

Setting consoleEnabled to false will disable just the console output but will still invoke the hooks.

So, for example, if you want to prevent writing logs to the browser console but still invoke a hook (i.e. to send logs to a server) then you would set enabled: true and consoleEnabled: false.

Hooks

Hooks allow for advanced customization of the logger implementation, providing operations to be run before and after logging is performed. These are defined on options as beforeHooks and afterHooks.

beforeHooks

Invoked before a statement is logged, can alter the log arguments which can impact the log output.

afterHooks

Invoked after a statement is logged, cannot impact the log output.

Built-in Hooks

The following hooks are available in this package and can be used by simply importing and adding them to the beforeHooks and/or afterHooks arrays of your options.

StringifyObjectsHook Applies JSON.stringify on all objects provided as arguments to a logging method.

import { StringifyObjectsHook } from 'vue-logger-plugin'
const options = {
  // ... (other options)
  beforeHooks: [
    StringifyObjectsHook
  ]
}

StringifyAndParseObjectsHook Applies JSON.stringify and JSON.parse on all objects provided as arguments to a logging method.

import { StringifyAndParseObjectsHook } from 'vue-logger-plugin'
const options = {
  // ... (other options)
  beforeHooks: [
    StringifyAndParseObjectsHook
  ]
}

The above are best used as 'before hooks' as they may purposefully alter the log output. This way you are sure you are seeing the value of an object at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change.

Write Your Own Hooks

You can easily write your own hooks to apply custom logic. A hook must implement a run function to handle a log event (an object containing the log level and the array of arguments which were passed to the logging method), and may optionally implement an install function which is invoked during plugin installation (or at the time of logger options application - see Usage section).

For reference, here are the interfaces:

export interface LoggerHook {
  run (event: LogEvent): void
  install? (options: LoggerOptions): void
  props?: { [key: string]: any }
}
export interface LogEvent {
  level: string
  argumentArray: any[]
}
Sample Custom Hook - Leveraging Axios to Send Logs to Server

This is a basic example demonstrating how you could have the logger send log data to a server using an Axios client.

logger/index.js

import VueLogger from 'vue-logger-plugin'
import axios from 'axios'

const ServerLogHook = {
  run (event) {
    axios.post('/log', { severity: event.level, data: event.argumentArray })
  }
}

const options = {
  // ... (other options)
  afterHooks: [
    ServerLogHook
  ]
}

export default new VueLogger(options)

logger/index.ts (TypeScript example, same functionality as above)

import VueLogger, { LoggerOptions, LoggerHook, LogEvent } from 'vue-logger-plugin'
import axios from 'axios'

const ServerLogHook: LoggerHook = {
  run (event: LogEvent) {
    axios.post('/log', { severity: event.level, data: event.argumentArray })
  }
}

const options: LoggerOptions = {
  // ... (other options)
  afterHooks: [
    ServerLogHook
  ]
}

export default new VueLogger(options)

Usage

Once installed, the logger is available within the Vue instance via both $log and $logger (both access the same logger instance and provide the same functionality).

new Vue({
  created: function() {
    const testObject = {
      name: 'test',
      value: 'this is a test object'
    }
    // using $log
    this.$log.debug('Test Message', testObject)
    this.$log.info('Test Message', testObject)
    this.$log.warn('Test Message', testObject)
    this.$log.error('Test Message', testObject)
    this.$log.log('Test Message', testObject)
    // using $logger
    this.$logger.debug('Test Message', testObject)
    this.$logger.info('Test Message', testObject)
    this.$logger.warn('Test Message', testObject)
    this.$logger.error('Test Message', testObject)
    this.$logger.log('Test Message', testObject)
  }
})

As described in the Vue Plugin Install section above, options can be provided to the VueLogger constructor and/or to the Vue.use method for customizing the logging implementation. As well, options can be applied at any time to the logger on the Vue instance via the apply method. This allows for on-demand enabling/disabling of the logger and adjusting log levels as needed from within your components.

this.$log.apply({ level: 'info' }) // applies log level
this.$log.apply({ enabled: false }) // disables logging

License

This project is licensed under the MIT License - see the LICENSE file for details.

1.2.3

3 years ago

1.2.2

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

1.2.0

3 years ago

1.1.3

3 years ago

1.2.1

3 years ago

2.2.1

3 years ago

2.2.0

3 years ago

2.1.4

4 years ago

1.1.2

4 years ago

2.1.3

4 years ago

2.1.2

4 years ago

1.1.1

4 years ago

2.1.1

4 years ago

1.1.0

4 years ago

2.1.0

4 years ago

2.0.0

5 years ago

2.0.0-beta.1

5 years ago

2.0.0-beta.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago