JavaScript中错误正确处理方式小结你用对了吗(3)

// scripts/errorHandlerDom.js
window.addEventListener('error', function (e) {
 var error = e.error;
 console.log(error);
});

此事件处理程序会捕获任何执行上下文中发生的错误。各个目标发生的错误事件会触发各种类型的错误。这种集中在代码中的错误处理是非常激进的。你可以使用菊花链处理方式来处理特定的错误。如果你遵循SOLID原则，就可以采用具有单一目的错误处理方式。这些处理程序可以随时进行注册，解释器会循环执行需要执行的处理程序。代码库可以从try...catch块中释放出来，这也使得调试变得容易。在JavaScript中，把错误处理当作事件处理很重要。

捕获堆栈

在解决问题时，调用堆栈会非常有用，同时浏览器正好可以提供这些信息。虽然堆栈属性不是标准的一部分，但是最新的浏览器已经可以查看这些信息了。

下面是在服务器上记录错误的示例：

// scripts/errorAjaxHandlerDom.js
window.addEventListener('error', function (e) {
 var stack = e.error.stack;
 var message = e.error.toString();
 if (stack) {
  message += '\n' + stack;
 }
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/log', true);
 // Fire an Ajax request with error details
 xhr.send(message);
});

每个错误处理都具有单个目的，这样可以保持代码的DRY原则（目的单一，不要重复自己原则）。

在浏览器中，需要将事件处理添加到DOM。这意味着如果你正在构建第三方库，那么你的事件会与客户端代码共存。window.addEventListener( )会帮你进行处理，同时也不会抹去现有的事件。

这是服务器上日志的截图：

可以通过命令提示符查看日志，但是Windows上，日志是非动态的。

通过日志可以清楚的看到，具体什么情况触发了什么错误。在调试时调用堆栈也会非常有用，所以不要低估调用堆栈的作用。

在JavaScript中，错误信息仅适用于单个域。因为在使用来自不用域的脚本时，将会看不到任何错误详细信息。

一种解决方案是重新抛出错误，同时保留错误消息：

一旦重新启动了错误备

try {
 return fn();
} catch (e) {
 throw new Error(e.message);
}

份，全局错误处理程序就会完成其余的工作。确保你的错误处理处在相同域中，这样会保留原始消息，堆栈和自定义错误对象。

异步处理

JavaScript在运行异步代码时，进行下面的异常处理，会产生一个问题：