javascript - 请求成功后不久发生 XMLHTTPRequest Network Error 的原因是什么？

Question

我有一个连接到 Sentry 的 React 前端，过去几周我收到了很多报告，完全随机（不同的用户和不同的设备）出现以下错误：

Error: Network Error
  at createError(../node_modules/axios/lib/core/createError.js:17:15)
  at apply(../node_modules/axios/lib/adapters/xhr.js:80:14)
  at XMLHttpRequest.r(../node_modules/@sentry/browser/esm/helpers.js:87:17)

它在堆栈跟踪中引用的 Axios 代码：

request.onerror = function handleError() {
  // Real errors are hidden from us by the browser
  // onerror should only fire if it's a network error
  reject(createError('Network Error', config, null, request)); // Clean up request
  request = null;
}; // Handle timeout

我不认为这与 Axios 有任何关系，因为这表明onerror事件处理程序是在请求上触发的，这是 XMLHTTPRequest 的一部分。

更奇怪的是，我经常看到来自同一个用户的成功 API 请求在片刻之前经过，然后它失败并出现此错误，然后在用户（可能）刷新几秒钟后再次工作。当我检查后端的日志（用 Node 编写）时，我发现大约一半的时间，我实际上看到请求被记录并通过，而另一半的时间，没有迹象表明请求的时间戳为曾经发生过的错误。所以这导致我推断有时，当Network Error被抛出时，请求永远不会到达我的服务器，有时，即使从我的服务器发送成功的响应，它也会在传输中丢失？我知道这与发生在应用层以下的错误有关，因此 HTTP 500 不会导致它触发。

我不明白这怎么会发生。如果丢包，TCP重传不应该导致重试吗？这不仅仅是一次性错误，在过去几周内发生了 20 多次。

一些注意事项：

• 一些研究使我认为这与 CORS 预检有关。响应中设置了以下标头：

    'Access-Control-Allow-Origin': '*'
    'Access-Control-Allow-Headers': 'X-Requested-With'

• 保持活动设置为true在后端。

• 服务器在 Heroku 上运行

• 客户端位于多个不同设备上的多个不同网络上

关于 a）为什么在成功的请求通过后仅几秒钟就会发生这种情况以及 b）确定来源的方法的任何想法？或者这只是一个完全正常的、可能经常发生的短暂错误？

标签： javascriptxmlhttprequestnetwork-programming