在HTML页面开发中，如果脚本出现未处理的异常，很可能导致页面功能失效甚至白屏，很多开发者会疑惑HTML代码怎么实现错误边界与异常捕获处理。下面我们就详细讲解相关的实现方法。
什么是HTML场景下的错误边界
HTML本身作为标记语言没有原生的错误边界机制，通常我们说的HTML错误边界，是指通过配套的JavaScript代码，对HTML页面中运行的脚本异常进行捕获和隔离，避免单个异常扩散到整个页面，导致后续所有功能都无法使用。简单来说就是给页面加一层异常防护，让出问题的部分不影响其他正常运行的内容。
全局异常捕获实现
最常用的全局异常捕获方式是监听window.onerror事件，它可以捕获页面中绝大多数未处理的运行时错误，包括脚本错误、资源加载错误等。
// 全局错误捕获
window.onerror = function(message, source, lineno, colno, error) {
// message：错误信息
// source：发生错误的脚本URL
// lineno：发生错误的行号
// colno：发生错误的列号
// error：错误对象
console.log('捕获到全局异常：', message);
console.log('错误来源：', source);
console.log('错误位置：行' + lineno + '，列' + colno);
// 这里可以把错误信息上报到监控系统
// 也可以做页面提示，避免异常直接暴露给用户
return true; // 返回true可以阻止异常向上抛出，避免浏览器默认的错误提示
};如果需要捕获Promise未处理的拒绝异常，还需要额外监听unhandledrejection事件：
// 捕获未处理的Promise异常
window.addEventListener('unhandledrejection', function(event) {
console.log('捕获到Promise未处理异常：', event.reason);
event.preventDefault(); // 阻止浏览器默认的错误提示
});局部代码块异常捕获
对于特定逻辑的代码块，可以使用try...catch语句进行局部捕获，这种方式可以精准处理某段代码的异常，不会影响其他代码运行。
// 局部代码异常捕获示例
function handleDomOperation() {
try {
// 尝试获取不存在的DOM元素并操作
let targetDom = document.getElementById('not_exist_dom');
targetDom.innerHTML = '测试内容'; // 这里会抛出异常
} catch (error) {
console.log('局部代码捕获到异常：', error.message);
// 可以在这里做降级处理，比如创建默认元素
let defaultDom = document.createElement('div');
defaultDom.innerHTML = '默认内容';
document.body.appendChild(defaultDom);
} finally {
// 无论是否出现异常，都会执行的代码
console.log('局部代码执行完成');
}
}
handleDomOperation();资源加载异常捕获
HTML中加载的图片、脚本、样式等资源如果加载失败，也可以通过对应的事件捕获异常，避免资源加载失败导致页面报错。
// 图片加载异常捕获
let img = document.createElement('img');
img.src = 'https://ipipp.com/test_not_exist.jpg';
img.onerror = function() {
console.log('图片加载失败，使用默认图片');
this.src = 'https://ipipp.com/default.jpg';
};
document.body.appendChild(img);
// 脚本加载异常捕获
let script = document.createElement('script');
script.src = 'https://ipipp.com/not_exist.js';
script.onerror = function() {
console.log('脚本加载失败，执行降级逻辑');
};
document.head.appendChild(script);错误边界的注意事项
- 全局捕获只能处理运行时异常，语法错误在解析阶段就会抛出，无法通过
window.onerror捕获，所以开发阶段要做好语法检查。 - 跨域脚本的异常信息可能会被浏览器屏蔽，只显示Script error，需要给跨域脚本添加
crossorigin属性，同时服务器配置对应的CORS头才能获取完整错误信息。 - 不要过度捕获异常，对于可以预期的错误，最好用条件判断提前处理，而不是依赖异常捕获，异常捕获更适合处理不可预期的运行时错误。
- 捕获到异常后，除了做页面提示，最好把错误信息上报到监控系统，方便后续排查问题。
总结
HTML本身没有原生的错误边界机制，我们可以通过JavaScript的window.onerror、unhandledrejection实现全局异常捕获，用try...catch实现局部代码异常捕获，还可以给资源加载添加onerror事件处理资源加载异常。合理组合这些方式，就能实现HTML页面的错误边界和异常捕获，有效提升页面的稳定性。
HTMLJavaScript错误边界异常捕获window_onerror修改时间：2026-05-26 13:33:54