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

系列

• 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本
• 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps
• Sentry For React 完整接入详解
• Sentry For Vue 完整接入详解
• Sentry-CLI 使用详解
• Sentry Web 性能监控 - Web Vitals
• Sentry Web 性能监控 - Metrics
• Sentry Web 性能监控 - Trends

目录

• 创建一个 Sentry 项目
  • Step 1: 创建项目
  • Step 2: 创建警报规则
• 将 Sentry SDK 引入您的前端代码
  • 前置条件
  • Step 1: 获取代码
  • Step 2: 安装 SDK
  • Step 3: 安装并运行 demo app
• 捕捉你的第一个错误
  • Step 1: 捕捉你的第一个事件
  • Step 2: 处理错误
• 在错误中启用可读堆栈跟踪
  • Step 1: 准备构建环境
  • Step 2: 创建 release 并上传 source maps
  • Step 3: 尝试您的更改 --- 生成另一个错误
  • Step 4: 探索 release
• 启用可疑提交
  • Step 1: 集成您的 GitHub 帐户和存储库
  • Step 2: 设置提交跟踪
  • Step 3: 可疑提交和建议受理人
  • 更多信息

创建一个 Sentry 项目

Step 1: 创建项目

1. 登录您的 Sentry organization

   • https://sentry.io/

2. 从左侧导航菜单中选择 Projects 以显示所有项目的列表

3. 单击 + Create Project 按钮

   

   注意：如果您的帐户中没有项目 --- 您可能会被重定向到入门向导以创建您的第一个项目。

   • 根据您希望监控的代码为您的项目选择语言或框架——在本例中为 JavaScript。
   • 给该项目一个 Name。
   • 在 Set your default alert settings 下，选择 i'll create my own alerts later。
   • 为该项目分配一个 Team。

   

   如果您尚未定义任何团队(Team)，您可以选择默认组织团队(与您的 Sentry 组织同名的团队)或单击 + 按钮创建新团队。

   

   • 单击 Create Project。这会将您带到配置页面。通读快速入门指南。

4. 复制 DSN key 并将其放在手边，因为我们会将密钥复制到源代码中。

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

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

Step 2: 创建警报规则

您可以为每个项目创建各种警报规则，并让 Sentry 知道您希望在应用程序中发生错误时通知的时间(when)、方式(how)和对象(whom)。 警报规则(Alert rules)由条件(Conditions)和操作(Actions)组成，它们在满足相关条件时执行。有关更多信息，请参阅 Alerts。 创建新项目时，您可以选择使用警报规则创建它，该规则在第一次出现新问题时通知所有项目团队成员(通过电子邮件)。 这意味着下次发生类似错误时，不会触发通知，因为该错误不是“新的”。

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

在此步骤中，您将创建一个新的 Alert 规则，在每次(every time)事件发生时发出通知，即使它与已经存在的问题相关联。在实际的场景中，您可能会添加额外的条件，因为您不希望每次在终端用户浏览器的前端代码中发生事件时都得到通知。

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