报错监控-监控Promise错误

发表于 |

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

首先先安利下自己做的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。

Promise 在前端中的使用已经非常普遍了，但是许多开发者或许习惯了链式调用却忘了捕获 Promise 的错误了。

例如：

1
2
3
4
5
6
7
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 错误。

1
2
3
4
5
6
7
8
9
10
11
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 来达到相同的效果。

hi you can see me