客户端 javascript 的错误记录

Question

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

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

所以我想问是否可以使用任何方法来捕获任何类型的 js 错误？ 一些额外的库或者可以给我一个堆栈跟踪的东西，比如 Mozilla 中的 firebug 或 Chrome 中的 web-console？

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

如果您想轻松实现，只需在您的应用中添加 this 伙计们的 JavaScript 代码即可。否则，如果您想实现一个，请尝试this 获取window error 上的堆栈跟踪，您可以使用ajax 报告错误。 nice way 用于跟踪 olark 报告的错误

Answer 3

http://exceptionhub.com 应该出招。 http://errorception.com/ 没有提供太多的调试信息，但看起来也不错。

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

Answer 4

我推荐使用JsLog.me服务

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

Answer 5

免责声明：我是 Sentry 的 CEO 和创建者，这是一项开源付费服务，可以报告多种语言（包括 Javascript）的崩溃报告。

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

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

在服务器上你应该注意的一些事情：

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

Answer 6

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

https://www.atatus.com/

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

Answer 7

如果您的网站使用 Google Analytics，您可以按照我的做法：

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

上面代码的几个cmet：

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

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

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