面试题：TypeScript封装Web Worker通信协议时如何处理错误

Question

在使用TypeScript封装Web Worker通信协议过程中，当Worker脚本执行任务出错，或者主脚本与Worker脚本通信出现异常时，需要有一套合理的错误处理机制。请阐述你会如何设计错误处理流程，包括如何在主脚本和Worker脚本中抛出、捕获和处理错误，并且用TypeScript代码示例说明关键部分。

Answer 1

1. 在 Worker 脚本中抛出错误

在 Worker 脚本中，可以使用 postMessage 方法将错误信息发送回主脚本。

// worker.ts
self.onmessage = function (event) {
    try {
        // 模拟任务
        if (event.data === 'error') {
            throw new Error('任务执行出错');
        }
        // 正常处理任务
        self.postMessage('任务成功完成');
    } catch (error) {
        self.postMessage({
            error: true,
            message: (error as Error).message
        });
    }
};

2. 在主脚本中捕获和处理错误

主脚本通过监听 message 事件来接收 Worker 脚本发送的消息，并对错误进行处理。

// main.ts
const worker = new Worker('worker.ts');

worker.onmessage = function (event) {
    if ((event.data as { error: boolean }).error) {
        console.error('Worker 脚本错误:', (event.data as { message: string }).message);
    } else {
        console.log('Worker 脚本成功:', event.data);
    }
};

worker.onerror = function (error) {
    console.error('主脚本与 Worker 脚本通信异常:', error);
};

// 向 Worker 脚本发送数据
worker.postMessage('正常数据');
// 模拟触发错误
worker.postMessage('error');

3. 错误处理流程说明

• Worker 脚本中：在任务执行过程中，如果出现错误，通过 catch 块捕获错误，并使用 postMessage 方法将错误信息发送回主脚本。
• 主脚本中：通过监听 worker 的 message 事件，判断接收到的数据是否包含错误标识 error，如果包含则处理错误信息；同时通过监听 worker 的 error 事件来捕获主脚本与 Worker 脚本通信出现的异常。