用window.onerror报告客户端错误的最佳实践？

Question

我想捕捉所有客户端JavaScript错误在我们的网站，并记录它们。做这件事的最佳实践是什么？

思想：

• 我可以轻松地向我们的webapp添加一个/log/处理程序，解析GET/POST参数，并在服务器端使用我们现有的日志系统。这太明显了吗？
• window.onerror在任何地方都能工作吗？如果处理程序中发生错误怎么办？
• 我应该在页面上附加一个<img>标记还是制作一个XmlHttpRequest？如果XHR失败了怎么办？
• 那么破碎的图像和jQuery Ajax的失败又如何呢？

Answer 1

Jbecwar和dgvid提出的所有建议都很酷，我想补充如下：

• 请注意，Opera不支持错误事件，请参阅奇异的错误事件
• 使用stacktrace.js收集堆栈跟踪可以帮助解决错误
• 如果错误处理程序无法将错误报告发送到服务器端，则回退到使用cookie :用errors.yourdomain.com设置cookie和base64编码的错误报告(压缩？)并从每个页面上的域请求空的1x1像素图像。
• 或者使用HTML5本地存储，并在可以的时候上传它。

Answer 2

正如Jbecwar所建议的，日志处理程序是个好主意，但是您需要注意这样一种情况，在这种情况下，您试图调用日志处理程序来报告与日志处理程序联系的错误。如果浏览器失去了与服务器的连接，您将无法将其记录回服务器。

您可以通过将错误处理程序附加到img元素，然后设置其src属性来捕获img加载失败。例如，使用jQuery：

$("img#my-image").error(onImgError).prop("src", "images/my-image.jpg");

这样您就不会获得太多信息，只是在加载指定元素时发生了错误。

您可以通过在传递给jQuery.ajax的设置对象中包含一个错误回调函数来处理$.ajax请求中的故障。确保将代码包装在try-catch中的成功和错误回调函数中。

一般情况下，您会希望使用try-catch块来保护代码，这样您就可以捕获和记录错误。处理window.onerror应该是最后的手段--对于那些溜之大吉的事情。

在您的window.onerror处理程序中，将所有内容包装在一个try-catch块中，并确保您不会从catch块中抛出代码(如果需要的话，可以使用嵌套的try-捕捉)。

Answer 3

日志处理程序听起来是个好主意，但我会限制报表的数量或尝试。例如，您不希望记者有一个错误，然后尝试自我报告一遍又一遍。此外，如果你有一个糟糕的客户或流量激增，你‘不想记录太多。

而且，window.onerror不会为iframes工作，我会执行xmlhttprequest，如果您已经有问题，您不想搅乱dom吗？

限制客户端请求，并在服务器上强制限制。window.onerror对iframes没有好处，所以使用xmlhttprequest。