为什么需要前端监控
通过监控工具来收集、上报、查询业务数据，为理解业务以及解决问题提供依据，能为业务前端工程师提供话语权，遇到线上问题时撕逼的武器
前端监控整体设计思路
基本思路：SDK数据采集->日志上报->日志查询
Web SDK 设计
收集的监控模块有：
- 页面访问量，包括从哪个页面来，到哪个页面去，监听hashchange和劫持history方法
- 前端js error，通过监听window.onerror和unhandlrejection方法
- 接口请求情况，重写XHR对象，监听接口返回的状态码
- 静态资源，通过PerformanceEntry查看静态资源加载情况，如video、img、audio等等
- 页面性能,Performance的timing对象，可以查看FCP、FP等信息
压缩代码体积的方法（附监控sdk体积对比）
- 压缩变量名，将window用w代替，prototype.xxx用p代替等等
- 无需重用的函数用iife（立即调用函数表达式）来编写
前端监控使用案例
排查个例的方法
通过司机id获取用于查询的加密id ->通过id访问前端日志 ->查看接口请求路径情况，和后端同学查看sudo的日志方法类似，前端监控提供了通过前端查看的方式。
排查非单例问题的思路
- 先看最近有无发布 -> 找对应接口的请求日志 -> 缩小排查实践范围 -> 看细节参数 -> 得出结论
- 控制变量法，对比其他入口是否出现相同情况，若其他入口正常，则说明该入口有问题
- 具体问题需结合业务数据具体分析，得出结论后技术侧需推动产品进行问题整改，
- 监控面板有很多指标可以缩小排查范围，如clientid、时间窗口、城市、ip等等，因根据问题特点选择筛查项
前端告警
当某些页面指标的趋势走向不正常时，前端监控会发出告警，通过飞书机器人的方式告知开发同学，做到实时监测大盘的效果。
个人总结
在货拉拉实习期间有幸接触到行业一线的前端监控方案，周会期间同事分析线上问题时经常用到监控面板的数据，通过数据来复盘以及制定整改目标，让我们前端工程师在排查问题的时候有据可依，有源可溯。
作为一名开发同学，我们除了要求自己能实现产品的功能之外，还应确保产品的稳定性，以及在出现问题的时候能快速定位，而掌握使用前端监控的方法，是我们前端工程师应有的职业素养。