react 快速接入 sentry，性能监控与错误上报踩坑日记

壹 ❀ 引

不知不觉入职新公司已经一个多月了，在主导基建组的这段时间也难免会与错误监控和性能监控打交道，因为公司主要考虑接入sentry，而对于我接入sentry的基建任务需求主要分为：

• 支持查看项目Web Vitals指标
• 支持接口错误自定义上报
• 支持接口耗时信息上报统计
• 支持首屏加载耗时监控

其实这几个小需求接入的过程中又给我衍生了新的问题，比如：

• 接口错误上报存在很多高频且没意义的错误，比如账号密码错误之类的需要过滤
• 首屏加载时间我应该怎么计算？标准怎么定？
• 面包屑能展示调用栈信息，但很多上报的对象显示为[Object]，无法展开易读性太差需要解决。

但是不得不说，目前网上能搜到关于sentry的文章真的太少，而且大部分文章都只是一个最基本的sentry初始化，看官网10分钟就能搞定的程度，所以遇到很多问题基本找不到答案。过程中也是各种给sentry官方写邮件问问题，时差关系一天只能回复一次…在通过一段时间的研究，也顺利完成了任务卡中所定的几个小目标，因为确实有踩坑，所以很有必要写一篇文章记录。

另外，本文标题虽然带react，但其实本文的思想和框架非强绑定关系，全文非常通用，这点大家不需要担心，让我们直接开始。

贰 ❀ 必须了解的前置概念

如果要用sentry做性能监控，如下几个概念是你必须知道，所以我们先提前说说。

贰 ❀ 壹 sentry中的事务(Transaction)与维度(span)

其实一开始我就想过一个问题，sentry可以做性能监控，那么它监控的维度是怎么样的，性能信息是怎么上报上去的，难道一个接口上报一次？在后续深入了解以及跟官方沟通后可以确定，sentry以每个页面（路由）加载为单位，然后搜集这个页面加载过程中的接口请求，资源下载等等数据，之后统一跟随这个页面一起上报。

简单来理解，每个页面每次加载时sentry都会以这个页面为名创建一个事务Transaction（一个装信息的盒子），在加载过程中，sentry会搜集接口请求、pageload、静态资源下载等等数据，然后装在这个事务一起上报：

关于Transaction事务可以进入sentry点击后台的performance，可以看到下方有一个以路由页为单位统计的Transaction事务表格：

上图我展示了登录和注册两个事务，在最后还能看到被筛选条件下被访问了多少次。

而假设我们点击登录事务进入详情，可以看到有一个叫spans的tab页，点击过去，你就能看到前面被访问几十次的登录页所有spans的信息，比如http.client用于查看所有接口调用的次数，以及耗时情况，resource.img用于看图片资源下载情况等等。

这里我们解释了事务与维度的关系，sentry以页面为单位搜集单个页面的不同维度数据，所以你只能以页面为单位看不同页面的性能情况，假设我现在希望看到整个项目所有页面的某个维度（比如某个接口）信息，这对于sentry来说是办不到的，它并没提供整合整个项目所有页面所有维度的功能，这个要提前先说清楚。

当然sentry提供了自定义事务的能力，就是你可以自己创建属于自己的事务，然后来塞一些你想上报的维度，这个后面我们再说。

贰 ❀ 贰 关于前端性能指标Web Vitals

Web Vitals是google提出的一种用于检测网站使用体验是否良好的指标，主要分为如下三种：

• LCP：Largest Contentful Paint 顾名思义最大内容绘制，这个只算首屏，比如你页面滚动又加载了新的内容不会统计进去。
• FID：First Input Delay 首次输入延迟，比如页面加载完成了用户点击按钮到响应的延迟耗时。
• CLS：