应用监控
1、背景
- 用户设备千奇百怪，我们的代码在这些设备上运行就如同飞奔的野马，随便跑，你也不知道它们到底运行的如何，开发者根本不清楚！例子：负库存，高库存，虚库存。对于研发来说如果有应用监控机制可以提前了解线上应用情况，主动出击，提前排坑 ，不要等用户反馈。(如何提前发现问题？)
- 用户反馈问题到我们这边，很多时候定位问题只能靠猜，尤其是一些偶发诱因，因为根本不知道用户是如何操作的，真实环境遇到的问题通常是很多随机因素叠加的形成的，因此很难回放用户的操作来还原现场找到原因。(如何定位问题？)
- 例子：拉新用户。（如何防止用户诈你！）
监控的目的：如何提高感知、定位、处理的效率？
2、应用分类
- 原生应用（IOS/Android）
- Web 应用（H5）
- RN 应用（React Native）
- HN 应用（HTML5 Native）
- 小程序（微信、支付宝...)
- ...
3、步骤
- 数据采集
- 性能采集
- 错误采集
- 日志采集
- 数据上报
- 上报方法
- 上报时机
- 数据分析
- 展示
- 预警
3.1 数据采集
性能数据采集
- chrome 开发团队提出了一系列用于检测网页性能的指标：
- FP(first-paint)，从页面加载开始到第一个像素绘制到屏幕上的时间
- FCP(first-contentful-paint)，从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间
- LCP(largest-contentful-paint)，从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间
- CLS(layout-shift)，从页面加载开始和其生命周期状态[2]变为隐藏期间发生的所有意外布局偏移的累积分数
- DOMContentLoaded、load 事件
- 接口请求耗时
- 资源加载时间、缓存命中率
- FPS
- …
错误数据采集
- 资源加载错误
- JS错误
- Promise错误
- 请求错误
- Vue错误
- …
日志采集
- PV
- UV
- 页面停留时间
- 页面访问深度
- 用户点击
- 页面跳转
- …
3.2 数据上报
上报方法
- sendBeacon
- XMLHttpRequest
- image
- ...
上报时机
- 采用 requestIdleCallback/setTimeout 延时上报。
- 在 beforeunload 回调函数里上报。
- 缓存上报数据，达到一定数量后再上报。
3.3 数据分析
展示
预警
- 飞书
- 邮件
4、总结
- 变被动为主动，有效的帮助解决问题。
- 提高效率。（一套完整的应用监控提供的核心功能为监控及诊断一些问题提供了解决方案，可以有效地帮助开发、产品、运维人员）
- 体现项目质量。
- 防止用户欺诈。（例子：转介绍拉新用户给奖励案例。A通过某应用分享链接给微信好友，B打开链接注册）