报错监控-监控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.onerroraddEventListener("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 来达到相同的效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注