Firebase 抛出的错误在 redux-thunk 操作的 then() 中被捕获

Question

如果由于互联网连接速度慢而需要很长时间才能解决请求，Firebase 会报错。这是错误：

@firebase/firestore: Firestore (7.9.2): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completed This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

我运行在尝试捕获此错误时遇到了 redux-thunks 的奇怪行为。我的 api 函数能够在其 catch() 块中捕获 firebase 错误，但未在 thunk 操作中的 catch() 块中捕获。这里有一些伪代码可以更好地说明这一点：

api.js

getDoc () {
  return firebase.firestore().doc().get().then(result => {
    return result
  }).catch(error => {
    //error caught here
    console.log(error)
  })
}

thunks.js

action () {
  api.getDoc().then(result => {
    //result contains the error
    dispatch(success(result));
  })
  .catch(error => {
    //not being reached
    dispatch(failed(error))
  })
}

我创建了一个 code sandbox 来重现错误。随意使用代码。当您在应用程序正在获取数据时离线时，将抛出 firebase 错误，并且控制台将显示后端 api 捕获了错误，但 thunk 操作未能捕获到错误。我不确定这是我的错误还是 redux-thunk 库或 firebase 库的限制。

问题：我该如何处理这个错误，这样我的 thunk 操作就不会将错误发送为成功？

我们将热烈欢迎任何帮助。

Answer 1

该消息只是给您的通知。这不是一个真正的错误，你无法捕捉到它。 Firestore 不会将网络问题视为错误。它只是在后台不断重试。

Answer 2

如果有人遇到此错误，这里有一个解决方案。

最简单的解决方案是从 api 函数中删除 catch() 块并在调用函数处捕获错误。根据问题中提供的示例代码，唯一的修改是 api.js 文件：

getDoc () {
  return firebase.firestore().doc().get().then(result => {
    return result
  })
}

在测试时，如果错误被 firebase 抛出，thunk 的 catch() 块会被命中，从而调度错误操作。

Firebase 抛出的错误在 redux-thunk 操作的 then() 中被捕获

Error thrown by Firebase is caught in then() of redux-thunk action

reactjs

firebase

redux

react-redux

react-thunk