JS故障转移通过冗余备份、异常监控与快速切换保障核心功能。配置多版本JS文件并部署于不同CDN，利用动态加载结合onerror和promise超时机制检测加载失败，触发备用文件加载；通过Resource Timing API、错误监控平台等多维度监控，结合灰度发布、Feature Flags实现优雅回退；故障时通过邮件、Slack、自动化告警等方式通知开发人员，并提供详细错误日志用于快速排查。
JS故障转移的核心在于确保当一个JavaScript文件加载失败或执行出错时，能够迅速切换到备用方案，保证网页的核心功能不受影响。配置的核心思路是：冗余备份，监控异常，快速切换。
解决方案：
-
多版本部署与资源冗余： 准备多个版本的JS文件，并放置在不同的CDN或服务器上。这就像给你的网站准备了多条生命线，一旦一条断裂，立刻启用另一条。比如，你可以同时部署
app.js
、
app.min.js
和
app.legacy.js
，分别对应不同浏览器环境和压缩状态。
-
动态加载与版本控制： 使用JS动态加载JS文件，并加入版本号或时间戳作为查询参数，防止浏览器缓存导致的问题。例如：
function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/JavaScript"; if (script.readyState) { //IE script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function() { callback(); }; } script.onerror = function() { console.error("Failed to load script:", url); // 触发故障转移逻辑 fallbackToBackupScript(); }; script.src = url + "?v=" + Date.now(); // 添加时间戳 document.getElementsByTagName("head")[0].appendChild(script); } -
错误监控与自动切换： 利用
window.onerror
全局错误处理函数，或者try-catch语句，捕获JS加载或执行过程中的错误。一旦发现错误，立即执行故障转移逻辑，加载备用JS文件。
window.onerror = function(message, source, lineno, colno, error) { console.error("Global error handler:", message, source, lineno, colno, error); // 触发故障转移逻辑 fallbackToBackupScript(); return true; // 阻止浏览器默认错误处理 }; -
降级方案与功能限制： 在备用JS文件中，提供降级方案。这意味着，在最糟糕的情况下，用户仍然可以使用网站的核心功能，只是体验可能会有所下降。比如，如果主JS文件提供了复杂的动画效果，备用JS文件可以只提供静态内容。
-
健康检查与自动恢复： 定期对主JS文件进行健康检查，一旦发现问题解决，自动切换回主JS文件。这可以通过定时发送请求到JS文件，并检查返回状态码来实现。
JS故障转移的配置并非一蹴而就，需要根据你的具体应用场景和用户需求，不断调整和优化。
如何检测JS加载失败？
检测JS加载失败，不仅仅是看控制台有没有报错，更重要的是建立一套完整的监控机制。除了上面提到的
script.onerror
事件和
window.onerror
全局错误处理函数，还可以考虑以下几个方面：
-
Resource Timing API： 利用浏览器提供的Resource Timing API，可以获取JS文件的加载时间、DNS解析时间、连接时间等详细信息。如果加载时间过长，或者状态码不是200，就可以判定为加载失败。
performance.getEntriesByType("resource").forEach(entry => { if (entry.name.includes("app.js")) { if (entry.duration > 3000 || entry.responseStatus !== 200) { console.warn("app.js加载异常:", entry); fallbackToBackupScript(); } } }); -
Promise封装： 将JS加载过程封装成Promise，并设置超时时间。如果Promise在指定时间内没有resolve，就判定为加载失败。
function loadScriptPromise(url) { return new Promise((resolve, reject) => { var script = document.createElement("script"); script.type = "text/javascript"; script.onload = resolve; script.onerror = reject; script.src = url; document.head.appendChild(script); setTimeout(() => { reject(new Error("Script loading timeout: " + url)); }, 5000); // 5秒超时 }); } loadScriptPromise("app.js") .then(() => console.log("app.js加载成功")) .catch(error => { console.error(error); fallbackToBackupScript(); }); -
sentry/Bugsnag等错误监控平台： 集成专业的错误监控平台，可以实时收集JS错误信息，并提供详细的错误报告，帮助你快速定位和解决问题。
-
用户体验监控： 通过监控用户的行为，例如页面加载时间、点击率、转化率等，可以间接判断JS是否加载成功。如果用户体验明显下降，可能就是JS出现了问题。
如何优雅地进行JS版本回退？
版本回退不是简单的替换文件，需要考虑用户体验、数据一致性等问题。以下是一些建议：
-
灰度发布： 在进行版本更新时，先只对一部分用户进行灰度发布，观察一段时间，如果没有问题，再全量发布。这样可以最大限度地减少风险。
-
Feature Flags： 使用Feature Flags，可以动态地控制功能的开启和关闭。如果新版本出现问题，可以立即关闭相关功能，回退到旧版本。
-
A/B测试： 同时运行新旧两个版本，通过A/B测试，比较它们的性能和用户体验。如果新版本不如旧版本，可以立即回退。
-
版本控制系统： 使用版本控制系统（如git），可以方便地回退到之前的版本。
-
CDN缓存策略： 合理设置CDN缓存策略，可以避免旧版本JS文件被缓存，导致回退失败。通常，可以通过修改文件名或添加版本号来强制刷新缓存。
-
数据迁移： 如果新版本涉及到数据结构的变更，在回退时需要进行数据迁移，保证数据的一致性。
-
用户通知： 在进行版本回退时，最好给用户一个友好的提示，告知他们正在使用旧版本，并说明原因。
故障转移后如何通知开发人员？
光是切换到备用方案还不够，关键是要及时通知开发人员，让他们知道发生了什么，并尽快解决问题。
-
邮件/短信通知： 当发生故障转移时，自动发送邮件或短信给开发人员，告知他们出现问题的JS文件、错误信息、发生时间等。
-
Slack/Teams等协作工具： 将错误信息发送到Slack或Teams等协作工具的频道中，方便开发人员及时沟通和协作。
-
错误监控平台集成： 将错误监控平台与邮件、短信、Slack等工具集成，可以实现更强大的通知功能。例如，可以根据错误级别、发生频率等条件，设置不同的通知策略。
-
自动化告警： 设置自动化告警规则，当错误数量超过阈值时，自动触发告警，通知开发人员。
-
健康检查报告： 定期生成健康检查报告，汇总JS文件的加载情况、错误信息等，方便开发人员了解JS的健康状况。
-
实时监控面板： 创建一个实时监控面板，展示JS文件的加载情况、错误信息、用户体验指标等，方便开发人员随时监控JS的运行状态。
通知的内容应该尽可能详细，包括：
有了这些信息，开发人员就可以更快地定位和解决问题。
