Lokalo NPM | npm.io

Lokalo

npm.io

Client side logging utility that logs to session or local storage. This is useful when you are tracking down client side bugs among other things. At a later time you can create a view where the user can upload these logs automatically. Perhpaps then forward on to Graylog or some other logging service.

Gettin Started

Install Lokalo in your dependencies.

npm install lokalo

yarn add lokalo

Using Default Instance

For ease of use Lokalo has a default instance you can use which sets the log level to error, meaning only logger.log or logger.error methods will be logged. This is generally what you want as other log levels are more development related. If you wish to change this simply create your own instance. The default instance also initializes with the namespace lokalo. This is the name the log messages will be stored under in your storage item.

import logger from 'lokalo';
logger.log('some message'); // this will always be displayed.
logger.fatal('some elevated error message'); // or you can log an Error instance.
logger.error('some error'); // or you can log an Error instance.
logger.warn('log a warning');
logger.info('log an info message');
logger.debug('shown when debug is enabled');

Creating Instance

You can create your own instance of Lokalo.

import { Lokalo } from 'lokalo';
const logger = new Lokalo({
  namespace: 'your_namespace',
  level: 'debug', // can be 'error', 'warn', 'info', 'debug'
});

Options

Options can only be provided when defining your own custom instance. For more information and details of each implementation see Generated Docs

Child Logger

You can also create child loggers. To do so simply call the child method and provide the child namespace. The parent will be set automatically.

import logger from 'lokalo';
const child = logger.child('admin');

Default Log Styles

You can provide a named color, rgb or hex color that Lokalo will use when displaying message in your browser's inspector.

export const STYLES = {
  inherit: 'color: inherit',
  dim: 'color: #666',
  log: 'color: lightslategray',
  fatal: 'color: red',
  error: 'color: firebrick',
  warn: 'color: gold',
  info: 'color: deepskyblue',
  debug: 'color: magenta'
};