前端监控(性能/数据/异常)

236 阅读1分钟

前端监控的作用

获取用户行为已经跟踪产品在客户端的使用情况,以数据为基础指明产品优化的方向。

前端性能监控和错误监控

  • 前端衡量性能的指标(时间监控)
    • Resource timing Perfornance API
  • 前端资源监控
    • performance.getEntriesByType('resource')
  • ajax请求监控
    • 拦截 open 和 send 方法
  • 前端代码异常
    • window.onerror window.addEventListener
  • 监控用户行为

  • 构建 monitor 服务
    • 该服务入口文件,执行监控函数获取到性能数据,然后利用 image 标签,new Image().src = "/p.gif?" + fotmatObj(data),向服务端发送性能数据
    • 以 perfornance 为例,在 DOMContentLoaded 阶段,收集 performance.timing 的数据,cb 给入口文件使用
  • 打包出监控 js 文件,
  • 将 js 文件引入前端网站服务,前端服务启动时就会收集数据
  • 最后使用 Echarts 将数据可视化

参考: www.jianshu.com/p/1355232d5…