客户端javascript的错误日志记录

我的项目，其中包含了大量的表单页面。这是银行CRM系统的后端，因此工作过程中的任何错误都需要捕获和调查。 在服务器端，我们有增强的java异常系统，但如果在客户端javascript上发生错误，我们现在得到的唯一信息是IE中的js错误窗口，有时是高级用户制作的页面截图

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

所以我想问的是，是否可以使用任何方法来捕获任何类型的js错误？

---

一些额外的库或者可以给我一个stacktrace的东西，比如Mozilla中的firebug或者Chrome中的web控制台？

查看

窗口。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;
}

---

如果你想做无痛的实现，只需在你的应用程序中安装javascript代码。否则，如果您想要实现一个，那么尝试在

窗口上获取stacktrace

error

，您可以使用

ajax

报告错误。A跟踪OLAK报告的错误

你应该去玩这个把戏。 没有为调试提供那么多信息，但看起来也不错

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

我建议使用该服务

---

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

免责声明：我是一家开源付费服务的首席执行官和创建者，该服务提供多种语言（包括Javascript）的崩溃报告

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

您将需要一个服务器端日志端点。这有一些复杂性，因为可能会滥用它（即笔测试人员可能会试图暴露其中的漏洞）。你还需要在这里处理CORS。显然，我推荐Sentry这样做，因为我们是同类中最好的，如果您愿意，您可以自己托管服务器（作为其开源）

实际捕获代码中错误的实现相当复杂。由于各种原因，您不能依赖

window.onerror

（主要是因为浏览器过去在这里提供的信息不好）。我们在客户机（基于TraceKit）中所做的是修补许多函数，将它们包装在try/catch语句中。例如，

window.setTimeout

。有了它，我们可以安装错误处理程序，在大多数浏览器中生成完整的堆栈跟踪

您需要确保为代码生成sourcemaps，并且处理数据的服务器支持它们。Sentry通过自动（通过标准）刮取或允许您通过网络上传来实现这一点。如果没有这一点，假设你正在缩小代码，事情几乎变得不可用

最后一个主要问题是噪音。大多数浏览器扩展将直接注入脚本中，因此您需要过滤掉噪音。我们通过两种方式解决这个问题：一种是要忽略的模式黑名单（即“脚本错误”。这是最无用的），另一种是要接受的域白名单（即“example.com”）。我们发现这两种方法的结合在消除大多数随机噪声方面足够有效

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

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

捕获JavaScript错误，还捕获错误之前的用户操作。这将有助于更好地理解错误。Atatus可以帮助您监控前端，不仅是错误，还可以监控其性能（真实用户监控）

---

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

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

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

对上述代码的一些评论：

• 对于现代浏览器，会记录完整的堆栈跟踪
• 对于不捕获堆栈跟踪的旧浏览器，将记录错误消息。（根据我的经验，大部分是较早的iOS版本）
• 用户的浏览器版本也会被记录，因此您可以看到哪些操作系统/浏览器版本引发了哪些错误。这简化了bug优先级划分和测试
• 如果将Google Analytics与“Analytics.js”一起使用，则此代码有效。如果您使用的是“gtag.js”，则需要调整函数的最后一行

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

在Google Analytics中，单击

行为

部分，然后单击

顶级事件

报告

您将获得事件类别的列表。单击列表中的

window.onerror

您将看到Javascript堆栈跟踪和错误消息的列表。通过单击

次要维度

按钮并在出现的文本框中输入

事件标签

，为用户的操作系统/浏览器版本向报告中添加一列

报告将如下面的屏幕截图所示

要将操作系统/浏览器字符串转换为更易于阅读的描述，