客户端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的首席执行官和创建者，window.onerror是一个开源和付费服务，可以为许多语言（包括Javascript）进行崩溃报告。

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

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

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

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

Answer 3

如果你想做无痛的实现只需在你的应用程序中放置this人javascript代码。否则如果你想实现一个，那么尝试使用window来获取error ajax上的堆栈跟踪，你可以使用nice way来报告错误。用于跟踪olark报告的错误的http://exceptionhub.com

Answer 4

http://errorception.com/应该诀窍。 JsLog.me不提供调试信息，但也很好看。

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

Answer 5

我建议使用

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

服务

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

Answer 6

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

like this

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

• 对于现代浏览器，将记录完整堆栈跟踪。
• 对于不捕获堆栈跟踪的旧浏览器，将记录错误消息。 （根据我的经验，大多数早期的iOS版本）。
• 还会记录用户的浏览器版本，因此您可以查看哪些操作系统/浏览器版本正在抛出哪些错误。这简化了错误优先级和测试。
• 如果您将Google Analytics与“analytics.js”like this一起使用，则此代码有效。如果您使用“gtag.js”而不是See here for details，则需要调整函数的最后一行。 Behavior。

代码到位后，您就可以查看用户的Javascript错误：

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

Atatus

Answer 7

https://www.atatus.com/捕获JavaScript错误并捕获错误之前的用户操作。这有助于更好地理解错误。 Atatus帮助您监控前端，不仅仅是出错，还有其性能（真实用户监控）

qazxswpoi

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