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

Best practice for reporting client errors with window.onerror?

本文关键字：最佳 错误 客户端 window onerror 报告 使用      更新时间：2023-09-26

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

思想:

  • 我可以很容易地添加一个/log/处理器到我们的web应用程序，解析GET/POST参数和使用我们现有的日志系统在服务器端。这是不是太明显了?
  • window.onerror在任何地方工作吗?如果处理程序中出现错误怎么办?
  • 我应该附加一个<img>标签到页面或使XmlHttpRequest?如果XHR失败了怎么办?
  • 关于破碎的图像和jQuery Ajax失败-我能捕捉到这些吗?

Jbecwar和dgvid提出的所有建议都很酷，我想补充一句:

  • 注意Opera不支持错误事件参见quirkmode错误事件
  • 使用stacktrace.js收集stacktrace可以帮助排除错误
  • 如果错误处理程序无法发送错误报告到服务器端，退回到使用cookie:设置cookie为errors.yourdomain.com与base64编码的错误报告(压缩?)，并请求从该域名在每个页面上的空1x1像素图像
  • 或使用HTML5本地存储并在可以的时候上传

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

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

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

这样你不会得到太多的信息，只会得到在尝试加载指定元素时发生错误的事实。

你可以在jQuery中处理失败。通过在传递给$. Ajax的Settings对象中包含错误回调函数来实现Ajax请求。一定要将代码包装在try-catch的成功回调函数和错误回调函数中。

一般来说，你会想要用try-catch块来保护你的代码，这样你就可以捕获和记录错误。处理窗口。错误应该是最后的手段——对于那些溜过的东西。

在你的窗口。在一个错误处理程序中，将所有内容包装在一个try-catch块中，并确保你不会从catch块中的代码中抛出(必要时使用嵌套的try-catch)。

日志处理程序听起来是个好主意，但我会限制报告的次数或报告执行的尝试次数。例如，你不希望记者有一个错误，然后试图一遍又一遍地报道它。此外，如果你有一个糟糕的客户端或流量高峰，你不想记录太多。

同时,窗口。onerror对iframe不起作用我会做xmlhttprequest，如果你已经有问题了，你不想弄乱dom吗

TL,博士;限制客户端请求并在服务器端执行限制。窗口。Onerror对于iframe是不好的，使用xmlhttprequest

我们最近开始向google-analytics报告未处理的错误。最基本的思想是一个窗口。Onerror处理程序将错误信息(脚本文件路径、行号和错误消息)转换为虚拟的error-page-url，并将其作为页面视图报告。您可以将逻辑应用于任何页面跟踪机制。

我们使用的简单代码可以在github上获得https://github.com/shyam-habarakada/js-watson

有了谷歌分析的分析能力，和这个简单的技术，我们已经在识别频繁和严重的错误方面取得了巨大的成功，并能够迅速解决它们。您还可以使用遗传算法分析总体错误的趋势、特定文件中的特定错误等等。强烈推荐。

相关文章：