2011-10-26 43 views
14

我想要捕捉我们网站上的所有客户端JavaScript错误并将其记录下来。做这件事的最佳做法是什么?用window.onerror报告客户端错误的最佳做法?

思考:

  • 我可以轻松地添加一个/log/处理我们的web应用,解析GET/POST参数,并使用我们现有的记录系统在服务器端。这太明显了吗?
  • window.onerror工作到处?如果处理程序中发生错误会怎么样?
  • 我应该附加一个<img>标记的网页或进行的XmlHttpRequest?如果XHR失败怎么办?
  • 怎么样破碎的图像和jQuery Ajax失败 - 我可以捕获这些呢?
+0

谢谢大家!赏金最多的信息是dgvid。接受的答案去信息超集的卓然。 –

回答

6

通过Jbecwar和dgvid提出的所有建议都很酷,我想补充:

  • 注意,Opera不支持错误事件看quirksmode error event
  • 收集踪迹与stacktrace.js可以帮助排除故障
  • 如果错误处理程序无法发送错误报告给服务器端,回退到使用cookies:设置cookie的errors.yourdomain.com与base64编码的错误报告(压缩?)并要求每个页面上的该域的空的1x1像素图像
  • 或使用HTML5本地存储并在可以时上传它
+0

其实Opera自11.60开始支持它(来源:http://dev.opera.com/articles/view/better-error-handling-with-window-onerror/) – RelaXNow

+0

StackTrace.js显然现在位于http:// stacktracejs .COM。 –

3

日志处理程序听起来像个好主意,但我会限制报告的数量或尝试报告。例如,您不希望记者发生错误,然后尝试一遍又一遍地自我报告。另外,如果你有一个糟糕的客户或流量高峰,你不会想要记录太多。

此外,window.onerror不会为I帧与DOM的工作,我会做了XMLHttpRequest,你不想惹,如果你已经有问题

TL; DR;限制客户端请求并在服务器上强制实施限制。 window.onerror对iframe没有好处,并使用xmlhttprequest。

3

由于Jbecwar提示,日志处理程序是一个好主意,但是你需要注意在你尝试调用日志处理程序报告错误日志处理程序接触的条件。如果浏览器失去与服务器的连接,则无法将其记录回服务器。

可以通过附加一个错误处理程序img元素,然后设置其src属性赶上一个img负载故障。例如,使用jQuery:

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

你不会得到太多的信息那样,只是在试图加载指定的元素发生错误的事实。

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

一般情况下,你会想保护使用try-catch块你的代码,这样就可以捕获并记录错误。处理window.onerror应该是最后的手段 - 对于通过的事情。

在你window.onerror处理程序,在try-catch块包装的一切,确保您不会从代码中catch块(如果需要使用嵌套的try渔获物)抛出。

3

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

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

与谷歌Analytics的全部分析能力,而这个简单的技术,我们在识别频繁和严重错误取得了巨大成功,并能快速解决它们。您还可以使用GA的强大功能来分析整体错误的趋势,特定文件中的特定错误等。强烈建议。