前端监控系统博客总结

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

没想明白的点

  • 页面卡死奔溃的时候, 如何发送异常 -> 心跳包, 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集群

展示(报警)

参考

posted @ 2021-12-27 17:09  张润昊  阅读(66)  评论(0)  编辑  收藏  举报