JavaScript 错误日志

在Web开发过程中，错误是不可避免的。作为开发者，我们需要找到一种有效的方式来捕获、记录和分析这些错误，这就是错误日志（Error Logging）发挥作用的地方。本文将带你了解JavaScript中的错误日志记录技术，帮助你构建更加健壮的Web应用。

什么是错误日志？

错误日志是对程序运行时发生的异常情况的记录。它包含了错误发生的时间、类型、位置以及上下文信息，有助于开发者快速定位和解决问题。

在JavaScript中，错误日志通常包括：

• 错误类型（如SyntaxError、TypeError等）
• 错误消息
• 错误发生的文件名
• 行号和列号
• 调用栈信息

基础错误日志方法

console方法

JavaScript提供了一系列控制台方法用于记录信息：

javascript

// 基本日志
console.log("普通日志信息");

// 信息级别日志
console.info("信息级别消息");

// 警告级别日志
console.warn("警告消息");

// 错误级别日志
console.error("发生了错误!");

// 显示对象结构
console.dir({name: "对象结构", details: "完整显示"});

// 分组日志
console.group("分组示例");
console.log("分组内的第一条消息");
console.log("分组内的第二条消息");
console.groupEnd();

// 计时功能
console.time("操作耗时");
// 执行一些操作
for(let i=0; i<1000000; i++) {}
console.timeEnd("操作耗时"); // 输出：操作耗时: 2.781ms

使用try-catch记录错误

结合try-catch语句，可以更有效地捕获和记录错误：

javascript

try {
  // 尝试执行可能出错的代码
  const result = someUndefinedFunction();
} catch (error) {
  // 记录错误
  console.error("捕获到错误:", error.message);
  console.error("错误堆栈:", error.stack);
}

创建自定义错误日志系统

对于更复杂的应用，你可能需要创建自定义的错误日志系统：

javascript

class ErrorLogger {
  constructor() {
    this.logs = [];
  }
  
  log(error, context = {}) {
    const errorInfo = {
      message: error.message,
      stack: error.stack,
      timestamp: new Date(),
      context: context,
      userAgent: navigator.userAgent
    };
    
    this.logs.push(errorInfo);
    console.error("错误已记录:", errorInfo);
    
    // 这里可以添加将错误发送到服务器的代码
  }
  
  getLogs() {
    return this.logs;
  }
}

// 使用方法
const logger = new ErrorLogger();

try {
  throw new Error("这是一个测试错误");
} catch (error) {
  logger.log(error, { user: "testUser", action: "testAction" });
}

全局错误处理

JavaScript允许我们设置全局错误处理程序，捕获未被try-catch块捕获的错误：

javascript

window.onerror = function(message, source, lineno, colno, error) {
  console.error("全局错误捕获:");
  console.error("消息:", message);
  console.error("源文件:", source);
  console.error("行号:", lineno);
  console.error("列号:", colno);
  console.error("错误对象:", error);
  
  // 返回true表示该错误已被处理
  return true;
};

Promise错误处理

对于Promise相关的未捕获错误，可以使用unhandledrejection事件：

javascript

window.addEventListener('unhandledrejection', function(event) {
  console.error('未处理的Promise拒绝:', event.reason);
  
  // 阻止默认处理（比如控制台警告）
  event.preventDefault();
});

实用错误日志库

虽然我们可以构建自己的错误日志系统，但在实际项目中，通常会使用成熟的错误日志库：

1. Sentry

javascript

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://your-dsn@sentry.io/project-id',
  // 其他配置选项
});

try {
  thisWillCauseAnError();
} catch (error) {
  Sentry.captureException(error);
}

2. TrackJS

javascript

// 通常通过CDN引入
trackJs.track('自定义错误消息');

// 或捕获并报告错误
try {
  // 有问题的代码
} catch (error) {
  trackJs.track(error);
}

实际案例：电子商务网站的错误日志

考虑一个电子商务网站，用户在结账时遇到问题：

javascript

class ShoppingCart {
  constructor() {
    this.items = [];
    this.logger = new ErrorLogger();
  }
  
  addItem(item) {
    try {
      if (!item.id || !item.price) {
        throw new Error("商品缺少必要信息");
      }
      this.items.push(item);
      return true;
    } catch (error) {
      this.logger.log(error, {
        action: "addItem",
        itemData: JSON.stringify(item),
        cartState: JSON.stringify(this.items)
      });
      return false;
    }
  }
  
  checkout() {
    try {
      if (this.items.length === 0) {
        throw new Error("购物车为空");
      }
      // 结账逻辑...
      return { success: true };
    } catch (error) {
      this.logger.log(error, {
        action: "checkout",
        cartItems: this.items.length,
        totalValue: this.items.reduce((sum, item) => sum + item.price, 0)
      });
      return { success: false, error: error.message };
    }
  }
}

// 使用示例
const cart = new ShoppingCart();
cart.addItem({ id: 1, name: "T-shirt", price: 19.99 });
cart.addItem({ name: "Broken item" }); // 会触发错误日志
const checkoutResult = cart.checkout();

错误日志的最佳实践

1. 分级记录：根据严重性对错误进行分级（调试信息、警告、错误、严重错误）。

2. 上下文信息：记录充分的上下文信息，如用户ID、会话信息、页面URL等。

3. 避免过度记录：不要记录敏感信息（密码、信用卡等），也不要记录太多导致性能问题。

4. 聚合错误：对相似错误进行分组，避免重复日志。

5. 错误分析：定期分析错误日志，发现模式和常见问题。

错误日志格式化

为了使错误日志更易读，可以使用JSON格式或结构化格式，例如：

javascript

{
  "level": "ERROR",
  "timestamp": "2023-10-15T14:30:45.123Z",
  "message": "Failed to load user data",
  "userId": "12345",
  "url": "/dashboard",
  "stack": "Error: Failed to load user data at getUserData (/app.js:42:5)..."
}

错误日志的服务端存储

在实际应用中，我们通常需要将客户端错误发送到服务器存储：

javascript

class ServerErrorLogger {
  static async logToServer(error, context = {}) {
    try {
      const response = await fetch('/api/errors/log', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: error.message,
          stack: error.stack,
          context: context,
          timestamp: new Date(),
          userAgent: navigator.userAgent
        })
      });
      
      return response.ok;
    } catch (e) {
      // 即使错误日志记录失败，也不应该中断用户体验
      console.error("无法将错误发送到服务器:", e);
      return false;
    }
  }
}

// 使用方法
try {
  // 有问题的代码
  document.querySelector('#non-existent').innerHTML = 'Hello';
} catch (error) {
  ServerErrorLogger.logToServer(error, {
    page: window.location.pathname,
    userId: currentUser?.id
  });
}

总结

有效的错误日志记录是构建高质量JavaScript应用的关键部分。通过适当的错误日志系统，你可以：

• 快速发现并修复问题
• 提高应用的稳定性
• 改善用户体验
• 获得有关应用性能和问题的洞察

随着应用规模的增长，从简单的console.error()到全面的错误监控系统的过渡是必要的。错误日志是连接开发和生产环境的重要工具，帮助你理解用户实际使用应用时遇到的问题。

练习与资源

练习

1. 创建一个简单的错误日志类，能记录错误消息、时间戳和错误堆栈。
2. 实现一个全局错误处理，捕获页面上所有未处理的错误并记录它们。
3. 扩展你的错误日志器，添加将错误发送到服务器的功能。

推荐资源

• MDN Web Docs: Console
• JavaScript Errors & Exceptions Handling
• Sentry Documentation
• Understanding the JavaScript Error Object

记住，良好的错误日志实践可以大大减少调试时间，并帮助你构建更健壮的应用程序。随着你的项目变得更加复杂，投资一个好的错误日志系统将会带来巨大的回报。