监控与告警：生产环境HTML代码质量保证

生产环境HTML质量需用Puppeteer端到端检测DOM结构异常，监听page.evaluate()返回值、加显式超时等待、避免仅校验源码，并将指标接入Prometheus+Alertmanager实现业务影响驱动的告警。

生产环境的 HTML 代码质量没法靠人工肉眼巡检，必须用自动化手段卡住底线——核心是监控渲染结果是否符合预期，而非检查源码格式。

怎么用 Puppeteer 检测 DOM 结构异常

真实页面加载后，DOM 可能因 JS 错误、资源加载失败或 SSR 渲染不一致而缺失关键节点。Puppeteer 是目前最可靠的端到端检测工具。

• 重点监听 page.evaluate() 返回值，而不是只看 page.content() 的 HTML 字符串——后者可能包含未执行 JS 的占位结构
• 检测逻辑写在浏览器上下文里，例如：document.querySelector('header nav') 是否为 null，比服务端解析 HTML 更贴近用户真实体验
• 避免在 page.goto() 后立即执行断言，加 await page.waitForSelector('main', { timeout: 5000 }) 确保关键区域已挂载
• 超时设置必须显式传入，否则默认 30s，会拖慢告警响应速度

为什么不能只用 HTMLLint 或 prettier-check 做生产校验

这些工具只校验源码字符串，对以下情况完全无感知：

• SSR 模板中 {{ user.name }} 渲染为空字符串导致 <div class=""> 出现非法空 class<li>前端路由切换后，<code>document.title 未更新，SEO 抓取到错误标题
• 动态插入的 <script async src="..."></script> 因 CDN 故障返回 404，但 HTML 源码本身语法合法
• Vue/React 组件中 v-if 或 useEffect 逻辑出错，导致最终 DOM 缺失 data-testid 属性，自动化测试脚本失效

如何把 HTML 质量指标接入 Prometheus + Alertmanager

不要把 Puppeteer 脚本直接塞进 CronJob，得包装成可暴露指标的 HTTP 服务。

立即学习“前端免费学习笔记（深入）”；

• 用 express 启一个轻量端点，每次请求触发一次完整页面检测，返回 { "status": "ok", "checks": [{ "name": "header-exists", "passed": true }] }
• 在响应头里加 X-Check-Timestamp 和 X-Page-Url，方便排查告警对应的具体页面和时间点
• 用 prom-client 注册自定义指标，例如 html_check_failed_total{page="checkout",check="submit-button"} 1，避免告警时只能看到“某处失败”
• Alertmanager 的 for 时间设为 2m，防止单次网络抖动误报；同时配置 group_by: [page, check]，避免 checkout 页和首页的错误混在一起

真正难的不是跑通检测流程，而是定义哪些 DOM 断言算“不可接受”——比如 footer 缺失可能只是 UI 小问题，但 form[action] 为空就是功能阻断。每个断言都得和业务影响挂钩，否则告警再多也等于没告。