客户端javascript的错误记录

时间:2012-06-29 06:53:54

标签: javascript jquery error-handling stack-trace

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

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

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

6 个答案:

答案 0 :(得分:27)

查看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;
}

答案 1 :(得分:15)

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

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

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

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

答案 2 :(得分:2)

如果您想进行无痛实施,只需在您的应用中添加this个人javascript代码即可。否则如果您想实现一个,请尝试thiswindow error上获取堆栈跟踪,然后使用ajax报告错误。一个nice way来跟踪olark报告的错误

答案 3 :(得分:2)

http://exceptionhub.com 应该诀窍。 http://errorception.com/ 没有为调试提供尽可能多的信息,但也似乎很好。

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

答案 4 :(得分:1)

我建议使用JsLog.me服务

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

答案 5 :(得分:0)

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

https://www.atatus.com/

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