sentry错误监控简介错误监控对于一个线上项目是特别重要的，有助于错误定位和问题及时跟进。在做sdk开发时简单接入过

简介

错误监控对于一个线上项目是特别重要的，有助于错误定位和问题及时跟进。在做sdk开发时简单接入过sentry但是由于后期接入了观测云就废弃掉了sentry.但作为纯前端项目sentry监控还是特别合适的。正好最近有时间就要把之前没接完的功能对接一遍。这篇文章的目的是当我们需要针对系统错误监控、日志上报时能够快速的进行entry的接入

注册sentry账号且创建项目

sentry注册官网注册完成之后，选择project-> create project创建项目这里我选择React项目，并且名称命名为akclown-demo

配置sentry

创建完成之后sentry也会给我们对应的配置信息。
TIPS: 我们需要保存好DSN的地址，也就是sentry日志上报的地址每个参数意义以及如何接入都可以查看sentry提供的文档有详细介绍
如下是我的代码配置，并且在APP组件设置一个button按钮抛出throw new Error('AKCLOWN ')
当我点击按钮时，页面报错就会往sentry推送消息。sentry官网的issue就能看到对应的报错。如下图就可以看到调用堆栈信息、浏览器、系统等一些基础信息。这也将帮助我更加清晰的复现以及修复问题并且绑定的手机号也会接收到对应报错数据,及时跟进线上p0级别错误(免费用户有条数限制)

错误边界

当我们的项目报错就会出现如下错误页面。这显然对于用户来说是非常不好的体验。我们应该定义一个错误页面，如果报错了就展示报错页面 接下来在最顶层添加Sentry.ErrorBoundary来实现错误边界的能力。

fallback回调还提供了一些propserror, componentStack, resetError
可以根据不同路由定义不同的错误边界(多个错误边界)

function FallbackComponent() {
  return <div>An error has occurred</div>;
}

<React.StrictMode>
    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
      <App />
</Sentry.ErrorBoundary>

这里需要注意三点的是：

sentry的错误边界不捕获事件处理程序内部发生的错误，例如“onClick”.具体issue
在开发模式下，React 将重新抛出错误边界内捕获的错误。这将导致使用上述设置向 Sentry 报告两次错误，但这不会在您的生产构建中发生
只能捕获子组件的错误。如果我在APP组件报错，但是我的错误边界也是定义在APP里，是没有办法被捕获到的

发布

发行版是指已部署到环境中的版本，当我们给sentry提供了发行版的信息时，那么我们就可以

确定新版本引入的问题
预测哪个提交导致了问题以及负责人是谁
通过在提交记录包含问题编号来解决问题
当代码部署时会接收到短信通知
此外release还用于source map

自动化发布管理

接下来通过自动集成的方式进行sentry release的构建。

CI集成首先你必须是Sentry的组织者或者管理员
链接github仓库，我们必须也得是拥有者或者管理员，并且Sentry是github授权过的应用

安装github应用集成
配置完成之后，点击add Respositort选择需要追踪提交仓库。（如果你授权时，选择单一仓库那么这里是没有数据的，如果选错了，重新回到上一步重新安装github进行配置即可）
关联完成之后，接下来通过github actions来实现自动发布管理. 参考文档: sentry release github action

创建sentry内部集成(CI) 为了action与sentry安全通信，我们需要创建一个新的CI。(账号必须是管理员或拥有者才可以)
设置管理员有‘Release’权限、组织具有‘Read’权限设置完毕之后，获取到对应的token.将token存储到关联的github仓库里，设置为SENTRY_AUTH_TOKEN密钥。在这里也把SENTRY_ORG(组织名称)和SENTRY_PROJECT(项目名称)都设置上
GitHub Acitons工作流的集成，在项目中创建.github/workflows/sentry-demo.yml文件，代码如下:

当推送到master分支时，且scr/** ... 文件有改动，触发jobs
配置sentry相关的配置信息。一些参数的含义最终就可以在release专栏看到我们的发版信息了再来看看issue，就会携带relaase也就能清楚的知道是哪个版本出现的问题。以及sentry也提供了Assigned To将问题指定给某人

源码集成

到目前为止我们还没有做源码映射，使用source map让你的错误可读性更强。接下来来看看如何做上传source map. 自动安装 (通过如下命令忽悠提示，根据指引选择对应的选项即可)

npx @sentry/wizard@latest -i sourcemaps

配置对应信息执行npm run build 经过上面的配置，如下报错信息就能够看到错误信息的源码映射了在project -> setting -> source maps可以看到我们上传的源码结构 当然官方还提供了手动上传源码。

接入webHook通知

接下来实现一下，如何将sentry错误信息使用webhook进行错误推送。因为sentry通过webhook推送的数据格式不是企业微信企业微信需要的数据格式，因此我们需要自己搭建一个NestJS中间层服务将数据转为企业微信需要的数据格式。

首先搭建nestJs服务，并且编写一个post方法onSentry，地址链接追加:name方便我们区分是那个sentry项目上报的日志
在sentry中配置webhook集成:
project(选中项目) -> Setting -> Legacy Integrations -> 选择Webhook -> enable -> Configure plugin -> 配置webhook推送的Nest服务器地址