一 前端监控目标
1. 稳定性
| 错误名称 | 备注 |
|---|---|
| JS错误 | JS执行错误或者promise异常 |
| 资源异常 | script, link等资源加载异常 |
| 接口错误 | ajax或fetch请求接口异常 |
| 白屏 | 页面空白 |
2. 用户体验
| 错误名称 | 备注 |
|---|---|
| TTFB(首字节时间) | 浏览器发起第一个请求到数据返回第一个字节 所消耗的时间 |
| FP(首次绘制) | 首次绘制包括用户自定义的背景绘制， 它是第一个像素点绘制到屏幕的时间 |
| FCP(首次内容绘制) | 首次内容绘制是浏览器第一个dom 渲染到屏幕的时间，可以是任何文本，图像，svg等的时间 |
| FMP (首次有意义绘制) | 首次有意义绘制是页面可用性的亮度标准 |
| FID (首次输入延迟) | 用户首次和页面交互到页面响应交互的时间 |
| 卡顿 | 超过 50m的长任务 |
3. 业务扩展
| 错误名称 | 备注 |
|---|---|
| PV | pageView 页面的点击量或浏览量 |
| UV | 访问某个站点不同IP地址的人数 |
| 页面的停留时间 | 用户在一个页面停留的时间 |
前端监控流程
- 埋点
- 数据上报
----------------上面跟前端紧密些------
- 分析和计算 采集到的数据进行加工
- 可视化展示 将数据按各种维度展示
- 监控报警 发现问题后按一定的条件触发警报
常见的埋点方案
- 代码埋点： 嵌入代码埋点，比如监控用户的点击事件，在用户点击的时候插入一段代码，保存这个监听行为或某种数据格式直接传给服务器。
优点：任意时刻，精确的发送或保存信息
缺点： 工作量大
- 可视化埋点 一个界面，点点点就可以埋点了。
- 通过可视化交互的手段、代替代码埋点（不需要开发人员参与）
- 将业务代码和埋点代码分离、提供一个可视化交互的页面
- 可视化埋点其实是用系统代替手工插入埋点
优点： 减少开发的工作量
缺点: 不是很灵活
- 无痕埋点
- 前端的任意一个事件都被绑定一个标识，所有的事件斗记录下来。(无痕埋点)
- 通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告。
优点:无痕埋点的优点是采集全量数据，不会出现漏埋或误埋等现象。
缺点: 给数据传输和服务器增加压力，也不太灵活。
为什么使用git上传
不管是请求git文件还是请求js文件或者页面调用接口，只要能上报，服务器不管具体的上报方式。但为什么现在都用git上报呢？
1. 一般打点域名都不是当前域名，所以请求会跨域，而跨域请求容易配置不当，被浏览器拦截并报错，这是不能接受的。图片的src属性不会跨域，并且同样可以发起请求。（排除接口上报）
2.防止阻塞页面加载，影响用户体验
- 反复操作dom不仅会引发性能问题，而且载入js/css资源也会阻塞页面渲染，影响体验。《script》,link.
3.相比jpg/png, gif的体积更小
- 最小的bmp需要74个字节，png需要67个字节，gif需要47个字节，git比BMP节约41%。
大多使用1*1透明的gif图片上报
-- 来自老陈打码
无埋点
复制百度的一段代码即可，省时省力不省钱，无法针对性特点场景拿到数据，由后端过滤出有用数据，服务器压力大。
