Introduction to Loglevel

Loglevel is a minimal lightweight JavaScript logging library that provides robust logging capabilities. It allows developers to log messages at different levels such as trace, debug, info, warn, and error, providing granular control over logging output.

API Explanations and Examples

Basic Setup

To start using loglevel, you first need to install it via npm:

 
  npm install loglevel
 

Then, you can import loglevel into your project:

 
  import log from 'loglevel';
 

Setting Log Level

The log level determines the severity of messages that will be logged. You can set it using:

 
  log.setLevel('info');
 

The available log levels are trace, debug, info, warn, and error.

Logging Messages

Trace

 
  log.trace('This is a trace message.');
 

Debug

 
  log.debug('This is a debug message.');
 

Info

 
  log.info('This is an info message.');
 

Warn

 
  log.warn('This is a warning message.');
 

Error

 
  log.error('This is an error message.');
 

Enabling/Disabling All Logging

You can disable all logging by setting the log level to ‘silent’:

 
  log.setLevel('silent');
 

Get Current Log Level

 
  console.log(log.getLevel());
 

Persisting Log Level

You can persist the log level across page reloads using localStorage:

 
  log.enableAll();
  log.persist();
 

Customizing Prefixes

For more advanced use cases, you may want to add prefixes to your log messages:

 
  log.methodFactory = function (methodName, logLevel, loggerName) {
    var originalFactory = log.methodFactory,
        rawMethod = originalFactory(methodName, logLevel, loggerName);

    return function (message) {
      rawMethod(loggerName + "::" + methodName + ": " + message);
    };
  };
  log.setLevel(log.levels.INFO);
 

Example Application Using Loglevel

Here’s an example of how to incorporate loglevel into a simple JavaScript application:

 
  import log from 'loglevel';

  function fetchData() {
    log.info('Fetching data from the server...');
    // Simulating data fetching
    setTimeout(() => {
      log.debug('Data fetched successfully.');
    }, 2000);
  }

  function processData() {
    log.info('Processing data...');
    // Simulating data processing
    try {
      // Simulate possible error during processing
      throw new Error('Processing error');
    } catch (error) {
      log.error('Error occurred during data processing:', error);
    }
  }

  document.getElementById('fetchDataBtn').addEventListener('click', fetchData);
  document.getElementById('processDataBtn').addEventListener('click', processData);

  // Set the initial log level to debug for development
  log.setLevel('debug');
 

This application logs messages at different levels to inform the developer of the state of the application during runtime.

Hash: 2e3a8c86b2c89ddcc3a522b0ba0eef86053cc80b9be5ae2a38b2d506b100f51d