没有回溯的 JavaScript 日志错误

当 JavaScript 程序出现错误时，我们通常会使用 console.log() 来输出错误信息，以帮助我们找出问题所在。但是，当程序出现复杂错误时，这种方法可能无法满足我们的需求。

本文将介绍一种更高效、更准确的 JavaScript 错误日志记录方法，该方法不需要回溯并且能够捕获更详细的上下文信息。

方法

在 JavaScript 代码中增加一行如下所示的代码即可实现该方法：

window.addEventListener('error', function (event) {
  console.error('Uncaught error:', event.error);
  console.info('Error info:', {
    url: location.href,
    line: event.lineno,
    col: event.colno,
    stack: event.error.stack || 'none'
  });
});

当 JavaScript 代码出现错误时，上述代码会自动记录错误信息和上下文信息，并将其输出到浏览器控制台。错误信息包括错误对象本身，而上下文信息则包括出错页面 URL、行号、列号以及堆栈信息（如果有的话）。

需要注意的是，上述代码只会记录捕获不到的错误，即未被 try-catch 语句块包裹的错误。如果错误已经被捕获，那么该方法就无法生效。

示例

下面是一个在 10 秒钟内每秒钟执行一次的定时器，它包含了一个错误：

setInterval(function () {
  var i = 0;
  i = i + 1;
  if (i === 3) {
    throw new Error('Boom!');
  }
  console.log(i);
}, 1000);

通过上述方法记录这个错误后，我们可以在浏览器控制台中看到以下输出：

Uncaught error: Error: Boom!
Error info: {url: "http://localhost:8080/", line: 8, col: 11, stack: "Error: Boom!\n    at eval (eval at <anonymous> (http://localhost:8080/:8:11), <anonymous>:5:5)\n    at eval (eval at <anonymous> (http://localhost:8080/:8:11), <anonymous>:8:3)"}

输出中包括了错误信息和上下文信息，并且堆栈信息也被正确捕获。

总结

本文介绍了一种高效、准确的 JavaScript 错误日志记录方法，它可以帮助我们快速诊断 JavaScript 代码中的错误。如果您正在编写复杂的 JavaScript 应用程序，那么这种方法一定会对您有所帮助。