模块化 worker 错误处理需分层响应、主动上报、可追溯、可恢复:worker 端用 self.onerror + try/catch 双保险捕获不同阶段错误并结构化上报;主线程按 requestid 匹配响应、错误后自动重建;构建阶段预防路径、语法、打包问题;调试时启用 source map、命名 worker、添加前缀日志并节流上报。

在模块化 Worker 中优雅处理错误,关键不是“捕获就完事”,而是建立分层响应、主动上报、可追溯、可恢复的机制。它需要主线程和 Worker 两端协同,不能只靠 try/catch。
Worker 内部:用 self.onerror + try/catch 双保险
模块化 Worker({ type: 'module' })中无法使用 window.onerror,必须用 self.onerror 捕获未被包裹的全局错误(如语法错误、模块加载失败、顶层 Promise rejection)。同时,核心业务逻辑必须包裹在 try/catch 中,并通过 postMessage 主动上报结构化错误信息:
-
self.onerror适合捕获脚本加载、解析、初始化阶段的致命错误,比如import路径错、ES 模块语法非法 -
try/catch包裹计算主流程,能拿到具体错误堆栈和输入上下文,便于定位是数据问题还是逻辑缺陷 - 错误消息建议包含
type(如'COMPUTE_ERROR')、message、inputId(对应主线程请求 ID)、stack(开发环境可传,生产可裁剪)
主线程:按 requestId 匹配 + 错误后自动重建
普通 worker.onerror 只能告诉你“Worker 初始化失败”,但无法区分是网络问题、CSP 阻断,还是模块解析异常。更实用的做法是:
- 为每次
postMessage生成唯一requestId,并存入一个Map,关联其resolve和reject - 在
worker.onmessage中,检查返回消息是否含error字段;若有,从Map中取出对应reject并调用,再清理该 entry - 监听
worker.onerror作为兜底:一旦触发,说明 Worker 已不可用(比如脚本 404 或跨域),应立即terminate()并新建实例,避免后续请求全部挂起
模块工程中:利用构建工具提前暴露潜在错误
模块化 Worker 的错误常在构建阶段就埋下伏笔。例如 Vite 或 Webpack 项目中:
- 确保
worker.js的import路径在构建产物中真实存在,避免运行时报Failed to load module - 开启构建时的 TypeScript 类型检查或 ESLint 规则(如
no-undef、no-unused-vars),减少 Worker 内低级语法错误 - 若 Worker 引用了
node_modules中的包,确认已通过worker-plugin或rollup-plugin-web-worker正确打包,而非直接import未转译代码
调试与可观测性:让错误真正“可见”
模块 Worker 在 DevTools 中默认不显示源码映射(source map),导致错误堆栈难以阅读。要提升可观测性:
- 构建时启用 source map(如 Vite 的
build.sourcemap: true),并在 Worker 构造时加上name选项便于识别:new Worker('./worker.js', { type: 'module', name: 'data-processor' }) - 在 Worker 内统一加前缀日志:
console.error('[Worker:data-processor] Calculation failed:', err) - 对高频错误(如连续 3 次同类型失败)做节流上报,避免刷屏干扰
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











