在全局反應應用程序中從異步 function 中捕獲錯誤

Question

我正在嘗試添加一個全局錯誤處理程序，以便我可以捕獲所有錯誤並向用戶顯示一些通知。

window.addEventListener("unhandledrejection", e => {
  console.log("unhandledrejection", e);
});

window.addEventListener("error", e => {
  console.log("error", e);
});

但這似乎無法從異步函數中捕獲錯誤：

function App() {
  async function asyncAction() {
    throw new Error("async error"); // This error can't be caught globally
  }
  function syncAction() {
    throw new Error("sync error");
  }
  return (
    <div className="App">
      <button onClick={asyncAction}>async</button>
      <button onClick={syncAction}>sync</button>
    </div>
  );
}

代碼沙箱在這里： CodeSandbox

Answer 1

您必須等待異步 function 返回的 promise 的結果，否則錯誤不會傳播到您的全局偵聽器。

然而，異步函數仍然有可能錯誤地吞下錯誤。 以並行異步 function 為例。 如果它沒有等待（或返回） Promise.all([]) 調用的結果，則不會傳播任何錯誤。 雖然 parallelPromise 示例看起來很簡單，但它根本不處理錯誤。 這樣做需要類似的返回 Promise.all([])。

您可以在 MDN web 文檔中閱讀更多信息。

在您的代碼沙箱中，我可以通過重寫 asyncAction function 來捕獲異步錯誤：

async function asyncAction() {

let p = new Promise(()=>{throw new Error("async error"); });

p.then().catch();
}