HTML 本身不具备错误边界能力，所有容错机制均依赖 JS 层实现；浏览器将未知标签如<ErrorBoundary>视为普通容器，React 等框架需通过渲染 API 激活错误拦截；原生 HTML 仅支持 onerror 降级、全局错误监听及手动事件守卫，无法组件级隔离。
HTML 本身不能实现错误边界——它没有运行时异常捕获能力，也不理解 componentDidCatch、errorBoundary 或任何 JS 框架层的容错逻辑。所谓“HTML 中的错误边界”，实际是 JS 层（React、htmx、原生 Custom Elements 等）在 HTML 容器中注入的防护机制。
为什么直接写 <ErrorBoundary><App/></ErrorBoundary> 没用
浏览器解析 HTML 时，会把 <ErrorBoundary> 当作未知标签忽略或降级为普通容器，不会执行任何错误拦截逻辑。React 的 ErrorBoundary 必须通过 ReactDOM.render() 或 createRoot().render() 加载才生效；HTM 同样依赖 React 渲染链路，不是写进 .html 文件就能跑。
- 纯 HTML +
<script>场景下，try/catch只能捕获同步代码，对fetch、setTimeout、事件回调里的错误完全无效 -
<template>或自定义标签（如<my-card>）不自带错误隔离能力，子内容 JS 报错仍会冒泡到window - 服务端返回的 HTML 如果含语法错误（比如未闭合的
<div>），浏览器会自动容错修正，但不会阻止后续脚本执行失败导致白屏
用 window.onerror 和 unhandledrejection 做全局兜底
这是原生 HTML 页面最务实的第一道防线，虽不能“组件级”隔离，但能防止用户卡死、提供基础监控。
-
window.onerror = (msg, url, line) => { console.error('JS error:', msg); return false; }—— 捕获同步脚本错误，return false可阻止默认错误弹窗（仅部分浏览器支持） -
window.addEventListener('unhandledrejection', e => { console.error('Unhandled promise:', e.reason); })—— 补上 Promise 链中未catch的错误，比如fetch().then(...)忘写catch - 注意过滤：资源加载失败（
<img src="404.jpg">）触发的是普通Event，不是ErrorEvent，可用!(e instanceof ErrorEvent)区分 - 不要在其中调用
location.reload()，用户可能刚输入一半表单内容
给关键资源加 onerror 实现 HTML 层降级
这是真正能在 HTML 标签层面起效的容错手段，无需 JS 框架，且浏览器原生支持。
立即学习“前端免费学习笔记（深入）”；
-
<script src="cdn.js" onerror="this.src='fallback.js'"></script>—— CDN 失败时自动切本地，但需确保fallback.js存在且路径正确 -
<link rel="stylesheet" href="/css/main.css" onerror="document.body.classList.add('no-css')">—— 样式加载失败后加类，用内联 CSS 保基本布局（注意旧版 Safari 可能不触发） -
<img src="logo.png" onerror="this.src='/img/placeholder.svg'" alt="公司标识">—— 图片失败时换占位图，alt是最后的文案兜底 -
<video>要配合error事件 +video.error?.code判断具体原因，不能只监听一次事件就完事
用 htmx 或 Custom Elements 手动模拟组件级防护
如果你用 htmx 或 Web Components，可以在元素粒度加守卫，比全局监听更精准。
- htmx 提供
htmx:error、htmx:timeout等事件，可绑定到具体按钮或区域：<button hx-post="/api/save" hx-on:htmx:error="showToast('保存失败')">保存</button> - Custom Element 中，在
connectedCallback里用try/catch包裹this.attachShadow或render()逻辑，出错时回退到this.innerHTML = '<slot></slot>' - 避免在
render()内部 throw 错误——这会导致无限循环，边界组件自己先崩了 - 所有手动防护都绕不开一个事实：HTML 不负责错误传播，JS 才是执行主体；你写的每个
onerror、每个事件监听，本质都是在 JS 层打补丁
最容易被忽略的一点：CSS 解析错误、HTML 属性拼写错误、<meta charset="utf-8"> 缺失导致的乱码……这些全都不走 JS 错误通道，也捕获不到。它们靠的是开发阶段校验、构建时 lint、以及上线后真实用户反馈沉淀的 fallback 规则——不是靠某段代码“一键解决”。
