前端监控的作用
获取用户行为已经跟踪产品在客户端的使用情况,以数据为基础指明产品优化的方向。
前端性能监控和错误监控
- 前端衡量性能的指标(时间监控)
- 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 将数据可视化