WSI Logger Documentation

The WSI Logger gives the user a configurable interface to store logs for errors, warnings, info, etc in the browser's localStorage while periodically sending the logs to a backend endpoint to persist to a database for further evaluation. This solution for storing and persisting logs avoids decreased performance in the browser by refraining from sending logs to an endpoint every time one occurs. The WSI Logger also prevents overloading the backend database by only periodically sending logs in batches.

The WSI Logger is exported as an instance of a class; therefore, it should be imported as:

import Logger from 'wsi-logger'

Each time you import the Logger, it is an instance of the Logger library class.

Usage

Local Storage to Java Service Instantiation

Call the setLogToServiceTimer method one time in your application to configure how you want the logs to be persisted to

Logger.setLogToServiceTimer(url, httpMethod, time, batchSize, logOn)

Parameters:

• url (String) - HTTP endpoint to send the logs
• httpMethod (String) - HTTP request method (e.g. 'PUT', 'POST',...)
• time (Number) - The period of time between each HTTP request (in milliseconds)
• batchSize (Number) - Maximum length of JSON array of logs sent in request (maximum amount of logs sent per request)
• logOn (Boolean) - True if Logger should set interval to send logs as a request to the endpoint specified by url

LogLevel

Each instance of the Logger library class maintains its own level. The level is defaulted as LogLevel.All meaning that every level of log will be stored in localStorage. The log levels are as follows:

const LogLevel = {
    Off: 0,
    All: 1,
    Debug: 2,
    Info: 3,
    Warn: 4,
    Error: 5,
    Fatal: 6
}

To use the Logger library, each log level has its own method (Logger.error(), Logger.warn(), Logger.info(),...). If the log level of the called method is greater than or equal to the Logger class' internal this.level and this.level is not equal to LogLevel.Off, the log will be stored in localStorage. To configure the Logger's internal this.level value, use the Logger.setLevel() method described in the Additional Logger Configurations section.

Logger Methods

As mentioned prior, each log level shown above (beside Off) has its own method which are used to capture the logs. The usage for each level is as follows:

Logger.error(logOrigin, msg, optionalParams...)

Parameters:

• logOrigin (String) - Component, method, function, etc where the log originates from
• msg (String or Object) - Information that is relevant to the log that is helpful for analyzing the log (API request, API response, etc)
• optionalParams - Any additional information that you wish to store about the log

Note: Logger.error() above can be replaced with Logger.all(), Logger.debug(), Logger.info(), Logger.warn(), Logger.fatal() with the same parameters.

Logger Object

The logger object that is created for each log then stored in localStorage is defaulted to a certain format; however, the Logger library has methods to configure the object. An example of the default logger object is as follows:

{
    browserInfo: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36",
    date: "2020-07-22T15:51:55.273Z",
    extraInfo: [],
    level: "Error",
    message: {},
    user: {}
}

The extraInfo property holds an array of the optionalParams arguments from the logger methods. The message property holds the msg object from the logger methods. By default, the user property object is grabbed from the currentUser property in localStorage or set to {} if the currentUser property is not set in localStorage. To set a custom user object, use the Logger.setUser() method as described below.

Additional Logger Configurations

Logger.setUser(user)

Used to set the this.user member of the Logger class, which is used to set the user property in the logger object. To ensure all instances of the Logger class will set the user property to the new user object, be sure to call Logger.setUser() in each file the Logger is imported.

Parameters:

• user (Object) - The object that contains the information about the user of the application

Logger.setLevel(level)

Used to set the this.level member of the Logger class. As explained above, logs will be stored in localStorage if the log level associated with the logger method being used is >= this.level and this.level !== LogLevel.Off. Therefore, it can be useful to set the Logger class' internal log level to only store logs of a certain level in localStorage.

Parameters:

• level (Number) - Level to set the Logger's internal level. Ranges from 0-6 (shown in LogLevel section)

Logger.clearLogs()

If you need to clear the logs stored in localStorage for any reason, use the Logger.clearLogs() method to do so. Since the logs are stored in the logs property, the Logger.clearLogs() method simply removes the logs item from localStorage.

Design

The main Logger class for the Logger library is located in the Logger.js file. In the Logger class's constructor, the LogLocal() function (located in LogLocal.js) is called and set to this.localLogger for use throughout the Logger class. The LogLocal() functions are separate from the main Logger class to allow for easy organization of other logging services apart from localStorage(log to console, directly to backend, etc).

LogLocal

LogLocal is a function that returns a JS object holding