原生HTML无错误边界因其是声明式标记语言，缺乏运行时错误捕获、组件生命周期及异常传播机制；错误边界需依赖React等框架或手动try/catch实现。
HTML 本身不支持组件级错误边界，必须依赖宿主框架（如 React、Vue、Blazor）或手动模拟机制。 直接在纯 HTML 中写 componentDidCatch 或 errorBoundary 不会生效——浏览器解析器根本不知道这些是什么。
为什么原生 HTML 没有错误边界
HTML 是声明式标记语言，不包含运行时错误捕获能力。它没有组件生命周期、状态管理或异常传播机制。所谓“组件”在纯 HTML 中只是 <div> 或自定义标签，但这些标签不会自动拦截子内容渲染失败（比如内联脚本报错、document.write 崩溃、或动态插入的模板语法错误）。
常见误判场景包括：
- 把
<template>当作可复用组件，误以为其内容出错能被父级捕获 - 在
<script type="module">中抛错，期望外部 HTML 能“兜住”，实际只会触发window.onerror - 用 Web Components（
customElements.define）时，未在connectedCallback或render中手动加try/catch，导致错误直接冒泡到全局
React + HTM 场景下必须用 class 组件实现
HTM（htm/react）是 JSX 的轻量替代，但它仍运行在 React 生态中。错误边界只能由继承 React.Component 的类组件实现，函数组件无法使用 componentDidCatch。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
componentDidCatch只对子组件树中的**渲染阶段**和**生命周期方法**错误有效，对事件处理器里的异步错误无效（需单独try/catch） - 必须在
render()中返回this.props.children，否则子组件不会被纳入监控范围 - 不能在
render()内部 throw 错误，否则会进入无限循环（边界自己崩溃） - 示例中
h('div', {className:'error-boundary'}, [...])的备用 UI 必须是静态结构，避免再次触发渲染错误
Web Components 中的手动错误防护
若用原生 Custom Elements 实现“类组件”结构，需自行注入错误捕获逻辑：
- 在
connectedCallback和attributeChangedCallback外层包try/catch，并在catch中调用this.innerHTML = '<slot></slot>'回退到默认内容 - 对
ShadowRoot渲染操作（如this.shadowRoot.appendChild(...)）做防御性检查，避免null或非法节点类型 - 监听
error事件仅能捕获资源加载失败（<img>、<script>），无法捕获 JS 执行错误；需配合window.addEventListener('error', ...)做兜底 - 不要依赖
onerror属性（如<my-comp onerror="handleErr">），自定义元素不原生支持该属性绑定
最易被忽略的是：错误边界无法捕获 CSS 解析错误、HTML 结构错位（如未闭合标签）、或字体/资源加载超时——这些属于渲染引擎或网络层问题，得靠 document.addEventListener('DOMContentLoaded') 阶段校验 DOM 完整性，或用 PerformanceObserver 监控资源加载状态。
