html5多线程日志需通过postmessage跨线程透传，主线程聚合节流上报，用sendbeacon+indexeddb容错，注入设备/应用/性能上下文，并统一序列化保障完整性。

在HTML5多线程环境（如Web Worker、Service Worker、主线程并存）下，日志分散在不同上下文，无法直接共享console或全局对象，统一收集与上报需绕过线程隔离限制，核心是建立跨线程通信通道并标准化日志格式。

日志采集：通过postMessage桥接各线程

主线程、Worker线程彼此独立，不能直接调用对方console或访问同一日志队列。必须借助postMessage进行结构化日志透传：

• 每个线程内部封装log()函数，自动添加source: 'main' / 'worker' / 'service'、时间戳、线程ID（可用self.name或自定义标识）
• 日志对象序列化后通过postMessage({ type: 'LOG', payload: {...} })发送至中心收集点（通常是主线程）
• Service Worker中需监听self.addEventListener('message', ...)接收来自主线程或其他Worker的日志

统一汇聚：主线程作为日志中转与缓冲区

主线程承担日志聚合职责，避免Worker频繁触发网络请求（部分浏览器限制Worker发起fetch）：

• 维护内存队列（如const logQueue = []），按时间/大小/间隔做节流（如每2s或满10条批量上报）
• 对重复错误（如相同stack trace在10s内出现3次）做去重或计数聚合，减少冗余上报
• 支持日志分级：warn及以上级别立即上报；debug/info类可采样（如10%概率）或仅本地存储供调试

安全上报：避免阻塞与失败丢失

日志上报不能影响业务逻辑，需异步、容错、可恢复：

• 使用sendBeacon()替代fetch/XHR，确保页面卸载时日志仍能发出（兼容性需检查，不支持时降级为img打点）
• 上报失败时将日志存入IndexedDB（主线程）或localStorage（Worker中可用self.localStorage受限，推荐主线程托管），后续页面加载时补报
• 上报接口应支持gzip压缩、字段精简（如用l代替level）、批处理，降低带宽与解析开销

上下文增强：补充关键运行时信息

单条日志缺乏环境上下文难以定位问题，需在采集阶段注入：

• 设备信息：navigator.userAgent、screen.width、是否启用离线模式
• 应用状态：当前路由、用户登录态（脱敏后）、AB实验分组ID
• 性能线索：若日志由长任务触发，附带performance.now()差值；若来自ErrorEvent，提取error.stack和error.filename

不复杂但容易忽略：所有线程的log调用必须经过同一套序列化逻辑，避免JSON.stringify时丢失function或undefined字段；建议用structuredClone()（现代浏览器）或轻量polyfill保障数据完整性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！