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

Posted 2023-02-26

【中文标题】使用 window.onerror 报告客户端错误的最佳实践？

【英文标题】：Best practice for reporting client errors with window.onerror?

【发布时间】：2011-12-15 11:37:43

【问题描述】：

我想捕获我们网站上的所有客户端 javascript 错误并记录下来。有哪些最佳做法？

想法：

我可以轻松地将/log/ 处理程序添加到我们的 web 应用程序，解析 GET/POST 参数并在服务器端使用我们现有的日志记录系统。是不是太明显了？ window.onerror 是否可以在任何地方工作？如果处理程序发生错误怎么办？ 我应该将<img> 标记附加到页面还是发出XmlHttpRequest？如果 XHR 失败了怎么办？ 损坏的图像和 jQuery Ajax 失败怎么办？我也能捕捉到这些吗？

【问题讨论】：

谢谢大家！赏金前往 dgvid 提供最多的信息。接受的答案是带有信息超集的 Zoran。

【参考方案1】：

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

注意 Opera 不支持错误事件见quirksmode error event 使用 stacktrace.js 收集堆栈跟踪可以帮助解决错误 如果错误处理程序无法向服务器端发送错误报告，则回退到使用 cookie：使用 base64 编码的错误报告（压缩？）为 errors.yourdomain.com 设置 cookie，并在每个页面上从该域请求空的 1x1 像素图像 或使用 html5 本地存储并尽可能上传

【讨论】：

其实 Opera 从 11.60 开始就支持了（来源：dev.opera.com/articles/view/…）

【参考方案2】：

我们最近开始将未处理的错误作为网页浏览量报告给 google-analytics。基本思想是 window.onerror 处理程序会将错误信息（脚本文件路径、行号和错误消息）转换为虚拟的 error-page-url 并将其报告为页面视图。您可以将逻辑应用于任何页面跟踪机制。

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

凭借谷歌分析的所有分析能力和这种简单的技术，我们在识别常见和严重错误方面取得了巨大成功，并能够快速解决这些错误。您还可以使用 GA 的强大功能来分析整体错误的趋势、特定文件中的特定错误等。强烈推荐。

【参考方案3】：

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

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

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

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

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

通常，您会希望使用 try-catch 块来保护您的代码，以便您可以捕获和记录错误。处理 window.onerror 应该是最后的手段 - 对于漏掉的东西。

在您的 window.onerror 处理程序中，将所有内容包装在一个 try-catch 块中，并确保您不会从 catch 块中的代码中抛出异常（必要时使用嵌套的 try-catch）。

【参考方案4】：

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

另外，window.onerror 不适用于 iframe，我会执行 xmlhttprequest，如果您已经遇到问题，是否不想弄乱 dom

TL;DR;限制客户端请求并在服务器上实施限制。 window.onerror 不适合 iframe，使用 xmlhttprequest。

【讨论】：

您能否详细介绍一下您在 iframe 和 window.onerror 中遇到的问题？