检测并记录外部 JavaScript 或 CSS 资源加载失败的情况

Question

我有多个对外部 js 和 css 资源的 引用。大多数情况下，这些资源用于第三方分析等。有时（有趣的是）这些资源无法加载，通常会导致浏览器超时。当外部JavaScript或CSS资源加载失败时，是否可以检测并登录服务器？

我正在考虑某种类型的延迟加载机制，当失败时，将调用一个特殊的 URL 来记录此失败。有什么建议吗？

我认为会发生什么：

1. 用户点击我们的页面，服务器端成功处理并提供页面

2. 在客户端， HTML 标头尝试连接到我们的第 3 方集成合作伙伴，通常通过以“http://www.someothercompany.com...”开头的 JavaScript 包含。

3. 另一家公司无法处理我们的负载或正常运行时间很差，因此连接失败。

4. 用户看到一个通用的 IE 页面未找到，而不是来自我们的服务器的页面。

因此，即使我的网站已启动并且其他一切都运行良好，只是因为对第三方服务器的调用失败（一个在 HTML 页面标头中），我们就无法启动。

Answer 1

如果你的应用程序/页面依赖于JS，你可以用JS加载内容，我知道这很混乱。当使用 JS 加载这些内容时，您可以使用回调，让您只拥有已加载内容的功能，而不必担心未加载的内容。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://domain.com/somefile.js';
script.onload = CallBackForAfterFileLoaded;
document.body.appendChild(script);
function CallBackForAfterFileLoaded (e) {
//Do your magic here...
}

我通常通过使用相互依赖的 JS 数组和文件来让这变得更复杂，如果它们不加载，那么我就会出现错误状态。

我忘了提及，显然我只是展示如何创建 JS 标签，您必须为要加载的其他类型的文件创建自己的方法。

希望也许有帮助，干杯

Answer 2

您可以在 JavaScript 中查找是否存在对象，例如查看 jQuery 是否已加载...

if (typeof jQuery !== 'function') {
   // Was not loaded.
}

jsFiddle< /a>.

您还可以检查是否缺少 CSS 样式，例如，如果您知道某个 CSS 文件将背景颜色设置为 #000。

if ($('body').css('backgroundColor') !== 'rgb(0, 0, 0)') {
   // Was not loaded.
}

jsFiddle。

当这些失败时，您可以向服务器创建 XHR 来记录这些失败。

Answer 3

那么 ServiceWorker 呢？我们可以用它来拦截所有http请求并获取响应代码来记录外部资源是否加载失败。

Answer 4

对 js 名称和会话 cookie 进行哈希处理，并以普通格式发送 js 名称和哈希值。服务器端，进行相同的哈希，如果两者是相同的日志，如果不是，则假设它是滥用。