Firefox 84/85 中的“尝试获取资源时出现网络错误”

如何解决Firefox 84/85 中的“尝试获取资源时出现网络错误”

不久前，我们推出了一个由 GQL 后端提供支持的 React 网站。就在最近收集的客户端指标中，我们发现在 84 和 85 版本的 Firefox 浏览器中获取数据期间，以下错误发生率很高（截至发布此问题时的最新情况）。

NetworkError when attempting to fetch resource.

在 React 应用程序内部，Apollo GraphQL 客户端用于获取数据。整个 ApolloError 对象读起来像

{"graphQLErrors":[],"networkError":{},"message":"NetworkError when attempting to fetch resource."}

然而，当我们自己尝试上述浏览器版本时，无法重现这一点。

我已经确认这不应该是 CORS 问题。我们拥有相当大的用户群，他们使用的 Firefox 浏览器版本范围很广，但只有 84 和 85 版本表现出如此高的出现率。不久前，我们修复了由于旧版浏览器与 Fetch api 不兼容而导致的 similar issue。

我们对可能导致此问题的原因有些无能为力。客户端的日志记录量仅限于显示更多信息。非常感谢任何见解或线索。

解决方法

最终我发现这不是与 Firefox 84/85 相关的错误。正如 here 所述，当其进程被浏览器中止时，fetch API 只会抛出网络错误消息（很可能是由用户导航到不同页面或停止页面加载引起的）。

我已经在一些主要浏览器上验证了这一点，在 fetch API 正在运行时故意停止页面加载。我收到的错误消息是：

• Chrome 和 Edge - Failed to fetch
• 火狐 - NetworkError when attempting to fetch resource
• Safari - cancelled

不幸的是，只有 Safari 浏览器会返回正确的消息来解释可能发生的情况。

我认为通常可以安全地忽略这些错误，或者通过一次重试尝试挽救这些错误，以防它们是由连接问题引起的。对于 Apollo GraphQL 客户端，更重要的是检查 graphQLErrors 对象的 networkError 和 ApolloError 属性，这表明客户端发现了一些严重的问题。