前端-6个减少JavaScript错误噪音的技巧

通过Web开发人员提供的这六个重要提示，了解如何减少JavaScript错误噪音并找到JavaScript zen。请继续阅读！

如果您尝试使用JavaScript错误跟踪来构建和迭代您的应用，那么您可能会遇到一个常见的问题：嘈杂，低价值的通知，这使得很难识别出高优先级的问题。

浏览器JavaScript可能是捕获错误的最复杂的环境，因为它不仅仅是一个环境！有多种主流浏览器，JavaScript引擎，操作系统和浏览器扩展生态系统，所有这些都汇集在一起，可以捕获很好的错误（但对应用程序的性能并不那么重要）。

像Sentry这样的错误跟踪平台能够在开箱即用的环境中完成所有噪音。但是，为了获得最佳效果，您可以采取一些简单但改变游戏规则的步骤来增加信号并使迭代变得更加直接 - 甚至是愉快的。

将您的网址列入白名单

Sentry的浏览器的JavaScript SDK拿起每一个从默认的Web应用程序触发未捕获的错误。这包括在您的页面上运行的代码，不一定由您创作或控制。其中包括由浏览器扩展程序，恶意软件或第三方应用程序（如聊天窗口小部件，分析和广告代码）触发的错误。

要忽略此类有问题的错误，您可以将SDK配置为将仅源自您自己的代码的错误列入白名单：

Raven.config('your-dsn', { whitelistUrls: [ 'www.example.com/static/js', // your code 'ajax.googleapis.com' // code served from Google CDN ] }).install();

此示例配置可确保仅将源自www.example.com/static/js和ajax.googleapis.com提供的脚本的错误报告给Sentry服务器。这种小的配置更改是您可以减少错误的最简单，最有影响力的更改。

使用入站数据过滤器

入站数据过滤器是Sentry功能，旨在从项目中丢弃已知的低值错误。它们很容易在Sentry项目设置中切换，因此它们丢弃的任何错误都不会计入您的帐户配额。

有三个过滤器对JavaScript开发人员特别有价值：

1、传统浏览器 - 像IE9这样的旧浏览器会生成低保真错误报告，这些报告并不总是可操作的。

2、第三方扩展程序 - 自动从已知的浏览器扩展程序，恶意软件和广告脚本中删除错误。

3、网络抓取工具 - 删除Google Bot等已知网络抓取工具触发的错误。

入站过滤器不如将Sentry JavaScript SDK配置为白名单错误URL一样强大，但它们很好，因为只需从项目设置中单击即可启用它们。

使用最新版本的JavaScript SDK

Sentry的浏览器JavaScript SDK正在积极开发中，并且经常进行更改以改进错误报告的_quality_ 并减少低值错误的数量。

例如，版本3.26.2默认禁止背靠背重复错误。如果您遇到从异步循环（例如，来自setTimeout 或 XMLHttpRequest 回调）触发的错误，这可以节省生命 。在长期存在的应用程序中，像这样的错误可能会导致单个用户发生数千个事件！

要获得最佳体验，请保持SDK的副本为最新。Sentry将告诉您何时有新版本可用，但是也值得定期检查更改日志以查看新版本。

使用源地图

源映射不仅可以简化调试生产堆栈跟踪，还可以使Sentry更容易将错误分组到单个问题中。这意味着事件会陷入更小，更易于管理的问题集中，这意味着您的问题流中的噪音更少，而关于代码损坏的电子邮件也会减少2:00。

将源映射作为构建和部署过程的一部分并不像切换按钮那么容易，但Sentry深入的源映射文档包含了入门所需的一切。除了有助于降低噪声之外，源映射可能是您可以对监视和调试工作流程进行的最深刻的改进。

忽略麻烦的错误

你永远不会解决的一些错误。当它们弹出时，您实际上有两个选择：宣布破产，因为他们会破坏你的应用程序，你无法解决它们。

2.完全忽略它们，因为它们最终与用户的体验无关。

您可以通过Sentry UI或使用该ignoreErrors 选项配置JavaScript SDK以防止客户端错误来忽略错误 。从SDK中执行此操作非常理想，因为在客户端级别丢弃的错误不会到达Sentry的服务器，也不会计入您的帐户配额。

这是它的样子：

Raven.config('your-dsn', { ignoreErrors: [ 'Can't execute code from freed script', /SecurityError: DOM Exception 18$/ ] }).install();

但要小心！进行此更改后，您将永远不会再看到这些错误。而以前只是令人讨厌的错误字符串可能会成为更大的问题，但你永远不会被告知它们。哎呀！ignoreErrors 明智地选择你的 阵列。

请注意，浏览器可以针对相同的基本错误生成不同的错误消息。对于单个 ReferenceError，您可能需要输入多个字符串/正则表达式以涵盖所有可能的浏览器。

上传源文件（和源地图）

当Sentry遇到从JavaScript文件触发的错误时，它会尝试从您的应用服务器下载该源文件，以便将行和列信息与实际源内容相关联。此源内容是Sentry错误分组算法的基础。

如果您的源文件只能通过Web访问，那么很多很多坏事都可能发生。例如，您可能有一个构建过程，可以在部署新的JavaScript文件时从服务器中删除旧的JavaScript文件。如果您的用户从较旧的缓存脚本中触发错误，那么当Sentry下载它们时，它们将不再可用。无法访问该内容会使分组算法陷入混乱，这意味着将针对通常在现有问题下进行冲突的错误创建单独的问题。

为避免这些和其他中断情况（例如，网络可用性），我们强烈建议您将生产JavaScript文件和源映射上载为发布工件。这意味着Sentry将始终可以直接访问这些文件，从而确保最大的分组效果。

使用Sentry API完成上传源文件。这很简单：

$ curl https://sentry.io/api/0/projects/:organization_slug/:project_slug/releases/:release/files/ -X POST -H 'Authorization: Bearer YOUR_TOKEN_HERE' -F file=@app.js.map -F name="http://example.com/app.js.map"

在文档中了解有关工件和版本的更多信息。

我们来帮忙

与往常一样，您可以为您的JavaScript应用程序尝试Sentry（它也是100％开源的）。