【前端监控系统开发实录】之原生 SDK 开发（一）

在之前的文章我们已经理清 SDK 的开发流程：

1. 明确采集数据
2. 封装采集方法
3. 数据上报后端
4. 接入项目测试

那么本文就来看看有哪些数据需要采集。

明确采集数据

产品使用过程中产生的数据可以分为三大类：异常数据 、 行为数据 和 性能数据 。

异常数据

顾名思义，异常数据 是指各种报错，也可以分为两大类：前端异常 和 接口异常 。

前端异常

• JS 代码执行异常
  • 类型错误
  • 引用错误
• Promise 异常
  • Promise 被 reject 且没有被 catch 处理
• 静态资源加载异常
  • img 图片失效
  • CDN 资源失效
  • 第三方 js 地址有误
• console.error 异常
• 跨域异常

前端的异常采集大概就这 5 种吧，基本囊括了前端 90% 以上的异常情况。

接口异常

接口异常属于后端的异常，但是接口异常会直接导致前端页面错误，因此这类异常我们也需要监控到位。

接口异常可以根据响应结果分类：

• 未响应/超时响应异常
• 4xx 请求异常
• 5xx 服务器异常
• 权限不足

4xx：请求异常，一般是前端传递的参数问题，或者接口验证参数的问题。
5xx：服务器内部处理的异常。
权限不足：现在某些管理系统的权限设计比较复杂，有时候突然莫名其妙的接口调不通，影响用户的下一步操作，这也需要记录和追踪。

行为数据

而 行为数据 就比较广泛了，用户任何有意义的操作我们都可以定义为 行为数据 。比如点击某个按钮，停留了多久，新功能的点击率，什么时候使用等等。

通过监控行为数据，我们可以做：

• PV、UV量，日同比、周同比等，能清晰的明白流量变化；
• 用户热点页面、高访问量TOP10；
• 设备、浏览器语言、浏览器、活跃时间段等的用户特征；
• 用户的行为追踪：某个用户，进入了网站后的一系列操作或者跳转行为；
• 用户自定义埋点上报用户行为：想做一些自定义事件的监听，比如播放某个视频的行为动作；
• 多语种站点，每个语种的用户量；
• ……

性能数据

指一个页面从加载到渲染的各个指标，比如白屏时间、首屏渲染时间等数据，通过监控这些关键性的用户体验指标，我们可以知道页面的性能，从而辅助开发者有针对性地进行优化。