如何为您的JavaScript应用设置Airbrake错误监控

本文由Airbrake赞助。 感谢您支持使SitePoint成为可能的合作伙伴。

在将代码投入生产环境之前，我们都非常谨慎，对吧？ 我们使用测试驱动的开发或构建完善的单元测试，功能测试和集成测试套件。 我们在所有可能的环境中运行产品，每次更改代码时，这些环境都可能会重复部署。 我们测试了用户可以在每种可能的浏览器上遵循的所有可能路径。

对？

好吧，好的，我们谁都不完美。 但是，至少我们的用户总是乐于报告他们遇到的每个错误，并提供有关确切如何重现这些错误的详细信息，以使他们易于查找和修复。

对？

是的，我不这么认为。

错误监视救援！

值得庆幸的是，这里有服务可以帮助我们诊断和解决问题，这些问题可能是由于我们勤奋的质量测试程序中出现的微小裂缝所致。

我说的是远程错误监视服务。 如果您以前从未听说过它们，则远程错误监视服务可以在用户甚至有机会提交模糊或误导性的错误报告之前实时跟踪和报告用户遇到的实际错误。

此外，他们可以为您提供有关错误发生原因的一系列有用详细信息：用户正在运行的浏览器版本，登录的帐户，正在使用的操作系统，任何会话数据，错误的回溯本身，以及您可能已插入代码中以帮助确定问题的任何自定义标签。

错误监控入门

市场上有许多服务和选项，但Airbrake.io是一个很好的综合服务 。 他们在互联网时代已经存在很长时间了，因此您可能还记得他们是Hoptoad，在他们于2011年更名之前。

Airbrake还支持从Ruby和PHP到.NET和Node.js的各种后端和前端语言和环境。 它们还与大多数流行的代码管理和部署服务（例如GitHib，JIRA，Bitbucket和Slack）提供本地集成。 无论您使用什么工具，他们都可能具有快速，轻松启动所需的工具。 他们的报告界面也很整洁，易于浏览，因此您可以开始从部署的生产代码中快速生成可操作的信息。

在您的产品中实现Airbrake.io代码非常简单。 首先，您可以在Airbrake.io上创建一个帐户，该帐户在您踢轮胎的前14天内免费，在试用期间无需信用卡。

创建第一个项目时，将为您提供一系列选项，这些选项带有20多种语言的预先编写的集成代码。 例如，假设我们要端对端使用JavaScript，并在后端具有基于Express的Node.js api服务。

监控Express应用

让我们建立一个简单的示例，以显示将错误监视与Airbrake集成起来有多么容易。 假设我们已经安装了节点，那么在终端中，我们可以创建一个简单的Express应用程序以使用Express Generator进行监视，可以使用yarn或npm进行安装：

yarn global add express-generator

然后，我们可以运行它来创建Express Express应用程序：

express sample-app

然后cd进入创建的目录并运行yarn （或者如果愿意，可以运行npm install ）以安装我们的依赖项

cd sample-app
yarn

然后运行node bin/www以启动我们的服务器，可以选择在命令开始时使用PORT=####设置端口。 （如果不指定端口，则节点将默认为端口3000。）

node bin/www

现在，如果我们在浏览器中导航到http://localhost:3000 ，我们将看到一个基本的Express应用程序，上面显示“ Welcome to Express”。

您可以将Airbrake添加到您的依赖项中，也可以使用yarn或npm安装airbrake。 我们的Express应用程序中已经有了package.json文件，因此我们只需在依赖项的底部添加一行即可指定airbrake和目标版本：

{
  "name": "sample-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "jade": "~1.11.0",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2",
    "airbrake": "^2.1.0"
  }
}

当然，此文件中的当前版本号和特定的依存关系可能已更改，但是概念是相同的。 他们的关键是添加刹车，在这种情况下作为依赖的最后一行。 更新此文件后，我们可以再次在主应用程序目录中运行yarn （或npm install ）以更新我们的应用程序。

yarn

现在，我们需要做的就是在定义了我们的app变量之后，在我们的app源文件app.js顶部附近添加Express Express空中刹车示例代码。 Airbrake可以利用早于2.x的Express版本提供的内置错误处理功能。

var airbrake = require('airbrake').createClient(
  '<YOUR_AIRBRAKE_PROJECT_ID>',
    '<YOUR_AIRBRAKE_API_KEY>'
);
app.use(airbrake.expressHandler());

Airbrake将为您提供一个项目ID和一个api密钥，并将它们包含在您登录帐户后提供的示例代码中。 现在，通常由Express捕获的错误，以及您的代码可能生成的任何其他错误，将由Airbrake捕获和跟踪。

检查我们的错误监控

例如，让我们看看JavaScript引发错误时会发生什么。 我们可以添加代码以将new Error抛出到route routes/index.js文件中的默认路由处理程序中，以触发JavaScript错误，并查看其跟踪方式：

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
  throw new Error('I am an uncaught exception');
});
module.exports = router;

如果这是一个常规生产站点，那么当主页生成该错误时，我们可能会注意到的第一件事是来自Airbrake的电子邮件，或者可能是Slack中的通知或其他受支持的警报系统。 通过Airbrake，您可以轻松自定义各种警报的发送频率，警报的发出地点以及触发通知的事件。

使用默认的帐户设置，我们会在开发者的帐户中收到一封电子邮件，其中概述了所发生的错误。 在这种情况下，它将包括警告，这是第一次遇到此错误。

接下来，我们可以访问Airbrake仪表板，查看报告中反映的错误，以及许多有用的信息，包括我们创建的自定义消息，错误发生的时间，来源，特定的URL和主机以及多少次。发生了 （到目前为止只有一次。）

访问仪表板上的“事件”选项卡将向我们显示服务器代码的回溯，以帮助我们调试代码中何时何地可能触发了错误。

展开选项卡的“环境”部分，将向我们显示有关服务器以及发生错误时正在运行的进程的许多有用的详细信息。

通过展开选项卡的“上下文”部分，可以找到更多信息，从而告诉我们有关错误发生时脚本正在运行的操作环境。

您的应用程序的新好朋友

想象一下，错误覆盖率分布在整个用户群中，跟踪用户在生产环境中遇到的应用程序中的每个错误，并列出结果列表。

您可以轻松地看到这种信息在用户看不到您希望他们看到的东西的实际生产环境中可能有多大帮助。 多亏了完整而详细的报告，考虑一下您可以节省多少时间，金钱和挫折感。

借助Airbrake的远程错误跟踪功能 ，您无需等待朋友告诉您应用程序出现问题时的情况。 您已经知道了。

From: https://www.sitepoint.com/how-to-set-up-airbrake-error-monitoring-for-your-javascript-app/