ES11：解析全局错误捕获意义-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，难免会遇到一些异常错误，例如未定义的变量、函数调用错误等等。若出现这些错误，一般情况下浏览器会在控制台中打印错误信息，但在一些特殊情况下，例如在生产环境中，我们并不希望将这些错误信息暴露给用户。在此情况下，全局错误捕获就显得尤为重要。

ES11 提供了一个新的方法 window.onerror，用于捕获全局错误。在以往的开发中，一般我们通过 try-catch 来捕获异常，并在控制台中输出异常信息。这种方式不能够捕获所有的异常，并且很难在生产环境中自动发送错误报告。

window.onerror 的使用

window.onerror 方法接收三个参数：错误信息、错误所在的文件名和错误所在行号。

window.onerror = function(message, source, lineno) {
    console.log("message: " + message);
    console.log("source: " + source);
    console.log("lineno: " + lineno);
    return true;
};

通过这个方法，我们可以在全局范围内捕获错误信息，并在控制台中输出。

处理错误信息

全局错误捕获可以在生产环境中帮助我们捕获应用中隐藏的错误。

我们可以将错误信息发送到指定的后端服务，通过邮件、短信等方式通知相关人员。也可以将错误信息保存在本地存储中，以便于离线查看。

以下是一个简单的错误处理示例：

// javascriptcn.com 代码示例
window.onerror = function(message, source, lineno) {
    let error = {
        message: message,
        source: source,
        lineno: lineno,
        time: new Date().getTime()
    };
    localStorage.setItem('error', JSON.stringify(error));
    return true;
};

在这个示例中，我们将错误信息保存到本地存储中，以便我们可以在后续查看错误信息。

错误分类

全局错误捕获可以分类捕获错误，例如捕获网络错误、逻辑错误、语法错误等等。通过分类可以更好地理解应用中出现的错误类型，从而更好地解决这些问题。

以下是一个网络错误的捕获示例：

window.onerror = function(message, source, lineno) {
    if (message.indexOf('Network Error') !== -1) {
        console.log('捕获到网络错误！');
    }
    return true;
};

在这个示例中，我们通过判断 message 中是否包含 'Network Error' 字符串来确定错误类型。这个方法可以帮助我们快速定位网络错误并进行解决。

总结

全局错误捕获是一种非常有用的技术，可以捕获应用中发生的所有异常，避免生产环境中的错误暴露给用户，帮助我们更好地解决问题。在实践中，我们可以将错误信息发送到指定的后端服务，以便及时发现和解决问题。同时，错误分类也是一个非常有用的方法，可以帮助我们更好地理解错误类型，快速定位和解决问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6641fb39d3423812e4ff87d1