打开网易新闻 查看精彩图片

你的仪表盘全绿,用户看到的却是白屏——这种荒诞剧,Netlify开发者Chris每天在上演。

去年他推了个Nuxt应用更新,构建通过、预览正常、监控绿灯。三小时后用户邮件砸来:页面空白。根因荒谬得像个冷笑话——CDN边缘节点还在吐旧HTML,指向已不存在的JS文件,浏览器抓了个404,整个应用原地蒸发。而他的每分钟ping监控?全程200 OK,满意地打着呼噜。

Chris不是个案。现代前端部署越丝滑,这种"假死"越隐蔽。我翻了他的排查记录,发现7种全绿陷阱,每种都足够让值班工程师怀疑人生。

MIME类型偷换:你的JS被当成网页

MIME类型偷换:你的JS被当成网页

Cloudflare背后一个站点,JS文件被CDN错标为text/html。浏览器沉默拒绝执行,没有报错,没有红字,只有功能一点点坏死。Chris过了好几天才发现——还是用户偶然提到"按钮点不动"。

标准监控只看状态码。200?过。至于内容是代码还是网页,它没义务知道。

重定向俄罗斯套娃:浏览器累死了,监控刚热完身

重定向俄罗斯套娃:浏览器累死了,监控刚热完身

CDN层跳转、源站跳转、应用层跳转,三层规则打架。浏览器跳到第20次挥手放弃,监控工具看到第一个301就满意离场。这种"链式暴雷"在微服务架构里尤其常见,每个团队都觉得自己只加了一层。

DNS幽灵:旧基础设施的阴魂

DNS幽灵:旧基础设施的阴魂

迁移后子域名解析指向老服务器,吐着三个月前的内容。技术上"在线",业务上考古。用户看到的是过期的价格、失效的链接、已经下架的产品。

Chris的排查清单越来越长,市面上的工具却越来越不够看。Puppeteer方案?能抓这些问题,但慢、贵、脆弱,规模化后像用显微镜搬砖头。

打开网易新闻 查看精彩图片

他需要的监控,得比状态码聪明,比浏览器轻快——一个能自动验证"页面真的在干活"的中间态。

于是有了Sitewatch。核心逻辑粗暴有效:抓页面、解HTML、追资源、验指纹。

资源验证层,它会顺着script和link标签把JS/CSS全抓一遍。状态码对吗?MIME类型对吗?文件能解析吗?HTML指向的脚本404了,或者JS被当成网页吐出来,秒级告警。

重定向追踪不满足于首跳,一路跟到终点。循环、超时、意外着陆,全揪出来。

内容指纹更狠——给页面内容算哈希,持续比对。首页突然少了半截?哪怕200 OK照拿,警报照响。

Chris的测试数据里,这套机制把传统监控的盲区压缩了83%。不是估算,是他对比了三个月内的真实漏报案例。

工具开源在GitHub,但Chris没打算靠它吃饭。用他的话说,"只是不想再被绿灯骗第二次"。

现在他的部署流程里,Sitewatch跑在正式流量切换前。CDN缓存刷新、边缘节点同步、资源完整性,三道关卡全绿才算真绿。

那些曾让他通宵的幽灵故障,现在大多在用户感知前就被按死。

有个细节他特别得意:某次Vercel边缘配置更新后,Sitewatch在47秒内捕获到亚洲节点的MIME类型错乱,而官方状态页整整15分钟后才变黄。

工具的名字Sitewatch,取自"watch the site, not the server"——盯着网站在干什么,而非服务器在没在线。

这个区分,值不值得你今晚就检查一遍自己的监控配置?