JavaScript 异常处理：利用 try-catch 块与全局事件监听（onerror）的捕获优先级 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同仁、各位开发者，欢迎来到今天的技术讲座。

在JavaScript的世界里，错误是不可避免的。无论是用户输入错误、网络请求失败、还是我们自己代码中的逻辑漏洞，异常情况随时可能发生。如果不对这些异常进行妥善处理，轻则导致程序崩溃、用户体验下降，重则可能造成数据丢失、安全隐患。因此，构建一个健壮、可靠的JavaScript应用，异常处理是其中不可或缺的一环。

今天，我们将深入探讨JavaScript异常处理的两大核心机制：try-catch 块与全局事件监听（window.onerror 和 window.addEventListener('error')）。我们将详细剖析它们各自的职责、使用场景，并重点关注它们的捕获优先级和相互作用。理解这些机制的深层逻辑，将帮助我们搭建一个全面且高效的错误监控与恢复系统。

一、异常与错误：JavaScript中的“不速之客”

在深入讨论处理机制之前，我们首先需要明确“异常”或“错误”在JavaScript中究竟指什么。

1. 什么是JavaScript错误？

JavaScript中的错误是一个Error对象的实例。当程序执行过程中发生非预期情况时，JavaScript引擎会抛出一个错误。这个Error对象及其派生类包含了错误的类型、描述信息以及错误发生时的调用栈（stack trace），这些信息对于调试和理解错误至关重要。

常见的错误类型包括：

Error: 所有错误对象的基类。
TypeError: 当一个值不是预期的类型时抛出。例如，调用一个非函数的值。
ReferenceError: 当引用一个未声明的变量时抛出。
RangeError: 当一个数字超出有效范围时抛出。例如，Array构造函数接收一个负数作为长度。
SyntaxError: 当解析代码时遇到语法错误时抛出。这通常发生在代码执行之前。
URIError: 当全局URI处理函数（如decodeURI）参数无效时抛出。
EvalError: 在旧版本的JavaScript中与eval()函数相关，现代JavaScript中已很少使用。
AggregateError: 一个特殊的错误类型，用于表示同时发生多个错误的情况，例如在Promise.any()中所有Promise都失败时。
InternalError: (非标准) JavaScript引擎内部错误，比如栈溢出，通常表示JavaScript引擎本身的限制或问题。

示例：不同类型的错误

// ReferenceError
try {
    console.log(undeclaredVariable);
} catch (error) {
    console.error("捕获到ReferenceError:", error.message);
    console.error("错误类型:", error.name);
    console.error("调用栈:n", error.stack);
}

// TypeError
try {
    const obj = null;
    obj.method(); // 尝试调用null的方法
} catch (error) {
    console.error("捕获到TypeError:", error.message);
    console.error("错误类型:", error.name);
    console.error("调用栈:n", error.stack);
}

// RangeError
try {
    new Array(-1); // 数组长度为负数
} catch (error) {
    console.error("捕获到RangeError:", error.message);
    console.error("错误类型:", error.name);
    console.error("调用栈:n", error.stack);
}

// 自定义错误
class CustomError extends Error {
    constructor(message, code) {
        super(message);
        this.name = "CustomError";
        this.code = code;
    }
}

try {
    throw new CustomError("这是一个人为的自定义错误", 500);
} catch (error) {
    if (error instanceof CustomError) {
        console.error("捕获到CustomError:", error.message, "Code:", error.code);
    } else {
        console.error("捕获到未知错误:", error.message);
    }
}

2. 为什么需要错误处理？

提升用户体验： 避免白屏、页面崩溃，提供友好的错误提示或优雅降级方案。
便于调试与维护： 通过错误日志和堆栈信息快速定位问题，缩短开发周期。
保障数据完整性： 在关键操作失败时，能够回滚或阻止不一致状态的发生。
系统稳定性： 防止单个错误导致整个应用或服务中断。

二、局部错误处理：`try-catch` 块

try-catch 块是JavaScript中最基本、最直接的错误处理机制。它允许我们在代码的特定区域内监听并捕获可能发生的同步错误。

1. try-catch-finally 语法

一个完整的try-catch结构可以包含finally块：

try {
    // 可能会抛出错误的代码块
    // 如果这里发生错误，执行会立即跳转到catch块
} catch (error) {
    // 错误处理代码块
    // 捕获到错误时，此块被执行
    // error 参数是一个Error对象，包含错误信息
} finally {
    // 无论try块是否抛出错误，也无论catch块是否被执行，
    // finally块中的代码总会被执行。
    // 通常用于资源清理，如关闭文件句柄、释放锁等。
}

2. try-catch 的工作原理

当JavaScript引擎执行try块中的代码时：

如果没有发生错误，try块正常执行完毕，然后跳过catch块（如果存在），直接执行finally块（如果存在）。
如果发生错误，try块中错误点之后的代码将停止执行。引擎会立即跳转到catch块，并将抛出的Error对象作为参数传递给catch块。catch块执行完毕后，再执行finally块（如果存在）。

3. finally 块的用途

finally块提供了一个无论try块成功还是失败都保证会执行代码的机制。这对于资源管理（如关闭数据库连接、释放文件锁、清除定时器等）非常有用，确保即使发生错误，也能正确清理。

示例：try-catch-finally

function processData(data) {
    let connection = null; // 模拟一个资源

    try {
        console.log("尝试连接资源...");
        connection = { status: "open" }; // 模拟资源打开

        if (data === null || data === undefined) {
            throw new TypeError("输入数据无效，不能为null或undefined");
        }
        if (typeof data !== 'string') {
            throw new Error("数据类型必须是字符串");
        }

        console.log("数据处理中:", data.toUpperCase()); // 可能会因数据类型不符报错
        return "处理成功";

    } catch (error) {
        console.error("捕获到错误:", error.name, "-", error.message);
        // 根据错误类型做不同的处理
        if (error instanceof TypeError) {
            console.warn("请检查数据类型。");
        } else {
            console.error("发生了一个未知错误。");
        }
        return "处理失败"; // 错误发生时返回失败状态
    } finally {
        // 无论try或catch是否成功，都确保资源被关闭
        if (connection && connection.status === "open") {
            console.log("关闭资源连接...");
            connection.status = "closed";
        }
        console.log("try-catch-finally 块执行完毕。");
    }
}

console.log(processData("hello world"));
// 输出:
// 尝试连接资源...
// 数据处理中: HELLO WORLD
// 关闭资源连接...
// try-catch-finally 块执行完毕。
// 处理成功

console.log("n---");
console.log(processData(null));
// 输出:
// 尝试连接资源...
// 捕获到错误: TypeError - 输入数据无效，不能为null或undefined
// 请检查数据类型。
// 关闭资源连接...
// try-catch-finally 块执行完毕。
// 处理失败

console.log("n---");
console.log(processData(123)); // 故意传递错误类型
// 输出:
// 尝试连接资源...
// 捕获到错误: Error - 数据类型必须是字符串
// 发生了一个未知错误。
// 关闭资源连接...
// try-catch-finally 块执行完毕。
// 处理失败

4. 捕获特定错误类型

在catch块中，我们可以通过instanceof操作符来判断捕获到的错误是哪种类型，从而进行更精细化的处理。

function parseConfig(jsonString) {
    try {
        const config = JSON.parse(jsonString);
        if (!config.apiUrl || typeof config.apiUrl !== 'string') {
            throw new TypeError('配置中缺少或apiUrl类型不正确');
        }
        return config;
    } catch (error) {
        if (error instanceof SyntaxError) {
            console.error("配置解析失败：JSON格式错误。", error.message);
            // 可能是用户输入有误，可以提示用户重新输入
        } else if (error instanceof TypeError) {
            console.error("配置验证失败：", error.message);
            // 可能是配置内容不符合预期，提供默认值
            return { apiUrl: '/default-api' };
        } else {
            console.error("发生未知配置错误：", error.message);
            throw error; // 重新抛出不认识的错误，让上层处理或全局捕获
        }
    }
}

console.log(parseConfig('{"apiUrl": "/api/v1"}')); // 正常
console.log(parseConfig('{"apiUrl": 123}'));       // TypeError
console.log(parseConfig('{"apiUrl": "/api/v1"'));  // SyntaxError

5. try-catch 的局限性

尽管try-catch非常有用，但它有几个重要的局限性：

只能捕获同步错误： try-catch无法直接捕获在其try块中启动的异步操作中发生的错误。这是因为异步回调函数在事件循环的未来某个时刻执行，此时原始的try-catch块已经执行完毕并退出了其执行上下文。
作用域限制： try-catch只能捕获其自身try块内部的错误。如果错误发生在try-catch块之外，它将无法捕获。
阻止错误传播： 一旦错误被catch块捕获，它就被“处理”了，默认情况下不会再向上传播。如果需要，可以在catch块中重新throw错误。

三、全局错误处理：`window.onerror` 与 `window.addEventListener('error')`

当try-catch力所不及，或者我们根本没有预料到某个地方会发生错误时，全局错误处理器就成为了我们最后的防线。它们可以在浏览器环境中捕获任何未被捕获的同步错误以及一些异步错误。

1. window.onerror (较旧但仍广泛使用)

window.onerror 是一个事件处理函数，当未被捕获的JavaScript错误发生时，浏览器会调用它。

语法：

window.onerror = function(message, source, lineno, colno, error) {
    // message: 错误消息字符串
    // source: 发生错误的脚本URL
    // lineno: 发生错误的行号
    // colno: 发生错误的列号
    // error: 错误对象（并非所有浏览器都提供，或信息不完整）

    console.error("全局捕获 (onerror):", message, "来自", source, "在", lineno + ":" + colno);
    console.error("原始错误对象:", error);

    // 返回 true 表示错误已处理，阻止浏览器默认的错误报告（如在控制台打印）。
    // 返回 false (或不返回值) 表示错误未被完全处理，允许浏览器继续报告。
    return true; 
};

2. window.addEventListener('error') (推荐的现代方法)

window.addEventListener('error') 是更现代、更强大的全局错误捕获机制，它使用事件监听器模型。

语法：

window.addEventListener('error', function(event) {
    // event 是一个 ErrorEvent 对象
    // event.message: 错误消息字符串
    // event.filename: 发生错误的脚本URL
    // event.lineno: 发生错误的行号
    // event.colno: 发生错误的列号
    // event.error: 实际的Error对象，通常包含完整的堆栈信息 (这是它比onerror更优的关键点)

    console.error("全局捕获 (addEventListener):", event.message, "来自", event.filename, "在", event.lineno + ":" + event.colno);
    console.error("原始错误对象:", event.error);

    // event.preventDefault() 可以阻止浏览器默认的错误报告行为。
    event.preventDefault(); 
});

addEventListener('error') 相对于 onerror 的优势：

提供完整的错误对象： ErrorEvent.error 属性直接提供了原始的Error对象，包含完整的stack信息，这对于调试至关重要。而onerror的error参数在某些旧浏览器或特定情况下可能缺失或不完整。
支持多重监听器： 可以注册多个error事件监听器，它们会按注册顺序依次执行。onerror是单例的，新的赋值会覆盖旧的。
更符合现代事件模型： 与其他DOM事件处理方式保持一致。
可以捕获资源加载错误： 除了JavaScript运行时错误，window.addEventListener('error') 还能捕获到诸如图片、脚本、样式表等资源加载失败的错误（例如，<img>标签加载了一个不存在的图片，其onerror事件会触发，同时window上的error事件也会被触发）。

示例：全局错误捕获

// 注册全局错误监听器 (推荐使用 addEventListener)
window.addEventListener('error', function(event) {
    console.error("--- 全局错误捕获器触发 ---");
    console.error("错误信息:", event.message);
    console.error("文件名:", event.filename);
    console.error("行号:", event.lineno);
    console.error("列号:", event.colno);
    console.error("错误对象:", event.error); // 最重要的部分，提供堆栈
    console.error("--- 结束全局错误捕获 ---");

    // 通常在这里将错误信息发送到远程日志服务
    // sendErrorToRemoteService({
    //     message: event.message,
    //     url: event.filename,
    //     line: event.lineno,
    //     column: event.colno,
    //     stack: event.error ? event.error.stack : 'N/A'
    // });

    event.preventDefault(); // 阻止浏览器默认的错误处理，例如在控制台打印错误
});

// 模拟一个同步的、未被try-catch捕获的错误
console.log("即将抛出一个未捕获的同步错误...");
// 这会触发 window.addEventListener('error')
nonExistentFunction(); 
console.log("这行代码不会执行，因为前面的错误是致命的。");

// 模拟一个异步错误，同样会被全局捕获
setTimeout(() => {
    console.log("n即将抛出一个setTimeout中的异步错误...");
    // 异步代码中的错误，外层try-catch无法捕获，但全局捕获器可以
    throw new Error("这是setTimeout中的一个错误！");
}, 100);

// 模拟资源加载错误 (注意：如果图片路径正确，这个错误不会发生)
// const img = document.createElement('img');
// img.src = 'non-existent-image.jpg'; // 这是一个不存在的图片路径
// img.onerror = () => console.warn('图片加载失败的局部处理'); // 局部处理
// document.body.appendChild(img); // 附加到DOM后会尝试加载，然后触发全局error事件

3. 跨域脚本错误 ("Script error.")

当JavaScript脚本来自不同源（不同域名、端口或协议）时，如果该脚本发生错误，为了安全考虑，浏览器会隐藏实际的错误信息，只报告一个泛型的 "Script error."。

解决方案：

在 <script> 标签上添加 crossorigin="anonymous" 属性。
确保服务器在响应JavaScript文件时设置了 Access-Control-Allow-Origin HTTP响应头，允许你的域名访问。

<!-- index.html (your domain) -->
<script crossorigin="anonymous" src="http://another-domain.com/remote-script.js"></script>

// remote-script.js (on another-domain.com)
// 服务器响应头需要包含: Access-Control-Allow-Origin: your-domain.com
// 或者更宽松的 Access-Control-Allow-Origin: * (不推荐用于生产环境)

// 假设 remote-script.js 中有如下错误
setTimeout(() => {
    // 如果没有 crossorigin 和 CORS 头，这里只会报告 "Script error."
    // 如果设置正确，就能看到完整的错误信息
    throw new Error("Error from cross-origin script!");
}, 50);

四、异步操作的错误处理：Promise 与 `async/await`

在现代JavaScript中，大量的操作都是异步的。try-catch无法直接捕获异步回调中的错误，因此我们需要专门的机制来处理它们。

1. Promise 的 .catch() 方法

Promise 提供了一种结构化的方式来处理异步操作的结果和错误。.catch() 方法是专门用于捕获Promise链中任何一个Promise的拒绝（rejection）的。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.5) {
                resolve({ data: "数据加载成功！" });
            } else {
                reject(new Error("数据加载失败！")); // reject一个错误
            }
        }, 500);
    });
}

fetchData()
    .then(result => {
        console.log("Promise成功:", result.data);
        return result.data.toUpperCase(); // 可能会抛出错误，例如 result.data 不是字符串
    })
    .then(upperData => {
        console.log("转换后的数据:", upperData);
    })
    .catch(error => { // 捕获整个Promise链中的任何错误
        console.error("Promise链中捕获到错误:", error.message);
        // 如果这里没有catch，未处理的Promise拒绝会触发 unhandledrejection
    });

2. async/await 与 try-catch

async/await 语法使得异步代码看起来和写起来更像同步代码。这允许我们结合 try-catch 来处理 await 表达式可能抛出的错误。当 await 一个被拒绝的 Promise 时，它会像同步代码一样抛出一个错误，从而可以被外部的 try-catch 捕获。

async function processAsyncData() {
    try {
        console.log("开始异步数据处理...");
        // 模拟一个可能失败的异步操作
        const response = await new Promise((resolve, reject) => {
            setTimeout(() => {
                if (Math.random() > 0.5) {
                    resolve("API响应数据");
                } else {
                    reject(new Error("API调用失败!"));
                }
            }, 300);
        });

        console.log("接收到响应:", response);

        // 模拟一个后续可能失败的同步操作
        if (response.length < 5) {
            throw new Error("响应数据过短");
        }

        console.log("异步处理完成。");
        return response;

    } catch (error) {
        console.error("async/await try-catch 捕获到错误:", error.message);
        // 这里可以根据错误类型进行恢复或记录
        return "处理失败，提供默认值";
    } finally {
        console.log("async/await 块执行完毕。");
    }
}

processAsyncData();
processAsyncData(); // 再次调用，观察不同结果

3. window.addEventListener('unhandledrejection')

当一个Promise被拒绝，但没有任何 .catch() 处理程序来捕获这个拒绝时，它就成为了一个“未处理的拒绝”（unhandled rejection）。浏览器会触发 unhandledrejection 事件。这为我们提供了一个全局的捕获 Promise 未处理错误的机会。

语法：

window.addEventListener('unhandledrejection', function(event) {
    // event 是一个 PromiseRejectionEvent 对象
    // event.promise: 导致拒绝的 Promise 对象
    // event.reason: 拒绝的原因（通常是一个Error对象）

    console.error("--- 全局捕获 (unhandledrejection) 触发 ---");
    console.error("未处理的 Promise 拒绝:", event.reason);
    console.error("相关 Promise:", event.promise);
    console.error("--- 结束全局捕获 ---");

    // 通常在这里将错误信息发送到远程日志服务
    // sendErrorToRemoteService({
    //     message: event.reason ? event.reason.message : 'Unknown Promise Rejection',
    //     stack: event.reason ? event.reason.stack : 'N/A',
    //     type: 'Unhandled Promise Rejection'
    // });

    event.preventDefault(); // 阻止浏览器默认的控制台警告
});

// 模拟一个未处理的Promise拒绝
console.log("n即将抛出一个未处理的Promise拒绝...");
Promise.reject(new Error("这是一个没有被 .catch() 处理的 Promise 拒绝！"));

// 另一个被处理的Promise拒绝，不会触发 unhandledrejection
Promise.reject(new Error("这个 Promise 拒绝被处理了。"))
    .catch(err => console.log("Promise 拒绝被局部处理:", err.message));

注意： 某些浏览器在某些情况下，未处理的Promise拒绝也可能触发 window.addEventListener('error')。但 unhandledrejection 是专门为Promise拒绝设计的事件，提供的信息更精确。因此，建议同时监听这两个全局事件以确保全面覆盖。

五、捕获优先级：`try-catch` 与全局事件监听的互动

现在，我们来到了本次讲座的核心：try-catch 块与全局事件监听之间的捕获优先级。理解这一点对于设计一个合理的错误处理策略至关重要。

核心原则：局部优先于全局，同步优先于异步

try-catch 优先于 window.onerror / addEventListener('error') (同步代码)
如果一个错误发生在 try 块内部，并且被相应的 catch 块捕获，那么这个错误就不会再传播到 window.onerror 或 window.addEventListener('error')。try-catch 成功地“处理”了它。
异步错误：try-catch 无法直接捕获，全局处理器出马
try-catch 只能捕获同步执行流中的错误。如果在 try 块内部启动了一个异步操作（如 setTimeout 回调、Promise 链的 .then() 或 .catch() 之外的错误、事件监听器回调），并且这个异步操作内部抛出了错误，那么外层的 try-catch 是无法捕获的。此时，如果该异步错误没有在其自身的异步回调内部被处理（例如，setTimeout 回调内部的 try-catch，或 Promise 链的 .catch()），它就会成为一个未捕获的错误，并最终被 window.onerror 或 window.addEventListener('error') 捕获。
Promise 错误：.catch() 优先于 unhandledrejection
如果一个 Promise 被拒绝，并且在其链中有 .catch() 方法来处理这个拒绝，那么 window.addEventListener('unhandledrejection') 就不会被触发。只有当 Promise 拒绝完全没有被 .catch() 处理时，unhandledrejection 才会介入。

具体场景与代码示例：

让我们通过一系列代码示例来直观地理解这些优先级规则。

场景一：同步错误，被 try-catch 捕获

行为： try-catch 捕获并处理错误。全局 error 监听器不会触发。

// 全局错误监听器 (作为参照，看它是否触发)
window.addEventListener('error', (event) => {
    console.error('[全局捕获] 错误:', event.message);
    event.preventDefault();
});

console.log('--- 场景一: 同步错误，被 try-catch 捕获 ---');
try {
    console.log('在 try 块中执行...');
    const result = 1 / 0; // Infinity，不会抛错误
    throw new Error('这是一个在 try 块中抛出的同步错误。');
} catch (error) {
    console.warn('[局部捕获] try-catch 捕获到错误:', error.message);
}
console.log('try-catch 块后的代码继续执行。');
// 输出:
// --- 场景一: 同步错误，被 try-catch 捕获 ---
// 在 try 块中执行...
// [局部捕获] try-catch 捕获到错误: 这是一个在 try 块中抛出的同步错误。
// try-catch 块后的代码继续执行。
// (全局 error 监听器不会输出任何内容)

场景二：同步错误，未被 try-catch 捕获

行为： try-catch 不在场或超出范围，错误成为未捕获的同步错误。全局 error 监听器会触发。

// 全局错误监听器 (已在上方定义)

console.log('n--- 场景二: 同步错误，未被 try-catch 捕获 ---');
// 注意：为了让程序继续执行，这里用 setTimeout 模拟，实际同步错误会中断后续执行
setTimeout(() => {
    console.log('即将抛出一个未被 try-catch 捕获的同步错误...');
    nonExistentVariable.property = 1; // 抛出 ReferenceError
}, 10);
// 输出 (可能顺序不同，取决于浏览器):
// --- 场景二: 同步错误，未被 try-catch 捕获 ---
// 即将抛出一个未被 try-catch 捕获的同步错误...
// [全局捕获] 错误: nonExistentVariable is not defined (或其他类似信息)

场景三：异步错误，未被回调内部 try-catch 捕获

行为： 外部的 try-catch 无法捕获异步回调中的错误。错误成为未捕获的异步错误。全局 error 监听器会触发。

// 全局错误监听器 (已在上方定义)

console.log('n--- 场景三: 异步错误，未被回调内部 try-catch 捕获 ---');
try {
    console.log('外部 try 块执行，设置 setTimeout...');
    setTimeout(() => {
        console.log('setTimeout 回调执行...');
        throw new Error('这是 setTimeout 回调中的一个错误！'); // 此处抛出错误
    }, 20);
} catch (error) {
    console.warn('[局部捕获] 外部 try-catch 捕获到错误:', error.message); // 此处不会被触发
}
console.log('外部 try-catch 块后的代码继续执行。');
// 输出 (可能顺序不同):
// --- 场景三: 异步错误，未被回调内部 try-catch 捕获 ---
// 外部 try 块执行，设置 setTimeout...
// 外部 try-catch 块后的代码继续执行。
// setTimeout 回调执行...
// [全局捕获] 错误: 这是 setTimeout 回调中的一个错误！

场景四：异步错误，被回调内部 try-catch 捕获

行为： 异步回调内部的 try-catch 捕获并处理错误。全局 error 监听器不会触发。

// 全局错误监听器 (已在上方定义)

console.log('n--- 场景四: 异步错误，被回调内部 try-catch 捕获 ---');
setTimeout(() => {
    try {
        console.log('setTimeout 回调中，有内部 try-catch...');
        throw new Error('这是 setTimeout 回调中，被内部 try-catch 捕获的错误。');
    } catch (error) {
        console.warn('[局部捕获] 内部 try-catch 捕获到错误:', error.message);
    }
}, 30);
// 输出:
// --- 场景四: 异步错误，被回调内部 try-catch 捕获 ---
// setTimeout 回调中，有内部 try-catch...
// [局部捕获] 内部 try-catch 捕获到错误: 这是 setTimeout 回调中，被内部 try-catch 捕获的错误。
// (全局 error 监听器不会输出任何内容)

场景五：Promise 拒绝，被 .catch() 捕获

行为： Promise 的 .catch() 方法捕获并处理拒绝。全局 unhandledrejection 监听器不会触发。

// 全局 unhandledrejection 监听器 (作为参照)
window.addEventListener('unhandledrejection', (event) => {
    console.error('[全局捕获] unhandledrejection:', event.reason.message);
    event.preventDefault();
});

console.log('n--- 场景五: Promise 拒绝，被 .catch() 捕获 ---');
Promise.reject(new Error('这是一个被 .catch() 捕获的 Promise 拒绝。'))
    .catch(error => {
        console.warn('[局部捕获] Promise .catch() 捕获到拒绝:', error.message);
    });
// 输出:
// --- 场景五: Promise 拒绝，被 .catch() 捕获 ---
// [局部捕获] Promise .catch() 捕获到拒绝: 这是一个被 .catch() 捕获的 Promise 拒绝。
// (全局 unhandledrejection 监听器不会输出任何内容)

场景六：Promise 拒绝，未被 .catch() 捕获

行为： Promise 拒绝未被处理。全局 unhandledrejection 监听器会触发。

// 全局 unhandledrejection 监听器 (已在上方定义)

console.log('n--- 场景六: Promise 拒绝，未被 .catch() 捕获 ---');
Promise.reject(new Error('这是一个未被 .catch() 捕获的 Promise 拒绝！'));
// 输出 (可能顺序不同):
// --- 场景六: Promise 拒绝，未被 .catch() 捕获 ---
// [全局捕获] unhandledrejection: 这是一个未被 .catch() 捕获的 Promise 拒绝！

优先级总结表格：

错误类型 / 发生位置	`try-catch`	`Promise.catch()`	`async/await` 中的 `try-catch`	`window.addEventListener('error')`	`window.addEventListener('unhandledrejection')`
同步错误 (在 `try` 块内)	✅ 捕获并处理	❌	❌	❌ (被 `try-catch` 捕获则不触发)	❌
同步错误 (无 `try-catch`)	❌	❌	❌	✅ 捕获并处理	❌
异步回调错误 (无回调内 `try-catch`)	❌ (外部 `try-catch` 无效)	❌	❌	✅ 捕获并处理	❌ (除非是 Promise 拒绝)
异步回调错误 (有回调内 `try-catch`)	✅ 捕获并处理 (内部 `try-catch`)	❌	❌	❌ (被内部 `try-catch` 捕获则不触发)	❌
Promise 拒绝 (有 `.catch()`)	❌	✅ 捕获并处理	❌	❌	❌ (被 `.catch()` 捕获则不触发)
Promise 拒绝 (无 `.catch()`)	❌	❌	❌	✅ (某些浏览器/情况下也会触发)	✅ 捕获并处理
`async/await` 错误 (在 `try-catch` 内)	❌	❌	✅ 捕获并处理	❌ (被 `try-catch` 捕获则不触发)	❌
资源加载错误	❌	❌	❌	✅ 捕获并处理 (例如图片、脚本加载失败)	❌

六、最佳实践与策略构建

理解了捕获优先级后，我们就可以构建一个分层、健壮的错误处理策略。

1. 分层防御：本地处理 + 全局兜底

局部处理 (try-catch, Promise.catch(), async/await try-catch)：
- 用于处理预期内的、可以恢复或优雅降级的错误。
- 在关键业务逻辑、可能失败的API调用、用户输入校验等地方使用。
- 目标是让程序能够从特定错误中恢复，或至少提供用户友好的反馈，而不中断整个应用。
- 在 catch 块中，可以进行本地日志记录、回滚操作、显示提示信息等。
全局兜底 (window.addEventListener('error'), window.addEventListener('unhandledrejection'))：
- 作为最后的安全网，捕获所有未被局部处理的错误。
- 这些通常是非预期的、导致应用无法继续正常运行的“致命”错误。
- 在全局监听器中，主要职责是：
  - 记录错误： 详细记录错误信息，包括堆栈、URL、用户代理、用户ID等上下文信息。
  - 上报错误： 将错误发送到远程错误监控服务（如Sentry, Bugsnag, 或自定义后端），以便团队分析和修复。
  - 用户体验： 可以在此时显示一个通用的“抱歉，出错了”页面或弹窗，避免白屏，引导用户刷新或联系客服。
  - 防止重复报告： 可以对重复的错误进行节流，或根据错误类型进行过滤。

2. 错误信息与上下文

无论是局部还是全局捕获，尽可能收集详细的错误信息和上下文对于调试至关重要：

错误对象： error.name, error.message, error.stack。
发生位置： 文件名、行号、列号。
用户环境： 浏览器类型、版本、操作系统、设备信息。
用户状态： 登录ID、当前页面URL、操作路径、最近的用户行为。
应用状态： Redux/Vuex store 状态、组件 props/state（如果适用）。

3. 远程错误监控服务

将错误信息上报到专业的错误监控服务是现代前端开发的标准实践。这些服务不仅能收集错误，还能提供：

聚合与去重： 相同错误只记录一次，并统计发生次数。
告警通知： 通过邮件、Slack等方式通知团队。
版本追踪： 关联到代码版本，方便追溯。
Source Map 支持： 将压缩混淆后的代码堆栈映射回原始代码，方便定位。
用户反馈： 允许用户直接从错误页面提交反馈。

4. 开发与生产环境差异

开发环境： 错误信息应尽可能详细地打印到控制台，甚至可以中断执行，以便开发者立即发现问题。可以使用 console.error。
生产环境： 避免在控制台输出过多敏感信息。错误应该被静默地捕获并上报到监控服务。用户看到的是友好的提示。

综合示例：一个健壮的错误处理框架

// --- 1. 全局错误监听器 (兜底) ---
window.addEventListener('error', (event) => {
    // 阻止浏览器默认行为，避免双重报告或不友好提示
    event.preventDefault(); 

    const errorInfo = {
        type: 'Uncaught JavaScript Error',
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        stack: event.error ? event.error.stack : 'N/A',
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent,
        currentUrl: window.location.href,
        // 可以添加更多上下文信息，如用户ID、应用版本等
        context: {
            appVersion: '1.0.0',
            userId: getUserID(), // 假设有获取用户ID的函数
        }
    };

    console.error('⚠️ 全局捕获到未处理的JS错误:', errorInfo);
    sendErrorToMonitoringService(errorInfo);
    displayUserFriendlyErrorMessage();
});

// --- 2. 全局 Promise 拒绝监听器 (兜底) ---
window.addEventListener('unhandledrejection', (event) => {
    event.preventDefault();

    const errorInfo = {
        type: 'Unhandled Promise Rejection',
        message: event.reason ? event.reason.message : 'Unknown Promise Rejection',
        stack: event.reason ? event.reason.stack : 'N/A',
        timestamp: new Date().toISOString(),
        userAgent: navigator.userAgent,
        currentUrl: window.location.href,
        context: {
            appVersion: '1.0.0',
            userId: getUserID(),
        },
        // Promise 相关的额外信息
        promise: event.promise
    };

    console.error('⚠️ 全局捕获到未处理的Promise拒绝:', errorInfo);
    sendErrorToMonitoringService(errorInfo);
    displayUserFriendlyErrorMessage();
});

// --- 3. 模拟远程错误监控服务 ---
function sendErrorToMonitoringService(errorData) {
    // 在实际应用中，这里会通过 AJAX / fetch 将错误数据发送到后端或Sentry等服务
    console.log('--- 上报错误到监控服务 ---');
    console.log(JSON.stringify(errorData, null, 2));
    console.log('--------------------------');
    // fetch('/api/log-error', {
    //     method: 'POST',
    //     headers: { 'Content-Type': 'application/json' },
    //     body: JSON.stringify(errorData)
    // });
}

// --- 4. 模拟用户友好错误提示 ---
function displayUserFriendlyErrorMessage() {
    const errorDiv = document.getElementById('global-error-message');
    if (errorDiv) {
        errorDiv.textContent = '抱歉，页面遇到一个问题。请刷新页面或稍后再试。';
        errorDiv.style.display = 'block';
    } else {
        console.warn('请在HTML中添加 <div id="global-error-message" style="display:none; color: red;"></div>');
        alert('抱歉，页面遇到一个问题。请刷新页面或稍后再试。');
    }
}

// 假设获取用户ID的函数
function getUserID() {
    return 'user-123'; // 实际可能是从localStorage或认证token中获取
}

// --- 5. 业务代码中的局部错误处理示例 ---

// 局部处理同步操作
function validateAndProcessInput(input) {
    try {
        if (!input || typeof input !== 'string' || input.length === 0) {
            throw new TypeError('输入无效：必须是非空字符串。');
        }
        console.log(`处理输入: ${input.toUpperCase()}`);
        return true;
    } catch (error) {
        console.warn('局部处理：输入校验失败 ->', error.message);
        // 可以向用户显示特定提示
        return false;
    }
}

// 局部处理异步操作 (使用 async/await)
async function fetchUserData(userId) {
    try {
        console.log(`尝试获取用户 ${userId} 的数据...`);
        const response = await new Promise((resolve, reject) => {
            setTimeout(() => {
                if (Math.random() < 0.7) { // 70% 成功率
                    resolve({ id: userId, name: `User ${userId}`, email: `${userId}@example.com` });
                } else {
                    reject(new Error(`API请求失败: 无法获取用户 ${userId}。`));
                }
            }, 500);
        });
        console.log('成功获取用户数据:', response);
        return response;
    } catch (error) {
        console.error('局部处理：获取用户数据失败 ->', error.message);
        sendErrorToMonitoringService({
            type: 'FetchUserDataError',
            message: error.message,
            stack: error.stack,
            context: { userId: userId }
        });
        // 优雅降级，返回默认数据或空数据
        return { id: userId, name: '未知用户', email: 'N/A' };
    }
}

// --- 演示触发不同错误 ---
document.addEventListener('DOMContentLoaded', () => {
    // 为演示添加一个错误消息容器
    const body = document.body;
    const errorMsgDiv = document.createElement('div');
    errorMsgDiv.id = 'global-error-message';
    errorMsgDiv.style.cssText = 'display:none; padding:10px; background-color:#ffe0e0; border:1px solid red; margin-top:10px;';
    body.prepend(errorMsgDiv);

    console.log('n--- 演示开始 ---');

    // 1. 局部处理的同步错误
    validateAndProcessInput('valid input');
    validateAndProcessInput(null); // 触发局部错误

    // 2. 局部处理的异步错误 (async/await)
    fetchUserData('test-user-1');
    fetchUserData('test-user-2'); // 有概率失败并触发局部catch

    // 3. 未被局部处理的同步错误 (会被全局捕获)
    setTimeout(() => {
        console.log('n--- 模拟一个未捕获的同步错误 ---');
        // 故意引起一个ReferenceError，会被全局 error 监听器捕获
        // 注意：实际执行中，这个错误会中断后续的同步JS执行
        // 为了演示，这里用 setTimeout 延迟，避免立即中断本脚本
        if (Math.random() < 0.5) {
            nonExistentGlobalVariable.someProperty = 1;
        } else {
            console.log('本次未触发未捕获的同步错误');
        }
    }, 1000);

    // 4. 未被局部处理的Promise拒绝 (会被全局 unhandledrejection 捕获)
    setTimeout(() => {
        console.log('n--- 模拟一个未捕获的Promise拒绝 ---');
        if (Math.random() < 0.5) {
            Promise.reject(new Error('这是一个没有人管的Promise拒绝！'));
        } else {
            console.log('本次未触发未捕获的Promise拒绝');
        }
    }, 1500);

    // 5. 资源加载错误 (会被全局 error 监听器捕获)
    setTimeout(() => {
        console.log('n--- 模拟一个资源加载错误 ---');
        const img = document.createElement('img');
        img.src = 'http://example.com/non-existent-image.png'; // 故意使用一个不存在的URL
        img.alt = 'Broken Image';
        document.body.appendChild(img); // 将图片添加到DOM，尝试加载
    }, 2000);
});

七、总结与展望

通过今天的探讨，我们深入理解了JavaScript中异常处理的两种主要机制：try-catch 块和全局事件监听器 (window.onerror, window.addEventListener('error'), window.addEventListener('unhandledrejection'))。我们明确了它们各自的适用场景、局限性，并掌握了它们在同步与异步代码中的捕获优先级。

一个健壮的JavaScript应用程序，必然离不开一个分层、全面的错误处理策略。局部 try-catch 用于处理预期内的、可恢复的错误，而全局事件监听器则作为一道坚固的防线，捕获所有意料之外、未被局部处理的致命错误。将这两种机制结合起来，并辅以详细的错误信息收集与远程上报，我们就能有效地监控应用健康状况，快速定位并解决问题，从而为用户提供更稳定、更可靠的体验。在不断演进的JavaScript生态中，持续关注错误处理的最佳实践，将是每位开发者提升自身专业素养的关键一步。

一、异常与错误：JavaScript中的“不速之客”

二、局部错误处理：try-catch 块

三、全局错误处理：window.onerror 与 window.addEventListener('error')

四、异步操作的错误处理：Promise 与 async/await

五、捕获优先级：try-catch 与全局事件监听的互动

六、最佳实践与策略构建

七、总结与展望

发表回复 取消回复

二、局部错误处理：`try-catch` 块

三、全局错误处理：`window.onerror` 与 `window.addEventListener('error')`

四、异步操作的错误处理：Promise 与 `async/await`

五、捕获优先级：`try-catch` 与全局事件监听的互动

发表回复取消回复