Sentry 捕获不到 HTML 解析错误，因为浏览器不将标签未闭合、属性拼错等 DOM 构建阶段问题视为 JS 异常，而 Sentry 默认仅监听 window.onerror 和 PromiseRejectionEvent；真正暴露 HTML 问题的是开发者工具中的 Parser/HTML 警告。
为什么 Sentry 捕获不到 HTML 解析错误？
因为浏览器根本不会把 HTML 解析失败（比如标签未闭合、属性名拼错、<script> 写在 <head> 里但用了 document.body）当作 JavaScript 错误抛出，Sentry 默认只监听 window.onerror 和 PromiseRejectionEvent。这类问题发生在 DOM 构建阶段，不触发 JS 异常，所以 Sentry 看不见。
真正能暴露 HTML 问题的，是开发者工具里的「Elements」面板和控制台中带 Parser 或 HTML 字样的警告（例如：HTML1506: Unexpected end tag.），但这些不会进入 JS 错误流。
实操建议：
- 上线前用
html-validate或tidy做静态校验，CI 阶段拦截常见结构错误 - 对关键落地页，用 Puppeteer 启动无头 Chrome，读取
page.metrics()和page.on('console', ...)捕获渲染时的warning级日志（注意：不是所有 warning 都会上报，需过滤含html、parser、unclosed的消息） - 避免依赖
Sentry发现 HTML 错误——它不是为此设计的
Sentry 能捕获哪些前端错误？怎么配才不漏？
Sentry 主要覆盖三类可编程捕获的异常：JS 运行时错误、未处理的 Promise 拒绝、资源加载失败（需开启 integrations: [new Sentry.Integrations.TryCatch({ XMLHttpRequest: false })] 并手动 patch fetch）。但默认配置下容易漏掉两类关键错误：
立即学习“前端免费学习笔记（深入）”；
-
Script error.：跨域脚本报错（比如 CDN 上的 JS）会被浏览器屏蔽详细信息，必须给<script>标签加crossorigin="anonymous"，且 CDN 返回Access-Control-Allow-Origin: * - React/Vue 的组件级错误：需显式集成
@sentry/react或@sentry/vue，并启用reactRouterV6BrowserTracingIntegration（若用路由）；否则组件render抛错会静默吞掉 - 第三方 SDK 错误（如微信 JS-SDK）：它们常在
setTimeout或事件回调里抛错，需确保Sentry.init在所有 SDK 初始化之前执行
不用 Sentry，怎么低成本收集 JS 错误？
如果只是想快速验证错误是否可上报，或团队还没接入 Sentry，可以用原生 window.onerror + fetch 自建轻量通道：
window.onerror = function(message, source, lineno, colno, error) {
fetch('/api/log-error', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
message,
source,
lineno,
colno,
stack: error?.stack || '',
url: location.href,
ua: navigator.userAgent
})
});
return true; // 阻止默认错误提示
};
注意几个坑：
- 这个 handler 不捕获 Promise 拒绝，得额外监听
window.addEventListener('unhandledrejection', ...) -
error.stack在 Safari 旧版和部分 iOS WebView 中可能为空，建议 fallback 到message + ' at ' + source + ':' + lineno - 别在
onerror里调用可能出错的逻辑（比如未定义的函数），否则会无限递归上报
线上 HTML 错误影响真实用户？怎么看？
HTML 错误本身极少导致白屏或功能不可用，但会间接引发 JS 错误：比如 <div id="app"></div> 被写成 <div id="app">（没闭合），可能导致 document.getElementById('app') 返回 null，后续调用 .appendChild() 就抛 TypeError —— 这个才是 Sentry 能抓到的。
所以更有效的监控路径是：
- 在核心 JS 入口处加防御性检查：
if (!document.getElementById('app')) { Sentry.captureMessage('Missing #app element'); } - 对动态插入的 HTML 片段（如富文本渲染），用
DOMParser预检：new DOMParser().parseFromString(htmlStr, 'text/html').body.children.length > 0 - 真正需要警惕的是服务端渲染（SSR）返回的 HTML 与客户端 hydrate 不匹配，这种错误会在控制台打出
Hydration failed，Vue/React 都有对应钩子可上报
HTML 层的问题，从来不是靠错误监控发现的，而是靠结构约束、预检和 hydration 对齐机制守住底线。
