Fifo-logger NPM

fifo-logger

Simple event logger for the browser and node.js inspired by pino.

By default it will keep the 10'000 last events that can easily be retrieved and filtered.

Installation

$ npm i fifo-logger

Simple usage

import { FifoLogger } from 'fifo-logger';

const logger = new FifoLogger({
  limit: 1000, // default value
  level: 'info', // by default we will not log the level under 'info' (trace and debug)
});

logger.trace('a trace');
logger.debug('a debug');
logger.info('an info');
logger.warn('a warning');
logger.error('a error');
logger.fatal('fatal');

// you have also the possibility to log an object or object + message

logger.warn({ a: 1, b: 2, c: 'Hello' }, 'a warning');

// errors can also be directly added to the logger

logger.fatal(new Error('a fatal error'));

// to get the logs

const logs = logger.getLogs();

Logging in a specific context

A child logger may be created in order to store specific related logs. Each logger or child logger will receive a specific UUID.

import { FifoLogger } from 'fifo-logger';

const logger = new FifoLogger();
logger.info('an info');

const childLogger = logger.child();
childLogger.info('from child');

const grandChildLogger = childLogger.child();
grandChildLogger.info('from grandchild');

const anotherLogger = logger.child();
anotherLogger.info('from another child');

console.log(logger.getLogs()); // 1 element
console.log(logger.getLogs({ includeChildren: true })); // 4 elements
console.log(childLogger.getLogs()); // 1 element
console.log(childLogger.getLogs({ includeChildren: true })); // 3 elements

Callback when new logs are added

If you need to update the log list based on new addition you can add the onChange callback

const logger = new FifoLogger({
  onChange: (log, logs, info) => {
    console.log(log, logs, info);
  },
});
logger.info('Hello world');

// info contains 'depth' starting at 1

Callback with throttling

Libraries may be quite verbose and you can throttle the callback using such a code

import { throttle } from 'throttle-debounce';

import { FifoLogger } from 'fifo-logger';

let results: any = [];

let throttleFunc = throttle(100, (log, logs) => {
  results.push(log.message);
  results.push(logs.length);
});

const logger = new FifoLogger({
  onChange: throttleFunc,
});

logger.info('first info');
logger.info('second info');

const start = Date.now();
while (Date.now() - start < 120);

logger.info('an info after 120ms');

console.log(results);
// ['first info', 1, 'an info after 120ms', 3]

In the browser

<html>
  <head>
    <script
      src="https://www.lactame.com/lib/fifo-logger/0.3.0/fifo-logger.js"
      type="text/javascript"
    ></script>
    <script Logger="fifo-logger" type="text/javascript">
      const logger = new FifoLogger.FifoLogger({
        onChange: (log, logs) => {
          console.log(logs);
          document.getElementById('logs').innerHTML =
            '<table><tr><th>Level</th><th>Message</th></tr>' +
            logs
              .map((log) => {
                return `<tr><td>${log.level}</td><td>${log.message}</td></tr>`;
              })
              .join('') +
            '</table>';
        },
      });
    </script>
  </head>
  <body>
    <button onclick="logger.warn('warning')">Warning</button>
    <div id="logs"></div>

    <script>
      logger.info('Hello World!');
      logger.error('This is an error');
    </script>
  </body>
</html>