无法真正实现白屏瞬间动作回放，因JS崩溃时日志搜集器已失效；需前置轻量录制+崩溃快照兜底+服务端聚合分析，以抢在JS生命终点前捕获因果链。
直接用本地临时存储（如 sessionStorage 或内存变量）配合自研日志搜集器，无法真正实现“白屏瞬间的动作回放与还原”。原因很实在：白屏发生时，JS 很可能已崩溃、执行中断或 DOM 被清空，此时日志搜集器本身大概率已停止工作，更别说可靠写入或上报。
为什么“本地临时存储 + 自研日志”撑不住白屏场景
白屏不是加载慢，而是渲染链路彻底断裂。常见断点包括：
- 入口 JS 解析失败（SyntaxError），脚本根本没执行到日志搜集器初始化那行；
- React/Vue 渲染器抛出未捕获异常，触发
unhandledrejection或error，但若监听不全或兜底逻辑被阻塞，后续动作就丢失； - 关键资源（如
app.js）404 或返回 HTML（publicPath 错），浏览器连 JS 都没加载，日志器压根不存在； - 白屏后用户刷新前，
sessionStorage仍存在，但里面只存了“半截日志”——比如只记了点击，没记后续 fetch 响应或 render 结果，无法构成可回放的操作流。
真正能落地的“白屏动作还原”要分两层做
单靠前端日志永远有盲区。必须结合轻量录制 + 异步保活机制：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
前置轻量录制（非 rrweb 全量，但逻辑同源）：在页面加载早期（
<script>内联或 defer 脚本第一行）立即启动一个极简 recorder，仅监听三类事件：click、input（限非密码框）、location.href变化，并把时间戳、target、value（脱敏）、URL 快照，全部存在sessionStorage中——这个过程不依赖框架，不 new class，代码控制在 2KB 以内； -
崩溃快照兜底：在
window.addEventListener('error')和window.addEventListener('unhandledrejection')中，立刻序列化当前sessionStorage的录制片段 +document.body.innerHTML片段（注意截取前 10KB 防溢出）+performance.memory（如有）+navigator.userAgent，拼成一条结构化 crash-log，用navigator.sendBeacon发出； - 服务端合成回放线索：日志搜集器收到这条 crash-log 后，不单独存，而是关联同一 sessionID 的前后 10 秒内其他上报（接口耗时、资源加载状态、JS 错误堆栈），自动标记为“白屏会话”，并在管理后台按时间轴聚合展示：哪次点击后 300ms 页面变空、哪个 chunk 加载失败、是否紧随一个 Promise reject ——这不是视频，但足够定位根因。
关键细节不能漏
-
sessionStorage 不是保险箱：它会在页面崩溃/强制关闭时丢失。所以录制数据要“高频 flush + 低延迟上报”，比如每 3 次交互或 2 秒钟，就调一次
sendBeacon（带唯一 traceID），避免全丢； -
不录敏感字段是硬约束：input 值必须正则过滤掉银行卡、身份证、密码类 pattern，哪怕只是
type="text"也按规则脱敏，否则合规风险远大于排查收益； -
白屏判定要独立于日志器：用 MutationObserver 监听根容器（如
#root）子节点数突变为 0，或用定时器检测document.readyState === 'complete'后 5 秒内document.getElementById('root')?.children.length === 0，一旦命中，立刻触发兜底快照 —— 这个判断逻辑必须和日志搜集器解耦，放在最外层 script 里。
本质上，这不是“用 localStorage 存日志再回放”，而是以最小侵入代价，在 JS 生命终点前抢出最后一帧现场。能还原的不是像素，而是因果链。
立即学习“前端免费学习笔记（深入）”；
