Log + Ajax, front-end log solution.

Lajax tries to address these issues:

  • There is no log in the front end, or there is no persistent log, which makes it difficult to trace and analyze online problems.

  • Even when front-end logging libraries are used, they often rely on manual logging by developers, which is unreliable.

  • Exceptions that are not caught in production are often ignored;

  • Mobile browsers cannot see logs printed by console. In the past, they used alert or vConsole to locate problems, but the defect was that they needed to modify the source code specifically for this purpose.

  • For web pages dynamically generated by the server, the original server logs of the system cannot be associated with front-end logs.

features

  • Manually record logs at info, WARN, and ERROR levels.

  • The logs are printed in an optimized format on the browser console;

  • Automatically log uncaught script errors;

  • Automatically logging uncaught Promise exceptions;

  • Automatically log the start and completion of ajax requests;

  • Automatically generate unique id based on request to facilitate log location;

  • Logs are periodically and in batches sent to the configured log server.

  • Good compatibility and exception handling mechanism.

Quick start

The basic use

//Pass in the interface server address for instantiation
const logger = new Lajax('https://path/to/your/log/server');

//Record an information log
const num = parseInt(Math.random(a)* 100);
logger.info('This is an INFO log'.'Generates a random number:', num);

//Log a warning log
logger.warn('This is a warning log!');

try {
    JSON.parse(undefined);
} catch(err) {
    //Log an error
    logger.error('This is an error log'.'An error was caught:', err);
}Copy the code

See the Api for detailed documentation.

Api

info(arg1, arg2, … args)

Instance method, record an information log, can pass in any type, any number of parameters.

const num = parseInt(Math.random(a)* 100);
logger.info('This is an INFO log'.'Generates a random number:', num);Copy the code

error(arg1, arg2, … args)

Instance method, log an error log, can pass in any type, any number of parameters.

try {
    JSON.parse(undefined);
} catch(err) {
    //Log an error
    logger.error('This is an error log'.'An error was caught:', err);
}Copy the code

colorEnum{… }

Static object, enumeration of log colors. If you want to customize log colors, you can modify the properties of this object before calling instance methods. Default object:

Lajax.colorEnum = {
    / * *
* Message log color, sapphire blue by default
     * /
    info: 'DodgerBlue'./ * *
* Warning log color, orange by default
     * /
    warn: 'orange'./ * *
Error log color, red by default
     * /
    error: 'red'./ * *
* Ajax group color, purple by default
     * /
    ajaxGroup: '# 800080'./ * *
* Color of sending logs successfully. The default color is green
     * /
    sendSuccess: 'green'./ * *
* Description text color, pink by default
     * /
    desc: '#d30775',}Copy the code

Request id

Each log sent to the server contains a request ID. In the same request, all logs must have the same request ID. In different requests, the request ID of the log must be different.

The main purpose of this request ID is to enable you to pinpoint all relevant logs for a particular request on the server side.

Request ID generation logic:

  • If your page is dynamically generated on the server side and you want to concatenate the server side logs with the front-end logs, you can generate a request ID on the server side and send it to the front-end. Lajax will try to find the request ID from
    or from window._reqID in turn;

  • If the above search fails, your page is considered a pure front-end page, and Lajax will generate a unique time-based ID as the request ID during initialization, which will be included in all logs before the page is unloaded.

test

Access the./test/index.html page locally to run the test.