总结看了很多很多的文章, 了解了很多方法, 但选出最适合自己的那个, 是最难的.
没想明白的点
- 页面卡死奔溃的时候, 如何发送异常 -> 心跳包, service worker发送数据
- 跨域问题: ->
- 尽可能的Patch信息, 但入侵业务太大了
- 解决打点GIF中的最大长度问题 ->
- 分成即时数据上报, 和行为数据上报.
- http2/头部压缩
- 压缩日志长度
- 行为数据较大, 走ajax, (只针对特定站点解决, 跨域问题).
- 行为数据较大, 可以使用sendBeacon.
- 点击的监听事件, 在error后面执行, 如何保存起来 -> 后面的数据通过行为数据上报. 错误全部走即时上报
- 其他script标签引入的sdk中报错, 如何捕获 -> 如果想收集其他sdk的错误, 需要标明
<script crossorigin> - 异常隔离 -> 区分sdk异常和业务异常
前端监控的目的
- 了解线上性能信息, 提升用户体验
- 更快的发现异常, 定位异常, 解决异常
前端监控流程
采集 -> 上传 -> 分析 -> 展示(报警)
采集
- 环境信息
- url: 页面 -
window.location.href - ua: 用户信息 -
window.navigator.userAgent - token: 前端网页
- user: 业务相关用户
- url: 页面 -
- 性能信息
- 网络层面
- 页面展示层面
- 异常信息
- 语法错误
- 类型错误
- 范围错误
- 引用错误
- eval错误
- URL错误
- 资源加载错误 (只能在捕获阶段获取到)
- 接口信息
- XMLHttpRequest方法拦截
- Fetch方法
- 行为信息
- 点击
- 路由
- 滚动
- 鼠标
- 键盘等
- 用户自定义信息
流程
- ajax
- new Image()
- sendBeacon
分析
- 日志上报后, 进行清洗, 获取想要的数据, 落库.
- 数据量大的时候, 使用就需要使用Hadoop集群