在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。本文将介绍如何在前端项目中制定日志输出规范。

1. 日志等级

首先，我们需要定义不同的日志等级，以便根据消息的重要性进行分类。通常，日志等级从低到高可以分为以下几类：

• DEBUG: 详细的开发时信息，用于调试应用。

• INFO: 重要事件的简要信息，如系统启动、配置等。

• WARN: 系统能正常运行，但有潜在错误的情况。

• ERROR: 由于严重的问题，某些功能无法正常运行。

• FATAL: 非常严重的问题，可能导致系统崩溃。

2. 日志内容

日志内容应该包含足够的信息，以便于开发者理解发生了什么。一个完整的日志消息通常包括：

• 时间戳：精确到毫秒的事件发生时间。

• 日志等级：当前日志消息的等级。

• 消息内容：描述事件的详细信息。

• 错误堆栈：如果是错误，提供错误堆栈信息。

3. 日志格式

日志的格式应该统一，以便于阅读和解析。一个常见的日志格式如下：

复制 1[时间戳] [日志等级] [消息内容] [错误堆栈]

例如：

复制 1[2024-04-01T12:00:00.000Z] [ERROR] Failed to load user data. {stack}

4. 日志输出

在前端项目中，我们通常使用console对象进行日志输出。不同的日志等级可以使用不同的console方法：

• console.debug用于DEBUG级别。

• console.info用于INFO级别。

• console.warn用于WARN级别。

• console.error用于ERROR和FATAL级别。

5. 日志封装

为了更好地控制日志输出，我们可以封装一个日志工具，来统一管理日志输出。以下是一个简单的日志工具实现：

复制 1class Logger {
 2  static log(level, message, error) {
 3    const timestamp = new Date().toISOString();
 4    const stack = error ? error.stack : '';
 5    const formattedMessage = `[${timestamp}] [${level}] ${message} ${stack}`;
 6
 7    switch (level) {
 8      case 'DEBUG':
 9        console.debug(formattedMessage);
10        break;
11      case 'INFO':
12        console.info(formattedMessage);
13        break;
14      case 'WARN':
15        console.warn(formattedMessage);
16        break;
17      case 'ERROR':
18      case 'FATAL':
19        console.error(formattedMessage);
20        break;
21      default:
22        console.log(formattedMessage);
23    }
24  }
25
26  static debug(message) {
27    this.log('DEBUG', message);
28  }
29
30  static info(message) {
31    this.log('INFO', message);
32  }
33
34  static warn(message) {
35    this.log('WARN', message);
36  }
37
38  static error(message, error) {
39    this.log('ERROR', message, error);
40  }
41
42  static fatal(message, error) {
43    this.log('FATAL', message, error);
44  }
45}
46
47// 使用示例
48Logger.info('Application is starting...');
49Logger.error('Failed to load user data', new Error('Network Error'));

6. 日志收集

在生产环境中，我们可能需要将日志发送到后端服务器进行收集和分析。这可以通过AJAX请求或专门的日志服务来实现。例如，我们可以修改Logger工具，添加一个方法来发送日志：

复制 1class Logger {
 2  // ...其他方法
 3
 4 // 根据环境变量判断是否发送日志到后端
 5if (process.env.NODE_ENV === 'production') {
 6  this.sendLog(formattedMessage);
 7}
 8
 9  static sendLog(message) {
10    // 假设我们有一个日志收集的API
11    const logEndpoint = '/api/logs';
12 fetch(logEndpoint, {
13  method: 'POST', 
14  headers: {
15   'Content-Type': 'application/json', 
16  }, body: JSON.stringify({ message }), }).catch((error) => {
17  console.error('Failed to send log', error); 
18 });
19}

7. 日志等级控制

在开发环境中，我们可能希望看到尽可能多的日志输出，以便更好地调试应用。但在生产环境中，为了避免性能损耗和过多的日志信息，我们可能只希望输出WARN和以上等级的日志。我们可以在Logger中添加一个等级控制：

复制 1class Logger {
 2  static level = 'DEBUG'; // 默认为DEBUG级别
 3
 4  static setLevel(newLevel) {
 5    this.level = newLevel;
 6  }
 7
 8  static shouldLog(level) {
 9    const levels = ['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'];
10    return levels.indexOf(level) >= levels.indexOf(this.level);
11  }
12
13  static log(level, message, error) {
14    if (!this.shouldLog(level)) {
15      return;
16    }
17    // ...日志输出逻辑
18  }
19
20  // ...其他方法
21}
22
23// 生产环境中设置日志等级
24if (process.env.NODE_ENV === 'production') {
25  Logger.setLevel('WARN');
26}
27
28// 使用示例
29Logger.debug('This will not be logged in production');
30Logger.warn('This will be logged in production');

8. 日志格式化

为了进一步提高日志的可读性，我们可以添加格式化功能，比如为不同等级的日志添加颜色，或者为错误堆栈提供更好的格式化。

复制 1class Logger {
 2  // ...其他方法
 3
 4  static formatStack(stack) {
 5    if (!stack) return '';
 6    // 格式化错误堆栈的逻辑
 7    return stack.split('\n').map(line => `    at ${line}`).join('\n');
 8  }
 9
10  static log(level, message, error) {
11    // ...日志输出逻辑
12
13    // 格式化错误堆栈
14    if (error) {
15      formattedMessage += `\n${this.formatStack(error.stack)}`;
16    }
17
18    // ...输出逻辑
19  }
20
21  // ...其他方法
22}