angular - 由于超时，加载 block 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

前段时间我遇到了类似的问题(如果不一样)，在前端部署期间和之后用户处于事件状态( session 中)的情况下可以看到，这(不时)导致以下情况用户引用了他/她正在运行的 angular 应用程序中的一些旧文件(部署后不存在)，这导致了这些块错误。

我用于此问题的修复程序是默认 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);
    }
  }
}

因此，使用此解决方案，我们将强制用户重新加载应用程序并获取最新的工件(如果出现问题)。
我们也跳过了错误日志，因为它不是给我们带来任何值(value)的消息，因为它不是我们能够修复的东西，它只是 angular 的工作原理。

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