JavaScript 异常处理

Question

捕捉 JavaScript 中抛出的所有异常的最佳技术是什么？

显然，最好的技术是使用 try...catch。但是对于异步回调等等，这可能会变得很棘手。

我知道 IE 和 Gecko 浏览器支持 window.onerror，但是 Opera 和 Safari 呢？

这里有一堆测试用例，我希望有一个集中的异常处理解决方案：

// ErrorHandler-Test1
var test = null;
test.arg = 5;
// ErrorHandler-Test2
throw (new Error("Hello"));
// ErrorHandler-Test3
throw "Hello again";
// ErrorHandler-Test4
throw {
    myMessage: "stuff",
    customProperty: 5,
    anArray: [1, 2, 3]
};
// ErrorHandler-Test5
try {
    var test2 = null;
    test2.arg = 5;
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test6
try {
    throw (new Error("Goodbye"));
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test7
try {
    throw "Goodbye again";
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test8
try {
    throw {
        myMessage: "stuff",
        customProperty: 5,
        anArray: [1, 2, 3]
    };
} catch(e) {
    ErrorHandler.handleError(e);
}

如果您想到任何其他测试用例，请提及它们。其中一些案例提到了 ErrorHandler.handleError 方法。这只是使用 try...catch 时的建议准则。

Answer 1

如果您使用像 jQuery 这样的库来分配所有事件处理程序，您可以结合使用 window.onerror 并包装 jQuery 事件处理程序代码和带有错误处理函数的就绪函数（请参阅：JavaScript Error Tracking: Why window.onerror Is Not Enough )。

• window.onerror：捕获 IE 中的所有错误（以及 Firefox 中的大多数错误），但在 Safari 和 Opera 中不执行任何操作。
• jQuery 事件处理程序：捕获所有浏览器中的 jQuery 事件错误。
• jQuery 就绪函数：捕获所有浏览器中的初始化错误。

Answer 2

WebKit（Safari、Chrome 等）现在似乎支持 onerror。

原帖：据我所知，WebKit/Safari 不支持onerror 事件。真是太可惜了。

Answer 3

实际上，jquery 方法还不错。见：

http://docs.jquery.com/Events/error#fn

和：

$(window).error(function(msg, url, line){
  $.post("js_error_log.php", { msg: msg, url: url, line: line });
});

Answer 4

使用您自己的异常处理程序捕获所有异常并使用 instanceof。

$("inuput").live({
    click : function (event) {
        try {
            if (somethingGoesWrong) {
                throw new MyException();
            }
        } catch (Exception) {
            new MyExceptionHandler(Exception);
        }

    }
});

function MyExceptionHandler(Exception) {
    if (Exception instanceof TypeError || 
        Exception instanceof ReferenceError || 
        Exception instanceof RangeError ||  
        Exception instanceof SyntaxError ||     
        Exception instanceof URIError ) {
        throw Exception; // native error
     } else {
         // handle exception
     }
}

MyExcetpionHandler 将抛出原生错误，因为没有 try-catch 块。

访问http://www.nczonline.net/blog/2009/03/10/the-art-of-throwing-javascript-errors-part-2/

Answer 5

try-catch 并不总是最好的解决方案。例如，在 Chrome 7.0 中，您会在控制台窗口中丢失漂亮的堆栈跟踪。重新抛出异常没有帮助。我不知道有任何解决方案可以保留堆栈跟踪并让您对异常做出反应。

Answer 6

通过一些工作，可以获得在所有浏览器中相当完整的堆栈跟踪。

现代 Chrome 和 Opera（即基于 Blink 渲染引擎的任何东西）完全支持 ErrorEvent 和 window.onerror 的 HTML 5 草案规范。在这两种浏览器中，您都可以使用window.onerror，或者（非常棒！）正确绑定到“错误”事件：

// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
    console.log(message, "from", error.stack);
    // You can send data to your server
    // sendData(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
    console.log(e.error.message, "from", e.error.stack);
    // You can send data to your server
    // sendData(data);
})

不幸的是，Firefox、Safari 和 IE 仍然存在，我们也必须支持它们。由于堆栈跟踪在 window.onerror 中不可用，我们必须做更多的工作。

事实证明，要从错误中获取堆栈跟踪，我们唯一能做的就是将所有代码包装在 try{ }catch(e){ } 块中，然后查看 e.stack。我们可以使用一个名为 wrap 的函数来简化这个过程，该函数接受一个函数并返回一个具有良好错误处理能力的新函数。

function wrap(func) {
    // Ensure we only wrap the function once.
    if (!func._wrapped) {
        func._wrapped = function () {
            try{
                func.apply(this, arguments);
            } catch(e) {
                console.log(e.message, "from", e.stack);
                // You can send data to your server
                // sendData(data);
                throw e;
            }
        }
    }
    return func._wrapped;
};

这行得通。您手动包装的任何函数都将具有良好的错误处理能力。

您可以使用图像标签发送数据，如下所示

function sendData(data) {
    var img = newImage(),
        src = http://yourserver.com/jserror + '&data=' + encodeURIComponent(JSON.stringify(data));

    img.crossOrigin = 'anonymous';
    img.onload = function success() {
        console.log('success', data);
    };
    img.onerror = img.onabort = function failure() {
        console.error('failure', data);
    };
    img.src = src;
}

但是，您必须做后端来收集数据和前端来可视化数据。

Atatus，我们正在努力解决这个问题。 Atatus 不仅提供错误跟踪，还提供真实的用户监控。

试试https://www.atatus.com/

免责声明：我是 Atatus 的一名网络开发人员。

Answer 7

确实，在现代浏览器中，将 window.onerror 挂接到一直冒泡到顶部的错误，并为 Ajax 错误添加 jQuery 事件处理程序，几乎可以捕获客户端代码中抛出的所有 Error 对象。如果您手动设置 window.onerror 的处理程序，在现代浏览器中，这是通过 window.addEventListener('error', callback) 完成的， 而在 IE8/9 中你需要调用 window.attachEvent('onerror', callback).

请注意，您应该考虑处理这些错误的环境以及这样做的原因。使用堆栈跟踪捕获尽可能多的错误是一回事，但是现代 F12 开发工具的出现解决了在本地实施和调试时的这个用例。断点等将为您提供比处理程序可用的更多数据，特别是对于从 CORS 请求加载的第三方库引发的错误。您需要采取额外的步骤来指示浏览器提供这些数据。

关键问题是在生产环境中提供这些数据，因为保证您的用户运行的浏览器和版本范围远远超出您可能测试的范围，并且您的网站/应用会以意想不到的方式中断，无论质量保证多少你扔它。

要处理此问题，您需要一个生产错误跟踪器，该跟踪器会在用户使用您的代码时获取用户浏览器中抛出的每个错误，并将它们发送到您可以查看数据并用于修复错误的端点当它们发生时。在 Raygun（免责声明：我在 Raygun 工作），我们付出了很多努力来为此提供出色的体验，因为有许多陷阱和问题需要考虑，因为幼稚的实现会错过。

例如，您可能会捆绑和缩小您的 JS 资产，这意味着从缩小的代码中抛出的错误将包含带有错误变量名的垃圾堆栈跟踪。为此，您需要您的构建工具来生成源映射（我们推荐使用 UglifyJS2 作为管道的这一部分），以及您的错误跟踪器来接受和处理这些，将损坏的堆栈跟踪转换回人类可读的堆栈跟踪。 Raygun 开箱即用，并包含一个 API 端点来接受源映射，因为它们是由您的构建过程生成的。这是关键，因为它们需要保持非公开，否则任何人都可以取消您的代码，从而否定其目的。

raygun4js 客户端库还附带 window.onerror，适用于现代和旧版浏览器，以及开箱即用的 jQuery 挂钩，因此您只需添加：

<script type="text/javascript" src="//cdn.raygun.io/raygun4js/raygun.min.js" </script> <script> Raygun.init('yourApiKey').attach(); </script>

还有一系列内置功能，包括在发送错误有效负载之前对其进行变异、添加标签和自定义数据、看到错误的用户的元数据。它还消除了从上述第三方 CORS 脚本中获取良好堆栈跟踪的痛苦，这解决了可怕的“脚本错误”（不包含错误消息，也没有堆栈跟踪）。

一个更关键的问题是，由于网络上的大量受众，您的网站会为每个错误生成数千个重复实例。像 Raygun 这样的错误跟踪服务可以将这些错误汇总到错误组中，这样您就不会淹没在大量通知中，并且可以让您看到每个实际错误都准备好修复。

Answer 8

我也在寻找错误处理和堆栈跟踪以及用户操作日志记录这就是我发现的希望这也可以帮助你 https://github.com/jefferyto/glitchjs

Answer 9

最好的错误处理程序：

try {
    // something
} catch(e) {
    window.location.href = "https://stackoverflow.com/search?q=[js] + " + e.message
}