web worker异常需在worker内监听并上报,主线程接收处理:worker中用self.addeventlistener('error')或self.onerror捕获同步错误,用unhandledrejection捕获promise拒绝;主线程通过worker.onmessage和worker.onerror分层接收,错误需序列化关键字段避免丢失。

Web Worker 的异常不会自动冒泡到主线程,也不能靠 window.onerror 捕获。必须在 Worker 内部主动监听错误,并通过 postMessage 主动上报,主线程再做接收和处理——这是唯一可靠、可落地的监控路径。
Worker 线程内必须注册 self.onerror 或 error 事件
Worker 运行在独立全局上下文,self 是其等价于主线程 window 的对象。所有未捕获的同步错误(如 ReferenceError)、脚本加载失败(importScripts 报错)、运行时异常,都需在 Worker 脚本中显式监听:
-
self.addEventListener('error', e => { /* 处理并上报 */ })—— 推荐写法,语义清晰,支持e.preventDefault()阻止控制台默认输出 -
self.onerror = (message, filename, lineno, colno, error) => { /* 同样可上报 */ }—— 兼容性好,接收标准五参数
别漏掉 Promise 拒绝这类“静默错误”
未 .catch() 的 Promise.reject() 不会触发 self.onerror,错误会被完全忽略。必须额外监听:
self.addEventListener('unhandledrejection', e => { self.postMessage({ type: 'worker-unhandled-rejection', reason: e.reason }); })- 该事件不默认启用,漏掉即等于放弃捕获异步拒绝链中的错误
主线程要分两层接收错误消息
Worker 无法直接触发主线程的错误事件,但可通过结构化消息主动通知。主线程需同时监听两类事件:
-
worker.onmessage:解析event.data.type === 'error'或类似标识,提取payload做日志、告警或降级 -
worker.onerror:捕获 Worker 初始化阶段的底层失败,比如脚本 404、CORS 错误、语法错误导致创建失败
建议统一用 { type: 'error', payload: { name, message, stack, timestamp } } 格式上报,避免与业务消息混淆。
传递错误时注意序列化限制
postMessage 使用结构化克隆算法,不能直接传 Error 实例(会丢失 stack、name 等属性):
- 手动提取关键字段:
error.name、error.message、error.stack(Chrome/Firefox 支持) - 避免传函数、
undefined、循环引用对象;可用JSON.stringify(new Error().stack)验证是否可序列化 - 主线程收到后可重建
new Error(payload.message)并赋值stack和name,便于调试工具识别











