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

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

| 我对外部js和CSS资源有多个“ 0”引用。通常，这些用于第三方分析等。偶尔（偶然），这些资源无法加载，通常导致浏览器超时。当外部JavaScript或CSS资源无法加载时，是否可以检测并登录服务器？我正在考虑某种类型的延迟加载机制，该机制会在发生故障时调用特殊的URL来记录此故障。有什么建议吗？我认为会发生什么：用户点击我们的页面，服务器端成功处理并提供页面在客户端，HTML标头通常通过以\“ http：//www.someothercompany.com ... \”开头的javascript include尝试连接到我们的第三方集成合作伙伴。另一家公司无法处理我们的负载或正常运行时间，因此连接失败。用户看到一个通用的IE页面未找到，而不是我们服务器中的一个。因此，即使我的站点已启动并且其他所有设备运行正常，也仅仅是因为这一对第三方服务器的调用失败（在HTML页面标题中），我们还是无法启动。

解决方法

如果您的应用程序/页面依赖于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标签，您必须为要加载的其他类型的文件创建自己的方法。希望可能会有所帮助，欢呼 ,您可以在JavaScript中查找对象的存在，例如看看是否已加载jQuery ...

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

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

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

jsFiddle。当这些失败时，您可以对服务器进行XHR记录这些失败。 ,那ServiceWorker呢？我们可以使用它来拦截所有http请求并获取响应代码以记录外部资源是否加载失败。 ,对js名称和会话cookie进行哈希处理，然后以纯文本形式和哈希值发送js名称。服务器端，进行相同的哈希处理，如果两者都是相同的日志，如果不是，则假定它是滥用的。