React应用中Web Workers随机崩溃（chunk.js已取消错误）

环境设置 #

基于create-react-app构建的React应用，使用Web Workers实现多线程。主Worker会创建CPU核心数减一个的子Worker并行执行任务。

子Worker创建代码：

const childWorker = new Worker(new URL(`./pathToWorker.worker.js`, import.meta.url), { name: `child_worker-${index + 1}` });

• 主Worker创建方式与上述一致

子Worker文件pathToWorker.worker.js内容：

import { ChildJobExecutor } from "./childJobExecutor";

const childJobExecutor = new ChildJobExecutor();

onmessage = (message) => childJobExecutor[message.data[0]](...message.data[1]);

• 注：ChildJobExecutor实现无问题，崩溃时甚至未完成初始化

问题描述 #

创建多个子Worker时，多数情况运行正常，但偶尔会随机出现一个或多个Worker创建后立即崩溃，无规律可循。

崩溃时的现象 #

• Chrome开发者工具网络面板中，崩溃Worker对应的chunk.js显示已取消状态
• 子Worker崩溃前未执行构造函数
• worker.onError多数情况下数据缺失，错误消息为undefined；仅出现过一次“network changed”错误（当时连接以太网）

已尝试的解决方案 #

• 延迟500ms创建Worker，问题仍存在
• 更新Chrome至最新版本，问题仍存在

补充信息 #

• 曾出现ChatGPT频繁断开并显示“network changed”错误，现已解决，但当前问题依旧
• Firefox环境下未出现该问题
• 切换以太网、WiFi及不同网络时均会触发问题

环境版本 #

• Chrome: 129.0.6668.100
• Node: 18.17.0
• npm: 10.7.0
• react-scripts: "^5.0.0"
• OS: Ubuntu 20.04.6 LTS

可能原因及解决建议 #

1. Chrome的Worker资源竞争/加载优先级问题 #

Chrome在并行加载多个Worker脚本时，可能会因为资源调度策略取消部分请求。可尝试：

• 串行创建Worker：避免一次性循环创建所有子Worker，在上一个Worker成功初始化后再创建下一个，减少并行请求竞争。示例代码：

async function createChildWorkers(count) {
  const workers = [];
  for (let i = 0; i < count; i++) {
    await new Promise((resolve) => {
      const worker = new Worker(new URL(`./pathToWorker.worker.js`, import.meta.url), { name: `child_worker-${i + 1}` });
      // 监听Worker初始化完成的自定义消息，或用onerror兜底
      worker.onmessage = () => resolve();
      worker.onerror = () => resolve();
      workers.push(worker);
    });
  }
  return workers;
}

• 预加载Worker脚本：在应用初始化阶段提前加载Worker的chunk文件，避免创建时的并行请求冲突。

2. Chrome的网络缓存/Service Worker干扰 #

若应用使用了Service Worker，可能在缓存Worker脚本时出现异常：

• 临时禁用Service Worker（Chrome开发者工具>Application>Service Workers中勾选“Bypass for network”），测试问题是否消失。
• 检查react-scripts的Service Worker配置，确保Worker脚本被正确排除在缓存规则外。

3. React Scripts 5.x的Worker打包问题 #

create-react-app 5.x基于webpack 5打包Worker，可能存在打包后的chunk加载不稳定的情况：

• 使用craco或eject修改配置，手动引入worker-loader替代默认的Worker打包逻辑。
• 升级react-scripts至最新版本，查看是否修复了相关打包问题。

4. 添加错误重试机制 #

针对Worker创建失败的场景，添加自动重试逻辑，确保服务可用性：

function createWorkerWithRetry(index, retries = 3) {
  return new Promise((resolve, reject) => {
    const worker = new Worker(new URL(`./pathToWorker.worker.js`, import.meta.url), { name: `child_worker-${index + 1}` });
    let failed = false;

    worker.onerror = (err) => {
      failed = true;
      if (retries > 0) {
        worker.terminate();
        resolve(createWorkerWithRetry(index, retries - 1));
      } else {
        reject(err);
      }
    };

    // 监听Worker初始化完成消息
    worker.onmessage = () => !failed && resolve(worker);

    // 超时处理：3秒未初始化则视为失败
    setTimeout(() => {
      if (!failed) {
        failed = true;
        worker.terminate();
        retries > 0 ? resolve(createWorkerWithRetry(index, retries - 1)) : reject(new Error(`Worker ${index+1} timed out`));
      }
    }, 3000);
  });
}

关于“network changed”错误的关联 #

该错误更可能是Chrome加载Worker时的表象，而非根本原因。切换不同网络仍出现问题，说明核心问题在于Chrome的Worker加载机制或打包逻辑，而非网络本身的稳定性。

内容的提问来源于stack exchange，提问作者timofei