Sentry 平台升级记录

本文不涉及 Sentry 平台搭建流程,只介绍在项目中如何切换至新版本
Sentry v9.0.0 -> Sentry v23.6.2

为什么使用新版 Sentry

每周都有统计 Sentry 问题的需求,但是在旧版的 Senrty 中没有看板页面,不能统一查看所有项目问题,不太方便

新版 Sentry 解决了这个问题,在侧边的 Issues 模块下,汇总了当前用户所有项目的问题,且可以通过条件过滤自己想要查看的问题

升级改动

数据上报配置

Sentry 平台

  1. 创建项目,会自动生成对应项目的 DSN(客户端密钥)

项目

  1. 修改上报的 DSN,CI 中配置 token、url、org
    1. token:可以为最高权限用户 token,如果需要更细粒度的区分组别和项目,可以再使用对应用户的 token
    2. url:新 Sentry 项目的域名
    3. org:组织设置中的名称
  2. 修改使用的上报库:@sentry/react(react 项目使用)
  3. 可选配置
    1. 性能:在 Sentry.init() 初始化的 integrations 参数中,增加 [new Sentry.BrowserTracing()],并按需设置采样率参数 tracesSampleRate,即可使用 Sentry 中的性能分析功能(这个功能比较实用,可以查看生产环境中的实际性能,更多使用方法可以查看官方文档)

告警配置

简单的项目问题的告警流程为:

graph TB A(项目数据) -- 上报 --> B[Sentry 平台] B[Sentry 平台] -- WebHooks --> C[钉钉,企业微信等通信软件] C[钉钉,企业微信等通信软件] -- 消息提示--> e(结束)

新版本 Senrty 中需要给每个项目创建对应的 Alert 规则,才能捕获错误,并通过 WebHooks 发送

Sentry 平台

  1. 开启集成中的 WebHooks,填写对应 Callback URLs 地址
  2. 创建上报告警规则
    1. 在项目右侧点击 Create Alert,或者直接在侧边的 Alerts 中打开(然后选择 Create Alert)
    2. 进入后默认会选中创建 issues,直接点击 Set Conditions
    3. 选中内容
      1. When:不选,默认满足 when 条件,也就是说,所有的问题都会满足这个条件
      2. If :不选
      3. Then:触发后的动作,选择最后一个,默认发送 webhooks
    4. 设置执行速率限制 5 min(最小值)
      1. Sentry 只执行在速率限制期限内尚未针对该问题执行的动作。例如,如果一个问题在一分钟的时间内多次满足警报条件,但是您的频率阈值是一分钟,那么你只会收到一次警报。

项目

  1. 项目上报修改,captureException 中需传入 Error 的实例,才可以在 Sentry issue 内容的标题中展示对应的问题,否则为 <unknown>
    1. 也可以使用 captureMessage 直接上报字符串

参考文档

  1. 终于搞清楚了 Sentry Issues 页面几个重要的内容 - 掘金
  2. Sentry 监控 - Alerts 告警 - 掘金
相关推荐
come1123413 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架