前端学堂
学有所用

打造企业级私有前端监控体系

云课堂:在线视频教程 (附参考代码)

segment课堂:在线教程

已经有很多监控平台了,前端监控的性能体验指标和技术方案也都比较标准化了。我这里只是想分享下不一样的地方。

需求

所以对于前端监控系统,首先需要支持私有化部署,因为公司一般都是私有云。然后支持搜集基础性能体验指标,支持业务自定义埋点数据,支持数据分析, 业务大盘,监控告警等等通用的监控系统能力。最后这个监控系统应该简洁、高效、方便,便于业务自定义,快速发现、排查问题。

该怎么做

然后该如何快速、高效的搭建这么一套前端监控系统呢?

调研了一下集团的现有监控方案,要支持私有化部署,基本都是凉凉了。那么,开源的方案呢?看了一下sentry,定制化比较强,有很多限制,而且并不是那么简洁、高效、方便,维护成本和业务量暂且不说。

突然想到了之前用过的阿里云的SLS, 具体服务我不多介绍了,正好医院系统也是基于阿里云专线机房配置的私有云,这样上报日志可以走内网流量资源不会跑到公网,也不担心数据泄露这些安全隐患。

SLS提供了一套dashboard能力,做数据可视化配置,业务大盘正好用的到,虽然图表化能力还有点弱,但是已经基本够用。还支持监控告警,对了钉钉机器人、邮件等等,基本完美。这些能力,可以自己去看官方文档,虽然写的比较简单。

如何上报数据

SLS有了,存储和加工数据就不用担心了。相当于是花钱买了一个点读机,妈妈再也不用担心我的学习。

但是妈妈需要担心怎么教我使用点读机,怎么发挥点读机的价值,而不是让我用点读机上王者。o(* ̄︶ ̄*)o

其实SLS提供了web tracker接口,就是HTTP请求的接口,支持单条和批量上报数据。那么简单了,公网环境直接通过接口上报,私有网通过服务端做接口转发就好了,那么上报到加工日志的流程就串起来了。
随手简单画了一张图。

所以呢,剩下的问题是采集数据。

如何采集数据

略过1000字 (相关方案有很多了)

这里只说一点,关于采集FMP,chrome浏览器的实现是主要通过统计页面布局对象个数和结合字体和页面高度的元启发算法实现

我这边有个简单的方案是基于 Element timing, 业务通过属性自定义页面的核心元素,基于PerformanceObserver获取element entry的时间统计数据即可(当然注意兼容性)。

好了,整个流程串起来了,就可以开始写代码了。

简单,高效,方便

主要的开发工作是编写数据采集脚本,可以根据业务情况定义采集策略和采集指标数据,当然自己开发,自由度也最高,不受各个监控平台的约束。

后期的工作主要是分析加工数据,基于SLS基本可以做到准实时(官方承诺3-5s延迟),数据报表,业务大盘,监控告警,数据分析挖掘等等。

课程目录

章节1:前端监控架构设计
课时1为什么要做前端监控?04:42
课时2前端监控什么数据?03:50
课时3前端监控架构设计02:53
章节2:编写监控采集脚本
课时4设计监控上报数据模型06:09
课时5开通SLS日志服务02:39
课时6如何通过webTrack上报数据?07:15
课时7JS错误和资源采集02:38
课时8接口错误采集03:11
课时9白屏错误统计方法和代码03:53
课时10页面加载时间计算方法和代码实现03:15
课时11FP/FCP/FMP/FID时间原理介绍02:22
课时12FP/FCP/FMP/FID时间代码实现03:02
课时13卡顿原理和采集代码实现02:01
课时14TBT体验指标计算原理01:58
课时15PV和自定义指标采集01:31
章节3:数据分析大盘
课时16如何做数据查询和可视化06:50
课时17搭建可视化数据大盘03:15
课时18参数化数据查询与大盘构建
章节4:数据监控告警
课时19监控和告警的区别04:43
课时20设置JS同步增长告警05:32
课时21告警准确性问题

赞(1) 打赏
未经允许不得转载:前端学堂 » 打造企业级私有前端监控体系

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏