React中异步函数抛出的错误无法捕获，该如何解决？

问题核心在于你调用auth.signIn(data)时没有添加await关键字。signIn是用async声明的异步函数，会返回一个Promise对象——当函数内部抛出错误时，这个Promise会进入rejected状态。如果不通过await等待Promise完成，外层的try/catch无法捕获Promise的rejection，错误会变成未处理的Promise拒绝，最终导致程序崩溃。

具体修复方案 #

修改调用代码，给auth.signIn(data)加上await，同时确保调用它的函数也是async类型：

// 确保当前函数为async函数
const handleSignIn = async () => {
  try {
    await auth.signIn(data)
  } catch (err: any) {
    console.log(err)
  }
}

如果是在React事件处理函数中调用（比如按钮点击事件），直接声明async函数即可，React会自动处理返回的Promise：

<button onClick={async () => {
  try {
    await auth.signIn(data)
  } catch (err) {
    console.error(err)
  }
}}>登录</button>

另外也可以通过Promise的.catch()方法捕获错误，写法如下：

auth.signIn(data)
  .catch(err => {
    console.log(err)
  })

内容的提问来源于stack exchange，提问作者m_jdm35