由于超时，加载块 77 失败，但 Sentry 上报告错误

Question

我使用 Sentry（类似于 Bugsnag）来监视站点上的前端错误。

在 Sentry 上我有很多这样的错误：

Error: Loading chunk 77 failed.
(timeout: https://www.exemple.com/77.6a28baf2f4e4ff5f87a6.js)

我执行延迟加载，但旧文件在部署期间保留，因此问题与部署的网站的新版本无关。

就像错误所说的那样，这似乎是超时，因此可能是用户连接稍微下降了。

但我不明白的是：

• 我可以在 Sentry 上看到这些错误：如果用户在加载网站时连接断开，他如何向 Sentry 发送报告错误的内容

• 在 Sentry 上，我看到的错误来自使用 Windows 的用户，因此这意味着他们在桌面上 => 在桌面上时连接断开的概率很低。

我在网上搜索了我发现的所有内容的解释：

• 部署和延迟加载（我保留旧文件，所以这不是问题）

• 连接问题（为什么我会看到报告这些错误）

任何人都想探索一些东西来尝试找出这些错误发生的原因。

Answer 1

前段时间我遇到了类似的问题（如果不相同），在前端部署期间和之后用户处于活动状态（在会话中）的情况下，这（不时）导致以下情况：用户引用了他/她正在运行的角度应用程序中的一些旧文件（部署后这些文件不存在），这导致了这些块错误。

我用于解决此问题的修复是默认值的简单扩展，SentryErrorHandler如下所示

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() { }
  handleError(error) {
    const chunkFailedMessage = /Loading chunk [\d]+ failed/;
    if (chunkFailedMessage.test(error.message)) {
      window.location.reload();
    } else {
      Sentry.captureException(error.originalError || error);
    }
  }
}

因此，通过此解决方案，我们强制用户重新加载应用程序并获取最新的工件（如果出现问题）。我们还跳过错误日志记录，因为它不是一条给我们带来任何价值的消息，因为它不是我们能够修复的东西，这就是 Angular 的工作原理。

解决此问题的另一种方法可能是在应用程序空闲时预加载所有惰性模块，这样您就不会尝试加载不存在的模块。