HTML解析错误无法被window.onerror或Sentry捕获，因浏览器在DOM构建阶段静默修复未闭合标签、错位script等结构问题，不抛JS异常、不触发错误事件，仅开发者工具控制台显示Parser警告；有效防控依赖开发期静态检查（如html-validate）和运行时DOMParser轻量校验。
前端监控平台无法自动捕获 HTML 文档结构损坏或标签渲染异常——浏览器不把这类问题当作 JS 异常抛出，也就进不了 Sentry、Bugsnag 等平台的错误流。
为什么 window.onerror 和 Sentry 都看不到 HTML 解析错误
HTML 解析阶段的错误（比如未闭合的 <div>、错位的 <script>、<head> 里写了 <div>）由浏览器 HTML 解析器静默修复，不会触发任何 JS 事件或异常。这意味着：
-
window.onerror、window.addEventListener('error')、PromiseRejectionEvent全部收不到这类信号 - Sentry 默认配置只监听上述三类事件，所以对 HTML 结构问题完全“失明”
- 开发者工具控制台里出现的
HTML1506: Unexpected end tag这类 Parser 警告，是浏览器内部日志，不走 JS 错误通道
真正能暴露 HTML 问题的两种实操路径
没有运行时“捕获”，只有开发期拦截 + 运行时反推。关键不是等它出错，而是提前卡点。
- CI 构建阶段强制跑
html-validate：配置规则集（如禁止<div>在<head>、强制属性引号、校验 ARIA 属性），失败即阻断发布 - 本地开发用 VS Code 插件
vscode-htmlhint，保存时实时标红未闭合标签、重复 ID、非法嵌套 - 运行时对动态插入的 HTML 做轻量校验：用
DOMParser().parseFromString(htmlStr, 'text/html')后检查doc.body.children.length === 0 && htmlStr.trim()，仅能发现极端空解析，不能替代静态检查
资源加载失败 ≠ HTML 错误，但常被混淆
很多人看到页面样式崩了、按钮没了，第一反应是“HTML 写错了”，实际大概率是 CSS/JS 加载失败，而这类错误需要单独监听，且方式各异：
立即学习“前端免费学习笔记（深入）”；
-
<script src="a.js">失败：必须加onerror属性，window.onerror不冒泡，捕获不到 -
<img src="x.jpg">失败：只能绑定img.onerror，全局addEventListener('error', ...)捕获不到，除非用捕获阶段（true第三个参数）并从e.target判断类型 -
<link rel="stylesheet">失败：无标准 error 事件，Chrome 支持link.onerror，Firefox 需降级检测document.styleSheets规则数是否为 0 -
<iframe>加载失败：跨域时error事件可能静默，只能靠超时 +iframe.contentDocument是否为空来间接判断
监控锚点设计要避开 HTML 结构依赖
想靠 HTML 属性定位异常？别只押注 id。它在大型项目中极易冲突、无上下文、不可追溯。真正可用的是结构化 data- 属性：
- 统一前缀，例如全部用
data-monitor-module、data-monitor-type、data-monitor-id - 监听必须挂到
document或document.body，用捕获阶段（true），才能覆盖动态插入的 React/Vue 组件 - 提取时用
e.target.dataset.monitorModule，而不是e.target.id—— 后者在微前端或多团队共建场景下根本不可信 - 上报前加防抖标记：
e.target.dataset.reported === 'true'（注意是字符串），避免同一元素多次点击重复上报
HTML 结构问题永远不在运行时“异常”范畴里；它要么被浏览器吃掉，要么在构建阶段就该拦住。把希望寄托在监控平台自动发现，等于把门锁交给小偷保管。
