都應該會的前端代碼規範 - 日誌打印規範

在前端開發中，隨着項目迭代升級，日誌打印逐漸風格不一，合理的日誌輸出是監控應用狀態、調試代碼和跟蹤用戶行爲的重要手段。一個好的日誌系統能夠幫助開發者快速定位問題，提高開發效率。本文將介紹如何在前端項目中制定日誌輸出規範。

1. 日誌等級

首先，我們需要定義不同的日誌等級，以便根據消息的重要性進行分類。通常，日誌等級從低到高可以分爲以下幾類：

2. 日誌內容

日誌內容應該包含足夠的信息，以便於開發者理解發生了什麼。一個完整的日誌消息通常包括：

3. 日誌格式

日誌的格式應該統一，以便於閱讀和解析。一個常見的日誌格式如下：

[時間戳] [日誌等級] [消息內容] [錯誤堆棧]

例如：

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

4. 日誌輸出

在前端項目中，我們通常使用 console 對象進行日誌輸出。不同的日誌等級可以使用不同的 console 方法：

5. 日誌封裝

爲了更好地控制日誌輸出，我們可以封裝一個日誌工具，來統一管理日誌輸出。以下是一個簡單的日誌工具實現：

class Logger {
  static log(level, message, error) {
    const timestamp = new Date().toISOString();
    const stack = error ? error.stack : '';
    const formattedMessage = `[${timestamp}] [${level}] ${message} ${stack}`;

    switch (level) {
      case 'DEBUG':
        console.debug(formattedMessage);
        break;
      case 'INFO':
        console.info(formattedMessage);
        break;
      case 'WARN':
        console.warn(formattedMessage);
        break;
      case 'ERROR':
      case 'FATAL':
        console.error(formattedMessage);
        break;
      default:
        console.log(formattedMessage);
    }
  }

  static debug(message) {
    this.log('DEBUG', message);
  }

  static info(message) {
    this.log('INFO', message);
  }

  static warn(message) {
    this.log('WARN', message);
  }

  static error(message, error) {
    this.log('ERROR', message, error);
  }

  static fatal(message, error) {
    this.log('FATAL', message, error);
  }
}

// 使用示例
Logger.info('Application is starting...');
Logger.error('Failed to load user data', new Error('Network Error'));

6. 日誌收集

在生產環境中，我們可能需要將日誌發送到後端服務器進行收集和分析。這可以通過 AJAX 請求或專門的日誌服務來實現。例如，我們可以修改 Logger 工具，添加一個方法來發送日誌：

class Logger {
  // ...其他方法

 // 根據環境變量判斷是否發送日誌到後端
if (process.env.NODE_ENV === 'production') {
  this.sendLog(formattedMessage);
}

  static sendLog(message) {
    // 假設我們有一個日誌收集的API
    const logEndpoint = '/api/logs';
 fetch(logEndpoint, {
  method: 'POST', 
  headers: {
   'Content-Type': 'application/json', 
  }, body: JSON.stringify({ message }), }).catch((error) => {
  console.error('Failed to send log', error); 
 });
}

7. 日誌等級控制

在開發環境中，我們可能希望看到儘可能多的日誌輸出，以便更好地調試應用。但在生產環境中，爲了避免性能損耗和過多的日誌信息，我們可能只希望輸出WARN和以上等級的日誌。我們可以在Logger中添加一個等級控制：

class Logger {
  static level = 'DEBUG'; // 默認爲DEBUG級別

  static setLevel(newLevel) {
    this.level = newLevel;
  }

  static shouldLog(level) {
    const levels = ['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'];
    return levels.indexOf(level) >= levels.indexOf(this.level);
  }

  static log(level, message, error) {
    if (!this.shouldLog(level)) {
      return;
    }
    // ...日誌輸出邏輯
  }

  // ...其他方法
}

// 生產環境中設置日誌等級
if (process.env.NODE_ENV === 'production') {
  Logger.setLevel('WARN');
}

// 使用示例
Logger.debug('This will not be logged in production');
Logger.warn('This will be logged in production');

8. 日誌格式化

爲了進一步提高日誌的可讀性，我們可以添加格式化功能，比如爲不同等級的日誌添加顏色，或者爲錯誤堆棧提供更好的格式化。

class Logger {
  // ...其他方法

  static formatStack(stack) {
    if (!stack) return '';
    // 格式化錯誤堆棧的邏輯
    return stack.split('\n').map(line => `    at ${line}`).join('\n');
  }

  static log(level, message, error) {
    // ...日誌輸出邏輯

    // 格式化錯誤堆棧
    if (error) {
      formattedMessage += `\n${this.formatStack(error.stack)}`;
    }

    // ...輸出邏輯
  }

  // ...其他方法
}

最後

通過以上步驟，我們可以建立一個前端項目的日誌輸出規範。一個好的日誌系統應該是靈活的，能夠根據不同的環境和需求進行適當的調整。日誌是幫助我們更好地理解和維護應用的工具，合理的使用和管理日誌對於任何規模的前端項目都是非常重要的。

作者：南城 FE

https://juejin.cn/post/7355321162530914338

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/f0j-LXhT3c4oBEm9QuCL2g

猜你喜歡