这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
一、前言
前端监控 SDK 部分的内容，主要三个方面：
- 收集哪些数据
- 客户端SDK(探针)及原理
- 编写测试用例
二、收集哪些数据
前端监控系统最核心的首要是收集客户端的相关数据，我们现在支持的客户端探针有： web 、微信小程序、 andriod 和 ios。他们主要收集以下信息
2.1 性能
收集页面加载、静态资源、 ajax 接口等性能信息，指标有加载时间、 http 协议版本、响应体大小等，这是为业务整体质量提升提供数据支撑，解决慢查询问题等。
2.2 错误
收集 js 报错、静态资源加载错误、 ajax 接口加载错误，这些常规错误收集都很好理解。下面主要说明一下"业务接口错误(bussiness)":
客户端发送 ajax 请求后端业务接口，接口都会返回 json 数据结构，而其中一般都会有 errorcode 和 message 两个字段， errorcode 为业务接口内部定义的状态码。正常的业务响应内部都会约定比如 errorcode==0 等，那如果不为 0 可能是一些异常问题或者可预见的异常问题，这种错误数据就是需要收集的。
由于不同团队或者接口可能约定都不一样，所以我们只会提供一个预设方法，预设方法会在 ajax 请求响应后调用，业务方自己根据约定和响应的 json 数据，在预设的方法中编写判断逻辑控制是否上报。
2.3 辅助信息
除了上面两类硬指标数据，我们还需要很多其它的信息，比如：用户的访问轨迹、用户点击行为、用户ID、设备版本、设备型号、UV/UA标识、 traceId 等等。很多时候我们要解决的问题并不是那么简单直接就能排查出来，甚至我们需要前端监控和其它系统在某些情况下能够关联上，所以这些软指标信息同样很重要。
在这里专门解释一下 traceId :
现在的后端服务都会使用 APM （应用性能管理）系统， APM 工具会在一次完整请求调用之初生成唯一的 id ，通常叫做 traceId ，它会记录整个请求过程服务端的链路细节。如果前端能够获取到它，就能通过它去后端 APM 系统中查询某次请求的日志信息。
只要后端做好相关的配置，后端接口在响应客户端 http 请求时，可以把 traceId 返回给客户端，SDK便可以去收集 ajax 请求的 traceId ，这样前后端监控就能够关联上了。
2.4 小结
收集以上的信息并开发一套管理台，能够达到监控前端性能和异常错误的目的。想象一个场景，当我们收到监控系统的告警或者相关同事的问题反馈时，我们能打开管理台，首先查看到实时的错误，如果发现是 js 的代码导致的问题，我们能很快找到前端代码错误的地方。
如果不是前端的错误，我们通过收集的业务接口错误发现是后端接口的问题，我们也能及时的通知后端同事，在什么时间哪个接口报出 errorcode 为xx的错误，并且我们还能通过 traceId 直接查到这次 ajax 请求的后端链路监控数据。
如果实在不是明显就能排查到的问题，我们还能通过收集到的用户轨迹、设备信息和网络请求等数据，多方面的分析还原用户当时的场景，来辅助我们排查代码中的难以复现的 bug 或者兼容问题。
在以上这个场景中，我们能够提高前端排查问题的能力，甚至能辅助后端同学。在大部分时候，出现 bug ，很可能第一时间首先是找到前端做反馈，前端是排查问题的先头部队。当我们有这样的前端监控系统之后，不至于每次遇到问题手足无措，解决问题的时间也会快许多。
