Z
ZHANK
进阶技巧

错误处理模式

自定义错误类、错误边界、Promise 错误捕获、全局错误监听

错误处理模式

try/catch 只是起点——自定义错误类、Promise 全局捕获、错误边界构成完整的错误处理体系。

学完本章你将: 掌握自定义错误类、Promise 错误捕获、全局错误监听。


自定义错误类

javascript
class NetworkError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = "NetworkError";
        this.statusCode = statusCode;
    }
}

class ValidationError extends Error {
    constructor(message, errors = []) {
        super(message);
        this.name = "ValidationError";
        this.errors = errors;
    }
}

// 选择性捕获
try {
    await fetchData();
} catch (err) {
    if (err instanceof NetworkError) {
        retry();
    } else if (err instanceof ValidationError) {
        showErrors(err.errors);
    } else {
        throw err;  // 未知错误继续抛出
    }
}

Promise 全局捕获

javascript
// 未处理的 Promise rejection
window.addEventListener("unhandledrejection", event => {
    console.error("未捕获的 Promise 错误:", event.reason);
    // 上报到错误追踪服务
    event.preventDefault();  // 阻止默认的 console 警告
});

全局错误监听

javascript
window.onerror = (message, source, line, col, error) => {
    console.error("全局错误:", { message, source, line, error });
    return true;  // 阻止默认错误提示
};

// 注意:window.onerror 抓不到 Promise 错误
// Promise 错误用 unhandledrejection