🥇在用 JavaScript 编写的前端应用程序中使用 Sentry 监控错误：第 1 部分

服务 SENTRY 允许您远程监控用以下语言编写的前端应用程序中的错误 JavaScript的.

尝试解决前端应用程序中的问题 JavaScript的 可能很棘手，因为它们源自用户的浏览器，而您通常无权访问该浏览器。然而， SENTRY 使得远程监控错误成为可能。

这是您可以下载本文中讨论的解决方案。

有什么必要

如果您想使用这些示例，您将需要：

Node.js的：功能丰富的开发工具，不属于应用程序的一部分。我们下载了最新的 LTS 版本 (8.12.0)
SENTRY：Sentry 服务中的帐户（每月最多可以免费记录 10 个错误）或已安装的本地 Sentry - https://github.com/getsentry/onpremise

在您的服务器上安装

要在您的服务器上安装 Sentry On-Premise，您可以通过两种方式进行

构建 rpm 并安装它们 - https://habr.com/ru/post/500632/

使用官方安装程序：

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

标准使用

首先，从服务网站添加一个新服务 SENTRY-应用程序的项目。选择所需语言后，您将收到相应的文档。在我们的例子中，我们选择了 JavaScript的.

第一个例子是标准的 JavaScript的。这里有两个按钮： “您好” （你好）和 “错误” （错误）。

单击按钮后 “您好”，屏幕将重新启动并阻止尝试将检测并捕获错误。错误被“捕获”后，错误报告被手动发送到服务 SENTRY.

“错误”按钮可让您轻松检测错误。

原版/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Hello</button>
  <button id="error">Error</button>
  <div id="output"></div>
  <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      'use strict';
      Sentry.init({ dsn: 'https://[email protected]/1289664' });
      var helloEl = document.getElementById('hello');
      var errorEl = document.getElementById('error');
      var outputEl = document.getElementById('output');
      helloEl.addEventListener('click', handleHelloClick);
      errorEl.addEventListener('click', handleErrorClick);
      function handleHelloClick() {
        outputEl.innerHTML = 'Hello World';
        try {
          throw new Error('Caught');
        } catch (err) {
          Sentry.captureException(err);
        }
      }
      function handleErrorClick() {
        throw new Error('Uncaught');
      }
    })();
  </script>
</body>
</html>

注：

Sentry 从 CDN 安装并公开为全局变量
早些时候我们在 JavaScript 中启动了 Sentry

为了测试这个例子，我们可以使用静态Web服务器平台 Node.js的: http服务器。转到存储文件的文件夹 index.html的，然后输入（禁用缓存的选项）以下行以在浏览器中打开地址 http://localhost:8080.

如何显示捕获的错误

首先点击按钮 “您好”.

我们发现了一个错误，因此它不会弹出调用堆栈，因此不会在控制台中进行监控。然而，由于我们发送到 SENTRY 手动报告错误，我们将在您的帐户中看到有关该错误的消息。

注：

我们可以追踪哪一行 (24) 包含错误
此外，面包屑路径还会显示导致错误的浏览器操作。

如何显示未捕获的错误

单击按钮 “错误”。

该错误会导致调用堆栈冒泡，从而在控制台上显示一条错误消息。此后，Sentry 会自动监控该 bug，无需任何其他操作。

注：

我们可以看到错误在哪一行 (30) 中丢失
没有面包屑痕迹（我不太明白为什么）

如何保证项目安全

您可能已经注意到我们控制哪些页面可以向我们的项目报告错误的方式 SENTRY; 在帮助下 DSN 记录。问题是任何查看页面源代码的人都可以看到输入。

为了避免这种情况，我们需要限制可以向我们的项目提交错误报告的域的数量。在这个例子中我们使用了本地（本地主机）。此选项在设置选项卡中配置 SENTRY-项目， 哨兵项目设置.

发布

如果您考虑如何使用 SENTRY 在我们应用程序的不同变体中，我们需要某种机制来用版本号标记错误。

毕竟，我们不希望我们修复的错误再次出现，并且我们认为我们修复的内容不起作用。也可能是用户启动了应用程序的较旧的缓存版本。

解决问题需要输入标识符发布（版本）启动时 SENTRY.

原版/index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

此后，所有新错误将被标记为 发布 (0.1.0)，也就是说，它们将与正确的代码版本相关联。

注：

我们找到了一种使用发布的简单方法
Sentry让您使用更多复杂他们的使用，这与密切相关 GitHub上。此功能可以在执行某些操作之前跟踪错误。

PS第二部分较长，因此将在单独的帖子中。

PS Telegram 聊天哨兵 https://t.me/sentry_ru

PS我忘了指出这是帖子的翻译 https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

来源： habr.com

使用 JavaScript 编写的前端应用程序中的 Sentry 监控错误：第 1 部分

添加评论取消回复

使用 JavaScript 编写的前端应用程序中的 Sentry 监控错误：第 1 部分

添加评论 取消回复

添加评论取消回复