在真实的生产环境中,最令人头疼的往往不是显而易见的报错,而是那些间歇性出现、难以复现且极具破坏力的“幽灵Bug”。本次复盘将带大家深入一个典型的全栈疑难杂症现场:前端页面偶发性白屏,伴随后端服务内存持续飙升直至OOM(Out Of Memory)崩溃。这不仅是一次简单的修Bug经历,更是一场关于浏览器渲染机制、HTTP协议特性以及Node.js事件循环的深度博弈。
第一阶段:迷雾重重的故障现场
故障最初是由客服部门反馈的,称有部分用户在使用后台管理系统导出月度报表时,页面会突然卡死并呈现白屏状态。初步排查时,运维团队发现负责该模块的Node.js中间层服务(BFF层)每隔几天就会出现一次CPU占用率飙升至100%的情况,随后触发K8s的自动重启策略。
由于缺乏直接的错误日志,我们首先在前端接入了性能监控探针。通过Chrome DevTools的Performance面板录制故障发生时的页面表现,我们发现了一个惊人的细节:在页面白屏前,主线程被一段长达数秒的JavaScript执行任务完全阻塞。与此同时,Network面板显示有一个处于Pending状态的接口请求,其Size一栏显示为“Unknown”,且没有任何响应头返回。
这个“幽灵请求”成为了破局的关键线索。它既没有超时失败,也没有成功返回,就像黑洞一样吞噬着前后端的资源。
第二阶段:抽丝剥茧,定位根因
为了彻底查清真相,我们将排查范围从前端延伸至后端代码逻辑。
在前端侧,经过对打包后的Chunk文件进行Source Map还原,我们锁定了触发卡顿的代码段。原来,前端在处理大