# Logging

In Vue Storefront we're providing all the debugging information, warnings, and errors from composables out of the box so you won't miss anything that happens inside your application. In this document, you will learn how to use our logger in your application and how to connect it with external services.

# Using logger in your app

To make use of the Vue Storefront logger, simply import it from the core and use one of 4 available types of messages

import { Logger } from '@vue-storefront/core';

Logger.error('error message');
Logger.info('info message');
Logger.warn('warn message');
Logger.debug('debug message');

# Changing verbosity

Configuration of logger happens through the logger property of @vue-storefront/nuxt module.

You can set the verbosity level which tells the app what do you want to log and what communications you want to ignore. By default, we have the following verbosity levels:

  • debug - log everything, including debug calls, information, warnings, and errors (all of the logger functions can be called),
  • info - log information, warnings, and errors (debug function calling is skipped),
  • warn - log warnings and errors (debug and info functions are skipped),
  • error - log only errors (debug, warn and info functions are skipped),
  • none - don't log anything.
[
  '@vue-storefront/nuxt',
  {
    logger: {
      verbosity: 'error'
    }
  }
];

If not explicitly changed, logging level depends on the current environment variable NODE_ENV:

  • development or dev defaults to warn,
  • production or prod defaults to error,
  • test defaults to none,
  • any other defaults to warn

# Writing custom loggers

By default, we're printing all the events happening in the app in the console but you can easily write a new logger and use a third-party library (like consola (opens new window)) or pass the logs to the external service like Sentry (opens new window)

To override the default logger, pass a function to the logger.customLogger property of @vue-storefront/nuxt module. This function returns the logger object and as an argument, you have access to the verbosity level:

[
  '@vue-storefront/nuxt',
  {
    logger: {
      verbosity: 'error',
      customLogger: (verbosity) => {
        console.log('Current verbosity level is:', verbosity);
        return {
          debug: (message: any, ...args) =>
            console.debug('[VSF][debug]', message, ...args),
          info: (message: any, ...args) =>
            console.info('[VSF][info]', message, ...args),
          warn: (message: any, ...args) =>
            console.warn('[VSF][warn]', message, ...args),
          error: (message: any, ...args) =>
            console.error('[VSF][error]', message, ...args)
        };
      }
    }
  }
];
Configuring logger outside Vue Storefront Nuxt module

If for some reason you can't configure logger through @vue-storefront/nuxt module you can explicitly use registerLogger function:

import { registerLogger } from '@vue-storefront/core';

const myLogger = {
  debug: (message: any, ...args) =>
    console.debug('[VSF][debug]', message, ...args),
  info: (message: any, ...args) =>
    console.info('[VSF][info]', message, ...args),
  warn: (message: any, ...args) =>
    console.warn('[VSF][warn]', message, ...args),
  error: (message: any, ...args) =>
    console.error('[VSF][error]', message, ...args)
};

const verbosity = 'error';

registerLogger(myLogger, verbosity);