報錯監控-監控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 來達到相同的效果。