JSLog：简洁高效的前端日志管理工具

发布时间：2023-05-20

前端日志是我们开发过程中非常重要的一部分。在生产环境的应用中，通过日志可以快速排查错误、追踪用户行为、优化性能等。JSLog是一款基于JavaScript的前端日志管理工具，它具有简洁高效、配置灵活、易于使用等特点。本文将从多个方面对JSLog进行详细阐述。

一、快速上手

使用JSLog非常简单，只需要引入JS文件，然后在需要记录日志的地方调用JSLog即可：

<script src="jslog.js"></script>
JSLog.debug('这是一条debug信息');
JSLog.info('这是一条info信息');
JSLog.warn('这是一条warn信息');
JSLog.error('这是一条error信息');

JSLog的四个接口分别是debug、info、warn、error，对应不同级别的信息。通过在浏览器控制台中打印JSLog对象可以查看当前日志等级：

console.log(JSLog);
// 输出: {debug: true, info: true, warn: true, error: true, ...}

在需要输出日志的地方，我们只需要调用相应接口即可。默认情况下，debug级别以上的信息都会被输出到控制台。如需更多配置，可以通过JSLog的configure方法进行配置：

JSLog.configure({
    logLevel: 'warn', // 只输出warn及以上级别的信息
    enableStackTrace: true, // 输出堆栈信息
    enableStore: true // 存储日志到localStorage
});

二、配置灵活

除了以上配置外，JSLog还支持以下配置：

1. 输出格式配置

通过JSLog的messageFormat属性可以设置输出格式。默认情况下，输出格式如下：

{
    type: 'debug',
    message: '这是一条debug信息',
    timestamp: 1635287260360
}

我们可以通过自定义函数来设置输出格式：

JSLog.configure({
    messageFormat: function(logItem) {
        return `[${logItem.type}] ${logItem.message} (${new Date(logItem.timestamp)})`;
    }
});

以上代码将会把输出格式改为：'[debug] 这是一条debug信息 (2021-10-27T09:34:20.360Z)'。

2. 控制台输出格式配置

通过JSLog的consoleFormat属性可以设置控制台输出格式。默认情况下，控制台输出格式为：

console.log(`${logItem.type.toUpperCase()}:`, logItem.message);

我们可以通过自定义函数来设置控制台输出格式：

JSLog.configure({
    consoleFormat: function(logItem) {
        return `${logItem.type.toUpperCase()}: ${logItem.message}`;
    }
});

以上代码将会把控制台输出格式改为：'DEBUG: 这是一条debug信息'。

3. 自定义扩展

我们可以通过JSLog的extend方法自定义扩展，扩展内容可以是任意类型的对象、函数等。

JSLog.extend({
    getUserAgent: function() {
        return navigator.userAgent;
    },
    getVersion: function() {
        return '1.0.0';
    }
});
JSLog.info(`UserAgent: ${JSLog.getUserAgent()}`);
JSLog.info(`Version: ${JSLog.getVersion()}`);

以上代码自定义了getUserAgent和getVersion两个扩展方法，在日志中可以直接使用。通过扩展，我们可以把更多的信息记录到日志中，方便排查问题。

三、简洁高效

JSLog本身非常简洁，代码只有几行，非常易于维护。

var JSLog = (function() {
    var levels = ['debug', 'info', 'warn', 'error'];
    var defaultConfig = {
        logLevel: 'debug',
        enableStackTrace: false,
        enableStore: false,
        messageFormat: function(logItem) {
            return logItem;
        },
        consoleFormat: function(logItem) {
            console.log(`${logItem.type.toUpperCase()}:`, logItem.message);
        }
    };
    var config = defaultConfig;
    var logs = [];
    function configure(options) {
        config = Object.assign({}, defaultConfig, options);
    }
    function extend(obj) {
        Object.assign(JSLog, obj);
    }
    function log(type, message, stackTrace) {
        var index = levels.indexOf(config.logLevel);
        if (levels.indexOf(type) >= index) {
            var logItem = {
                type: type,
                message: message,
                timestamp: Date.now()
            };
            if (stackTrace && config.enableStackTrace) {
                logItem.stackTrace = stackTrace;
            }
            config.consoleFormat(config.messageFormat(logItem));
            if (config.enableStore) {
                logs.push(logItem);
                localStorage.setItem('JSLog', JSON.stringify(logs));
            }
        }
    }
    return {
        debug: function(message, stackTrace) {
            log('debug', message, stackTrace);
        },
        info: function(message, stackTrace) {
            log('info', message, stackTrace);
        },
        warn: function(message, stackTrace) {
            log('warn', message, stackTrace);
        },
        error: function(message, stackTrace) {
            log('error', message, stackTrace);
        },
        configure: configure,
        extend: extend
    };
})();

JSLog的代码非常简洁，但又充分考虑了灵活性和可扩展性。通过配置，可以满足不同场景下的需求；通过扩展，可以把更多的信息记录到日志中，方便排查问题。

四、总结

JSLog是一款简洁高效、配置灵活、易于使用的前端日志管理工具。它的代码简洁明了，通过配置和扩展，可以满足不同场景下的需求。在开发过程中，JSLog可以帮助我们快速排查错误、追踪用户行为、优化性能等，是前端开发过程中不可或缺的工具之一。

推荐文章