使用 window.onerror 报告客户端错误的最佳实践？
我想捕获我们网站上的所有客户端 JavaScript 错误并记录它们。执行此操作的最佳实践有哪些？
想法：
- 我可以轻松地将
/log/处理程序添加到我们的 web 应用程序中，解析 GET/POST 参数并在服务器端使用我们现有的日志系统。这也太明显了吧？ window.onerror在任何地方都有效吗？如果处理程序中发生错误怎么办？- 我应该将
- 损坏的图像和 jQuery Ajax 失败怎么办？我也能捕捉到这些吗？
I'd like to catch all client-side JavaScript errors on our site and log them. What are some best practices for doing this?
Thoughts:
- I can easily add a
/log/handler to our webapp, parse GET/POST parameters and use our existing logging system on the server-side. Is that too obvious? - Does
window.onerrorwork everywhere? What if an error occurs in the handler? - Should I attach an
<img>tag to the page or make an XmlHttpRequest? What if the XHR fails? - What about broken images and jQuery Ajax failures — can I catch those too?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
Jbecwar 和 dgvid 提出的所有建议都很酷，我要补充一点：
All suggestions made by Jbecwar and dgvid are cool, I would add:
正如 Jbecwar 所建议的，日志处理程序是一个好主意，但您需要注意尝试调用日志处理程序以报告联系日志处理程序的错误的情况。如果浏览器失去与服务器的连接，您将无法将其记录回服务器。
您可以通过将错误处理程序附加到 img 元素，然后设置其 src 属性来捕获 img 加载失败。例如，使用 jQuery：
您不会通过这种方式获得太多信息，只能获得尝试加载指定元素时发生错误的事实。
您可以通过在传递给 $.ajax 的设置对象中包含错误回调函数来处理 jQuery.ajax 请求中的失败。确保将成功回调函数和错误回调函数中的代码都包装在 try-catch 中。
通常，您需要使用 try-catch 块来保护代码，以便可以捕获并记录错误。处理 window.onerror 应该是最后的手段——对于那些漏掉的事情。
在 window.onerror 处理程序中，将所有内容包装在 try-catch 块中，并确保不会从 catch 块中的代码中抛出异常（如有必要，使用嵌套的 try-catch）。
As Jbecwar suggests, the log handler is a good idea, but you need to watch out for a condition in which you try to call the log handler to report an error contacting the log handler. If the browser loses its connection to the server, you aren't going to be able to log that back to the server.
You can catch an img load failure by attaching an error handler to the img element, then setting its src attribute. For example, using jQuery:
You won't get much information that way, just the fact that an error occurred while trying to load the specified element.
You can handle failures in jQuery.ajax requests by including an error callback function in the settings object passed to $.ajax. Be sure to wrap the code in both the success and error callback functions in try-catch.
Generally, you will want to protect your code with try-catch blocks so that you can catch and log errors. Handling window.onerror should be a last resort - for the things that slip through.
In your window.onerror handler, wrap everything in a try-catch block and ensure that you will not throw from the code in the catch block (using nested try-catches, if necessary).
日志处理程序听起来是个好主意，但我会限制报告或尝试执行的报告数量。例如，您不希望报告者出现错误，然后尝试一遍又一遍地自我报告。此外，如果您的客户端不好或流量激增，您也不想记录太多。
另外，window.onerror 不适用于 iframe，我会执行 xmlhttprequest，如果您已经遇到问题，您是否不想弄乱 dom
？限制客户端请求并在服务器上强制执行限制。 window.onerror 对 iframe 没有好处，请使用 xmlhttprequest。
The log handler sounds like a good idea, but I would limit the number of reports or tries that the report does. For example you don't want the reporter to have an error and then try to report it self over and over. Also if you have a bad client or a spike in traffic you dont' want to log too much.
Also, window.onerror won't work for iframes and I would do the xmlhttprequest, do you don't want to mess with the dom if you already having problems
TL;DR; Limit the client side requests and enforce limits at the server. window.onerror is no good for iframes, and use the xmlhttprequest.
我们最近开始将未处理的错误作为页面浏览量报告给 google-analytics。基本思想是 window.onerror 处理程序将错误信息（脚本文件路径、行号和错误消息）转换为虚拟错误页面 URL 并将其报告为页面视图。您可以将该逻辑应用于任何页面跟踪机制。
我们使用的简单代码可以在 github 上找到 https://github.com/shyam-habarakada/js -watson
凭借 Google Analytics 的所有分析能力以及这种简单的技术，我们在识别常见错误和严重错误方面取得了巨大成功，并能够快速解决它们。您还可以利用GA的强大功能来分析整体错误的趋势、特定文件中的特定错误等。强烈推荐。
We've recently started reporting unhandled errors as page-views to google-analytics. The basic idea is that a window.onerror handler would convert the error information (script file path, line number and error message) into a virtual error-page-url and report it as a page view. You can apply the logic to any page tracking mechanism.
The simple code we use is available on github at https://github.com/shyam-habarakada/js-watson
With all the analytical power of google analytics, and this simple technique, we've had great success in identifying the frequent and critical errors and been able to resolve them quickly. You can also use the power of GA to analyze trends in overall errors, specific errors in specific files, etc. etc. Highly recommended.