Web Worker 报错需按通信失败、执行出错、环境限制三类场景梳理：通信类如传不可序列化对象或worker实例为null；执行类如误用document/console；环境类如跨域、404或Service Worker注册时机错误。
Web Worker 报错不难记，关键不是背错误字符串，而是抓住三类典型场景——通信失败、执行出错、环境限制。按这个逻辑梳理，比死记硬背快得多。
一、主线程和 Worker 通信中断类
这类错误多发生在 postMessage 或 onmessage 环节，本质是消息没送出去或没收到：
-
“Failed to execute 'postMessage' on 'Worker': function X can't be cloned”：传了函数、DOM 节点、Date 对象等不可序列化的东西。只传 plain object、Array、Number、String、Boolean、null，或用
transferable传 ArrayBuffer/TypedArray/MessagePort -
“Uncaught TypeError: Cannot read property 'postMessage' of null”：Worker 实例创建失败（比如路径错、404），
worker变量是null，调用前先判空 -
“DataCloneError: An object could not be cloned”：尝试传了循环引用对象或包含 DOM 元素的结构。用
JSON.stringify(obj)预检是否可序列化
二、Worker 内部执行报错类
Worker 是独立上下文，很多主线程习以为常的东西它根本没有：
-
“ReferenceError: document is not defined” / “document.getElementById is not a function”：最常见坑。Worker 没有
window、document、localStorage、console.log（要用self.console.log） -
“SyntaxError: Unexpected token”：Worker 脚本本身语法错误，比如 ES6+ 未转译、缺少分号导致 ASI 失败，或 MIME 类型不对（确保服务器返回
Content-Type: application/javascript） - “TypeError: Cannot set property 'xxx' of undefined”：Worker 里访问了未初始化的变量或对象属性。Worker 不共享主线程作用域，所有依赖必须显式传入
三、注册与生命周期异常类
这类错误往往暴露更底层的问题，比如主线程被卡住或路径配置错：
- “DOMException: Failed to register a ServiceWorker: InvalidStateError”：注意这不是 Worker 错误，是 Service Worker 注册失败。但常因主线程长期阻塞（如十万行同步 filter）导致注册时机错过
- “SecurityError: Failed to construct 'Worker': Script at 'xxx' cannot be accessed from origin 'xxx'”：跨域限制。Worker 脚本必须同源，不能从 cdn 或不同域名加载
- “Worker script load failed: 404”：路径写错、构建后文件未输出、publicPath 配置偏差。检查 Network 面板看 worker.js 是否真实返回 200
记法就一条：看到报错，先问三个问题——它发生在哪端？（主线程 or Worker）涉及什么操作？（通信 / 执行 / 注册）动了哪些主线程专属对象？答完基本就定位清楚了。
