如何检测 Angular 9 应用程序中的 MIME 类型错误并获得通知？

Posted 2023-02-22

【中文标题】如何检测 Angular 9 应用程序中的 MIME 类型错误并获得通知？

【英文标题】：How to detect MIME type error in Angular 9 app and get notified?

【发布时间】：2021-08-31 20:56:00

【问题描述】：

我之前在我的 Angular 应用程序中遇到了 MIME 类型错误 Failed to load module script: The server responded with a non-javascript mime type of text/html，我得到了解决。

但是，如果该错误可能再次发生，我无法找到如何获得通知的方法。

我正在使用 Sentry 来检测我的 Angular 应用程序中的错误，以便收到任何错误的通知。在这种情况下，MIME 错误甚至在 main 模块加载之前弹出，其中哨兵​​也被初始化。 实际上，该错误意味着它无法找到/加载main 模块。

由于这个问题，浏览器显示空白屏幕，并且我的生产网站有一段时间无法使用。没有构建问题。

如果该错误再次发生，我如何检测并收到警报？ 是否有任何外部工具可以监控我的应用程序是否存在此类错误并通知我？ 目前业界遵循哪些最佳做法？

【问题讨论】：

您可能需要在页面加载后的一段时间内出现应用程序稳定信号，否则您必须在角度上下文之外初始化哨兵并报告错误。

@Xesenix 但是我可以从哪里触发这个应用稳定信号呢？即使服务器侦听此信号，它如何知道某人的浏览器中发生了页面加载？

您可以开始收听第一个稳定事件，将 angular.io/api/core/APP_INITIALIZER 与 lukaonik.medium.com/… 结合起来，这将使您明白应用程序发出信号一切正常但您仍然需要在 angular 之外实现一些脚本收听您从那里发送的任何信号，我建议您使用一些 postMessage developer.mozilla.org/en-US/docs/Web/API/Window/postMessage，您将在该外部脚本中等待

【参考方案1】：

大多数情况下，如果浏览器获取的是 TypeScript 而不是 JS 文件，则会发生此错误