客户端javascript的错误记录

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

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

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