Web Worker初始化崩溃却无报错信息的技术问题求助

问题描述 #

创建存在缺陷的模块类型Web Worker时，Worker会立即终止，但浏览器控制台未显示任何错误信息，该问题在Firefox和Chrome中均可复现。测试代码如下：

let code = `
import { crash } from "./nowhere.js"; 
console.log("hi"); // Never gets executed
`;

let alternateCode = `
console.log("hi");
throw new Error("normal errors do show up in the browser console");
`;

let blob = new Blob([code], {
            type: 'application/javascript'
        });

let blobURL = window.URL.createObjectURL(blob);
let worker = new Worker(blobURL, {type: "module"});
worker.onmessage = (data) => {
    console.log(data);
};
worker.postMessage("start");

原因分析 #

这是因为模块类型的Web Worker和传统脚本Worker的错误处理逻辑存在差异：

• 主动抛出的错误属于运行时错误，会正常上报到主进程控制台；
• 导入不存在的模块属于模块加载阶段错误，这类错误默认不会冒泡到主进程控制台，早期浏览器也不会触发Worker的onerror回调。

解决方法 #

1. 为主进程的Worker实例添加错误监听器 #

通过addEventListener监听Worker的error事件，可以捕获到模块加载阶段的错误：

let code = `
import { crash } from "./nowhere.js"; 
console.log("hi"); // Never gets executed
`;

let blob = new Blob([code], {
    type: 'application/javascript'
});

let blobURL = window.URL.createObjectURL(blob);
let worker = new Worker(blobURL, {type: "module"});

// 捕获Worker的加载/运行错误
worker.addEventListener('error', (error) => {
    console.error('Worker错误:', error.message, error.filename, error.lineno);
});

worker.onmessage = (data) => {
    console.log(data);
};
worker.postMessage("start");

2. 在Worker内部用动态导入捕获错误 #

使用动态导入（import()）替代顶级导入，就能用try/catch在Worker内部捕获加载失败的情况，还可以将错误信息发送回主进程：

let code = `
try {
    const { crash } = await import("./nowhere.js");
    console.log("hi");
} catch (err) {
    console.error('Worker内部导入失败:', err);
    // 向主进程发送错误信息
    postMessage({ type: 'error', msg: err.message });
}
`;

let blob = new Blob([code], {
    type: 'application/javascript'
});

let blobURL = window.URL.createObjectURL(blob);
let worker = new Worker(blobURL, {type: "module"});

worker.onmessage = (data) => {
    if (data.data.type === 'error') {
        console.error('Worker传来的错误:', data.data.msg);
    } else {
        console.log(data);
    }
};
worker.postMessage("start");

3. 直接查看Worker上下文的控制台 #

在浏览器DevTools中，切换到对应Worker的上下文（Chrome在Console面板的下拉菜单选择Worker，Firefox在调试器的线程面板找到Worker），就能看到Worker内部的原始错误日志。

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