前端排查项目上线后页面白屏

望京十三兄2026-03-13 11:51

信息收集与复现，是个别用户还是大面积用户，特定浏览器/设备/网络环境，特定页面还是全站，能否稳定复现。
**获取关键信息：**用户提供的截图/录屏，控制台报错截图，浏览器版本、操作系统，网络环境（WiFi/4G/公司内网）
快速定位层级：用户 → CDN/网络 → HTML → CSS → JS → 数据 → 渲染
根因与排查：先让用户强制刷新/清缓存，快速恢复业务，白屏本质是「渲染流程中断」，排查就是找到中断点。
JS 执行错误： SyntaxError 低版本浏览器不支持新语法，检查 browserslist 配置，确认 babel/polyfill 生效；ReferenceError 变量未定义、CDN 资源加载失败；ChunkLoadError代码分割后资源 404（常见于发版后用户未刷新）
环境/配置问题：接口域名配置错误（测试环境配到线上）；Feature Flag 配置异常导致逻辑分支错误。
资源加载失败： JS/CSS 文件 404（部署路径错误、CDN 刷新问题）；第三方 SDK 加载失败阻塞渲染；HTTPS 页面加载 HTTP 资源被拦截；Charles 抓包、Sentry 监控、Chrome Performance 面板。
框架特定问题：React 根组件 render 报错、Error Boundary 捕获后白屏；Vue ：el 挂载点不存在、路由 beforeEach 守卫死循环；微前端子应用加载失败、沙箱冲突。
监控与预防：实时监控- Sentry / Fundebug 捕获运行时错误，performance API 监控白屏时间（FP/FCP/LCP），自定义上报；发布策略- 灰度发布 + 快速回滚机制，静态资源加 hash + CDN 刷新，做好 SourceMap 上传（便于线上调试）。**预防大于排查，**完善的监控体系比事后救火更重要。