客户端javascript的错误记录

我的项目包含很多带有表单的页面。 这是银行CRM系统的后端,因此可以捕获和调查工作过程中的任何错误。 在服务器端,我们有增强的javaexception系统,但如果在客户端发生错误 – javascript我们现在获得的唯一信息是IE中的js-error窗口或有时是高级用户制作的页面截图。

Javascript代码包含Jquery支持的UI扩展和硬编码的内联事件处理程序和函数。

所以我问是否可以使用任何捕获任何类型的js-errors的方法? 一些额外的库或某些东西可以给我一个像Mozilla中的firebug或Chrome中的web控制台的堆栈跟踪?

查看window.onerror 。 如果您想捕获任何错误并将它们报告给服务器,那么您可以尝试使用AJAX请求。

 window.onerror = function(errorMessage, errorUrl, errorLine) { jQuery.ajax({ type: 'POST', url: 'jserror.jsf', data: { msg: errorMessage, url: errorUrl, line: errorLine }, success: function() { if (console && console.log) { console.log('JS error report successful.'); } }, error: function() { if (console && console.error) { console.error('JS error report submission failed!'); } } }); // Prevent firing of default error handler. return true; } 

免责声明:我是Sentry的首席执行官和创始人,这是一种开源和付费服务,可以为许多语言(包括Javascript)进行崩溃报告。

捕获前端exception可能非常具有挑战性。 技术已经变得更好(浏览器JS引擎),但仍有很多局限性。

  1. 您将需要一个服务器端日志记录端点。 这有一些复杂性,因为它可能会滥用它(即PEN测试人员可能会尝试暴露其中的漏洞)。 你还需要在这里处理CORS。 我明显推荐Sentry,因为我们在课堂上是最好的,如果你想,你可以自己托管服务器(作为它的开源)。
  2. 实际捕获代码中的错误的实现非常复杂。 由于各种原因你不能依赖window.onerror (主要是因为浏览器历史上在这里提供了不好的信息)。 我们在raven.js客户端(基于TraceKit)中所做的是修补许多函数来将它们包装在try / catch语句中。 例如, window.setTimeout 。 有了这个,我们就可以安装error handling程序,在大多数浏览器中生成完整的堆栈跟踪。
  3. 您需要确保为代码生成源映射,并且处理数据的服务器支持它们。 Sentry通过自动(通过标准)抓取它们或允许您通过API上传它们来实现这一点。 如果没有这个,假设您正在缩小代码,事情几乎无法使用。
  4. 最后一个主要问题是噪音。 大多数浏览器扩展将直接注入您的脚本,因此您需要过滤掉噪音。 我们以两种方式解决这个问题:要忽略的模式黑名单(即“脚本错误”是最无用的),以及要接受的域名白名单(即“example.com”)。 我们发现两者的组合在消除大多数随机噪声方面足够有效。

您应该在服务器上注意的一些事项:

  • 客户端有时会持续打开(即机器人或坏用户)并导致大量无用数据或简单的旧错误。
  • 您的服务器应该能够处理这些事件的级联并正常失败。 Sentry通过限速和采样数据来做到这一点。
  • exception被本地化为浏览器语言,如果没有集中式数据库,您将无法自己翻译它们(尽管它们的含义通常很明显)。

如果你想做无痛的实现,只需在你的应用程序中放置这个人javascript代码。 否则如果你想实现一个,那么尝试这个以获得window error的堆栈跟踪,你可以使用ajax来报告错误。 跟踪olark报告的错误的好方法

http://exceptionhub.com应该诀窍。 http://errorception.com/不提供调试信息,但看起来也不错。

proxino似乎不知道他们在做什么,他们在他们的记录器代码中包含一个完整的jQuery来记录我上次检查时的错误事件。 我不相信一个很少掌握客户端JavaScript的服务来记录我的JavaScript错误。

我建议使用JsLog.me服务

除了错误和堆栈跟踪之外,它还可以捕获整个控制台输出。 我们在项目中使用它,记录整个控制台日志有助于我们的QA团队记录问题再现方式。 此外,它适用于Chrome控制台中的大型JSON对象,并且具有搜索function。

Atatus捕获JavaScript错误并捕获错误之前的用户操作。 这有助于更好地理解错误。 Atatus帮助您监控前端,不仅仅是出错,还有其性能(真实用户监控)

https://www.atatus.com/

免责声明:我是Atatus的网络开发人员。

如果您的网站使用的是Google Analytics,您可以执行以下操作:

 window.onerror = function(message, source, lineno, colno, error) { if (error) message = error.stack; ga('send', 'event', 'window.onerror', message, navigator.userAgent); } 

关于上面代码的一些评论:

  • 对于现代浏览器,将记录完整堆栈跟踪。
  • 对于不捕获堆栈跟踪的旧浏览器,将记录错误消息。 (根据我的经验,大多数早期的iOS版本)。
  • 用户的浏览器版本也会被记录,因此您可以看到哪些操作系统/浏览器版本正在抛出哪些错误。 这简化了错误优先级和测试。
  • 如果您将Google Analytics与“analytics.js”一起使用,则此代码可以正常运行。 如果你使用“gtag.js”, 就像这样 ,你需要调整函数的最后一行。 详情请见此处 。

代码到位后,您就可以通过以下方式查看用户的Javascript错误:

  1. 在Google Analytics中,点击“ Behavior部分,然后点击“ Top Events报告。
  2. 您将获得一个事件类别列表。 单击列表中的window.onerror
  3. 您将看到Javascript堆栈跟踪和错误消息的列表。 通过单击“ Secondary dimension按钮并在显示的文本框中输入“ Event Label ,为用户的操作系统/浏览器版本添加一个列。
  4. 该报告将如下面的截图所示。
  5. 要将操作系统/浏览器字符串转换为更易于阅读的描述,我将它们复制粘贴到https://developers.whatismybrowser.com/useragents/parse/

在此处输入图像描述