您的位置：首页 > Web前端

Sentry Web 前端监控 - 最佳实践(官方教程)

2021-09-14 10:51 507 查看

系列

创建一个 Sentry 项目

Step 1: 创建项目

登录您的
```
Sentry organization
```
从左侧导航菜单中选择
```
Projects
```
以显示所有项目的列表
单击
```
+ Create Project
```
按钮

注意：如果您的帐户中没有项目 --- 您可能会被重定向到入门向导以创建您的第一个项目。
- 给该项目一个
```
Name
```
  。
- 在
```
Set your default alert settings
```
  下，选择
```
i'll create my own alerts later
```
  。
- 为该项目分配一个
```
Team
```
  。
如果您尚未定义任何团队(
```
Team
```
)，您可以选择默认组织团队（与您的
```
Sentry
```
组织同名的团队）或单击
```
+
```
按钮创建新团队。
- 单击
```
Create Project
```
  。这会将您带到配置页面。通读快速入门指南。
复制
```
DSN key
```
并将其放在手边，因为我们会将密钥复制到源代码中。

DSN（或数据源名称）告诉 SDK 将事件发送到何处，将它们与您刚刚创建的项目相关联。

点击
```
Got it!
```
按钮以创建项目。

Step 2: 创建警报规则

您可以为每个项目创建各种警报规则，并让

Sentry

知道您希望在应用程序中发生错误时通知的时间(

when

)、方式(

how

)和对象(

whom

)。警报规则(

Alert rules

)由条件(

Conditions

)和操作(

Actions

)组成，它们在满足相关条件时执行。有关更多信息，请参阅

Alerts

。创建新项目时，您可以选择使用警报规则创建它，该规则在第一次出现新问题时通知所有项目团队成员（通过电子邮件）。这意味着下次发生类似错误时，不会触发通知，因为该错误不是“新的”。

https://docs.sentry.io/product/alerts-notifications/alerts/

在此步骤中，您将创建一个新的

Alert

规则，在每次(

every time

)事件发生时发出通知，即使它与已经存在的问题相关联。在实际的场景中，您可能会添加额外的条件，因为您不希望每次在终端用户浏览器的前端代码中发生事件时都得到通知。

从项目下拉列表中，找到新项目并点击齿轮图标打开项目设置(
```
Project Settings
```
)

单击
```
Alerts
```
以打开警报配置页面
单击
```
New Alert Rule
```

在
```
“New Alert Rule”
```
表单中，选择
```
“Issue Alert”
```
类型并输入以下值

每次在所有环境(

All Environments

)中通过邮件(

Mail

)看到事件时，新的警报规则都会通知选定的团队成员

单击
```
Save Rule
```
以创建新规则

将 Sentry SDK 引入您的前端代码

前置条件

Demo App

源代码需要

NodeJS

开发环境来安装和运行应用程序。确保您已准备好以下各项：

Node and NPM https://nodejs.org/en/

NVM

https://github.com/nvm-sh/nvm

Step 1: 获取代码

在 GitHub 上打开
```
frontend-monitoring
```
示例代码库

https://github.com/sentry-tutorials/frontend-monitoring

单击
```
Fork
```
并选择您希望将此存储库分叉到的目标
```
GitHub
```
帐户

```
fork
```
完成后，单击
```
Clone
```
或
```
download
```
，然后复制存储库
```
HTTPS URL
```

将分叉的存储库克隆到您的本地环境

> git clone <repository HTTPS url>

现在示例代码在本地可用，在您首选的代码编辑器中打开
```
frontend-monitoring
```
项目

Step 2: 安装 SDK

Sentry

通过在应用程序运行时中使用特定于平台的

SDK

来捕获数据。要使用

SDK

，请在源代码中导入并配置它。

demo

项目使用

React

和

Browser JS

。最快的入门方法是使用

JavaScript browser SDK

的

CDN

托管版本，但是，您也可以通过

NPM

安装

browser SDK

。

https://docs.sentry.io/platforms/javascript/install/npm/

打开
```
index.html
```
文件（位于 ./frontend-monitoring/public/ 下）

请注意，我们在代码中尽可能早地导入和初始化

SDK

。初始化

SDK

时，我们提供所需的配置。唯一的强制配置选项是

DSN key

，但是，SDK 支持多个其他配置选项。有关更多信息，请参阅配置。

https://docs.sentry.io/platforms/javascript/configuration/

在
```
Sentry SDK
```
配置中，输入您从上一节创建的项目中复制的
```
DSN
```
key 值。

Sentry.init({
dsn: "<PASTE YOUR DSN KEY HERE>",
});

Step 3: 安装并运行 demo app

在你的

localhost

上构建和运行

Demo

应用程序：

打开
```
shell
```
终端并将目录更改为
```
frontend-monitoring
```
项目文件夹
使用
```
.nvmrc
```
文件设置与本项目兼容的
```
Node
```
版本。运行：

> nvm use

通过运行安装项目依赖项：

> npm install

通过运行以下命令在
```
localhost
```
上构建、部署和运行项目：

> npm run deploy

部署成功完成后，您将在终端中看到确认信息。

捕捉你的第一个错误

Step 1: 捕捉你的第一个事件

通过在浏览器中打开
```
localhost
```
链接来启动
```
demo app
```
打开浏览器的
```
Console
```
验证是否发生了错误

点击任何
```
Buy!
```
将产品添加到购物车的按钮
单击左侧面板上的
```
Checkout
```
按钮以生成错误

请注意：
- 错误出现在浏览器控制台中
- 发送到您在
```
Sentry
```
  上配置的电子邮件地址的警报，通知您应用中发生的错误

Step 2: 处理错误

转到您的电子邮件收件箱并打开
```
Sentry
```
的电子邮件通知
单击
```
Sentry
```
上的查看以在您的
```
Sentry
```
帐户中查看此错误的完整详细信息和上下文
向下滚动到
```
Exception
```
堆栈跟踪
- ```
Sentry
```
  可以将代码解压缩(
```
un-minify
```
  )回其可读形式并在每个堆栈帧中显示源（代码）上下文行，这将在下一节中介绍。

在错误中启用可读堆栈跟踪

Step 1: 准备构建环境

我们在

frontend-monitoring

项目中使用

Makefile

来利用

sentry-cli

处理与

Sentry

Step 2: 创建 release 并上传 source maps

现在我们可以调用

sentry-cli

来让

Sentry

知道我们有一个新

release

并将项目的

source maps

上传到它。

您可以设置自定义
```
release version
```
以适应您的命名约定，或者让
```
Sentry CLI
```
建议一个版本。

为了构建

frontend-monitoring

项目，我们使用

react-scripts

包，它也在

./build/static/js/

下生成

source maps

在

Makefile

中，为

release version

添加一个新的环境变量，利用

Sentry CLI

提出版本值

REACT_APP_RELEASE_VERSION=`sentry-cli releases propose-version`

在

Makefile

的底部，使用

Sentry CLI

将以下目标粘贴到：

Sentry

release entity

将项目的
```
source maps
```
上传到新
```
release
```

create_release:
sentry-cli releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(REACT_APP_RELEASE_VERSION)

upload_sourcemaps:
sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files $(REACT_APP_RELEASE_VERSION) \
upload-sourcemaps --url-prefix "~/static/js" --validate build/static/js

Makefile

包含一个

setup_release

目标，该目标在运行

$ npm run deploy

以构建和运行项目时从

package.json

文件中调用。我们将使用这个目标来调用所有与

release

Step 3: 尝试您的更改 --- 生成另一个错误

如果您的终端仍在
```
localhost
```
上提供
```
demo app
```
，请单击
```
^C
```
关闭本地服务器
通过运行以下命令来构建、部署和重新运行项目：

> npm run deploy

注意：Makefile 在缩进方面通常是严格的。如果您在运行上述命令时遇到意外错误，请确保 sentry-cli 命令正确地以制表符(tab)为前缀。

查看终端日志。请注意，
```
minified
```
的脚本和
```
source maps
```
已上传到
```
release version
```
。
在您的浏览器中，确保开发控制台已打开并执行清空缓存和硬重新加载(
```
Empty Cache and Hard Reload
```
)以确保提供更新的代码。
通过将产品添加到您的购物车并单击
```
Checkout
```
再次生成错误
检查您的电子邮件以获取有关新错误的警报，然后单击在 Sentry 上查看以打开
```
issue
```
页面
请注意
- 错误堆栈跟踪现在
```
un-minified
```
  ，包括每个堆栈帧中的文件名、方法名、行号和列号以及源代码上下文

Step 4: 探索 release

创建

release version

并通过

Sentry CLI

上传

source maps

，在您的 Sentry 帐户中创建一个

Release entity

。

单击左侧面板中的
```
Releases
```
，注意创建了一个新的
```
release version
```
单击
```
release
```
，注意您的应用程序中的错误已与此
```
release
```
相关联并列为New Issue
单击
```
Artifacts
```
选项卡，注意
```
minified
```
的资源和
```
source maps
```
可用于此
```
release
```
并用于
```
source map
```
堆栈跟踪

启用可疑提交

Sentry

使用源代码存储库中的提交元数据(

metadata

)来帮助您更快地解决问题。这是通过建议可能在您的问题(

issue

)详细信息页面中引入错误的可疑提交(

Suspect Commits

)来完成的。它还允许

Sentry

显示

Suggested Assignees

- 这些提交的作者列表并建议他们分配以解决问题(

issue

)。

现在您已经创建了一个

release

，您可以告诉

Sentry

哪些提交与您的最新版本的代码相关联 —— 这称为提交跟踪(

Commit Tracking

)。

Step 1: 集成您的 GitHub 帐户和存储库

要将
```
GitHub
```
与您的 Sentry 组织(
```
org
```
)集成，请按照
```
GitHub
```
文档中的说明进行操作
对于最后一步，从您的
```
GitHub
```
帐户添加
```
frontend-monitoring
```
存储库

Step 2: 设置提交跟踪

现在您已经在

Sentry

中设置了

releases

作为

CI/CD

流程的一部分并集成了源代码存储库，您可以将链接存储库中的提交与发布相关联。

现在，您已经在

Sentry