在全局反应应用程序中从异步 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();
}