报错监控-监控Promise错误

上次咱们聊过了前端监控 JS 执行错误和第三方资源加载异常的监控，那么此次来聊聊如何捕获 Promise 错误。

首先先安利下本身作的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。

Promise 在前端中的使用已经很是广泛了，可是许多开发者或许习惯了链式调用却忘了捕获 Promise 的错误了。

例如：

function forgetCatchError () {
  async()
    .then(() => {
      // code..
    })
    .then(() => console.log('forget catch error!'));
}
复制代码

上面的示例代码中 async() 中和后续的两个 then 中的代码若是出错或者 reject ，错误没有获得处理。

在没有使用 catch 方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。当promise被 reject 而且错误信息没有被处理的时候，会抛出 unhandledrejection，这个错误不会被 window.onerror 和 addEventListener("error") 所监听到。

使用 unhandledrejection

对 unhandledrejection 事件进行监听便可捕捉到未被 catch 的 Promise 错误。

window.addEventListener("unhandledrejection", err => {
  console.log(err.reason)

  err.preventDefault();
}, false);

 // 或者
 window.onunhandledrejection = function(err) {
  console.log(err.reason);
  return true;
}
复制代码

addEventListener 中调用 event 的 preventDefault() 能够让 Promise 的错误不抛送到控制台，在 onunhandledrejection 中则能够使用 return true 来达到相同的效果。