27

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

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

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

4

7 回答 7

32

调查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;
}
于 2012-06-29T07:06:45.980 回答
20

免责声明：我是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 通过速率限制和采样数据来做到这一点。
  • 异常被本地化为浏览器语言，如果没有集中式数据库，您将不得不自己翻译它们（尽管它们的含义通常很明显）。
于 2015-06-25T01:26:48.143 回答
2

如果您想轻松实现，只需在您的应用程序中放置这些人的 javascript 代码。否则，如果你想实现一个，那么试试这个来获取堆栈跟踪window error，你可以用它ajax来报告错误。跟踪 olark 报告的错误的好方法

于 2012-06-29T07:12:24.193 回答
2

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

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

于 2012-07-01T17:28:23.817 回答
2

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

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

对上面代码的几点评论：

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

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

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

在此处输入图像描述

于 2018-09-09T20:23:08.137 回答
1

我推荐使用JsLog.me服务

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

于 2014-11-25T16:31:56.477 回答
0

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

https://www.atatus.com/

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

于 2015-07-08T14:40:00.337 回答