总结看了很多很多的文章, 了解了很多方法, 但选出最适合自己的那个, 是最难的.

没想明白的点

• 页面卡死奔溃的时候, 如何发送异常 -> 心跳包, service worker发送数据
• 跨域问题: ->
  • 尽可能的Patch信息, 但入侵业务太大了
• 解决打点GIF中的最大长度问题 ->
  • 分成即时数据上报, 和行为数据上报.
  • http2/头部压缩
  • 压缩日志长度
  • 行为数据较大, 走ajax, (只针对特定站点解决, 跨域问题).
  • 行为数据较大, 可以使用sendBeacon.
• 点击的监听事件, 在error后面执行, 如何保存起来 -> 后面的数据通过行为数据上报. 错误全部走即时上报
• 其他script标签引入的sdk中报错, 如何捕获 -> 如果想收集其他sdk的错误, 需要标明<script crossorigin>
• 异常隔离 -> 区分sdk异常和业务异常

前端监控的目的

• 了解线上性能信息, 提升用户体验
• 更快的发现异常, 定位异常, 解决异常

前端监控流程

采集 -> 上传 -> 分析 -> 展示(报警)

采集

• 环境信息
  • url: 页面 - window.location.href
  • ua: 用户信息 - window.navigator.userAgent
  • token: 前端网页
  • user: 业务相关用户
• 性能信息
  • 网络层面
  • 页面展示层面
• 异常信息
  • 语法错误
  • 类型错误
  • 范围错误
  • 引用错误
  • eval错误
  • URL错误
  • 资源加载错误 (只能在捕获阶段获取到)
• 接口信息
  • XMLHttpRequest方法拦截
  • Fetch方法
• 行为信息
  • 点击
  • 路由
  • 滚动
  • 鼠标
  • 键盘等
• 用户自定义信息

流程

• ajax
• new Image()
• sendBeacon

分析

• 日志上报后, 进行清洗, 获取想要的数据, 落库.
• 数据量大的时候, 使用就需要使用Hadoop集群

展示(报警)

参考

• 彻底搞懂前端监控的目的和流程
• 把前端监控做到极致
• 如何监控网页崩溃？
• 前端性能与异常上报
• 产生 Script error 消息的原因
• 如何优雅处理前端异常？
• 从0到1搭建前端异常监控系统(Vue + Webpack + Node.js + Egg.js + Jest)
• 一步一步搭建前端监控系统：如何记录用户行为？
• 前端异常监控解决方案研究