如何利用本地临时存储配合自研日志搜集器实现前端线上白屏瞬间的用户动作回放与还原-js教程-PHP中文网

无法真正实现白屏瞬间动作回放，因JS崩溃时日志搜集器已失效；需前置轻量录制+崩溃快照兜底+服务端聚合分析，以抢在JS生命终点前捕获因果链。

如何利用本地临时存储配合自研日志搜集器实现前端线上白屏瞬间的用户动作回放与还原

直接用本地临时存储（如 sessionStorage 或内存变量）配合自研日志搜集器，无法真正实现“白屏瞬间的动作回放与还原”。原因很实在：白屏发生时，JS 很可能已崩溃、执行中断或 DOM 被清空，此时日志搜集器本身大概率已停止工作，更别说可靠写入或上报。

为什么“本地临时存储 + 自研日志”撑不住白屏场景

白屏不是加载慢，而是渲染链路彻底断裂。常见断点包括：

入口 JS 解析失败（SyntaxError），脚本根本没执行到日志搜集器初始化那行；
React/Vue 渲染器抛出未捕获异常，触发 unhandledrejection 或 error，但若监听不全或兜底逻辑被阻塞，后续动作就丢失；
关键资源（如 app.js）404 或返回 HTML（publicPath 错），浏览器连 JS 都没加载，日志器压根不存在；
白屏后用户刷新前，sessionStorage 仍存在，但里面只存了“半截日志”——比如只记了点击，没记后续 fetch 响应或 render 结果，无法构成可回放的操作流。

真正能落地的“白屏动作还原”要分两层做

单靠前端日志永远有盲区。必须结合轻量录制 + 异步保活机制：

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

前置轻量录制（非 rrweb 全量，但逻辑同源）：在页面加载早期（<script></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 里。