从0构建私有前端监控系统

课程收获

【官方博客】www.f2e123.com

  • 了解前端监控架构设计
  • 设计监控上报数据模型
  • 页面性能监控代码实现
  • 学会搭建可视化数据大盘
  • 数据监控告警系统搭建

适用人群

  • 初中级未曾接触前端监控的前端工程师
  • 有准备面试冲刺大厂的前端工程师
  • 项目中遇到监控技术瓶颈的前端工程师

课程简介

新增Chrome 85版本开始支持的LCP和CLS指标采集原理和采集方法课时

为什么要做前端监控

前端监控是业务生产必不可少的重要技术设施,通过线上数据采集反馈形成业务闭环,能够帮助业务及时发现问题、定位问题、处理问题。出现问题时及时发现,减少业务损失。也可以帮助业务采集用户数据、分析用户画像,更精确了解业务诉求,解决客户问题。

前端监控是重要的业务数据来源,通过数据的角度分析问题,不仅能作为问题分析依据,也可以从统计学角度、行为学角度分析业务,创造更大的业务价值。本课程介绍的是一种简单高效、自主灵活的快速搭建可生产使用的前端监控体系。

自主监控数据采集

市面上大部分是结合开源监控做的监控系统,性能和自由度受限。本课程讲解前端监控设计架构,各个监控项采集数据的原理,手把手和你一起编写监控采集脚本,具有自主性和灵活的业务扩展能力。

打造可视化数据分析大盘搭建

介绍数据分析思维,讲解如何从数据角度发现、分析、定位问题。结合阿里云SLS日志服务分析监控数据,构建可视化数据分析大盘,分析业务数据。

实时监控警告系统搭建

从业务角度出发,基于稳定性和性能体验,构建业务大盘,根据数据情况构建稳定性和体验相关数据监控告警,基于邮件、钉钉、电话等准实时告警到业务,及时发现问题。

必备技能,面试必问,必要知道的那些事

前端开发和其他职业一样,总是要分出369等。技术深度和广度,从一些细节就能看出。前端监控也是从高级工程师进阶到专家级别工程师必备的技能。软实力是了解业务场景、技术价值,了解采集各个指标的方法和用处,怎么为业务服务,怎么转化成有用的生产数据。硬技能是能够从0到1,独立自主研发、搭建这么一套监控系统,能够满足业务个性化诉求,解决业务问题。

讲师介绍

扫地僧 - 高级技术专家

前阿里、网易前端技术专家,负责流程驱动引擎、可视化搭建、前端发布、构建平台等技术能力建设,带领业务团队,负责整体业务线。

课程大纲

前端监控架构设计

  • 课时1:为什么要做前端监控?
  • 课时2:前端监控什么数据?
  • 课时3:前端监控架构设计

编写监控采集脚本

  • 课时4:设计监控上报数据模型
  • 课时5:开通 SLS 日志服务
  • 课时6:如何通过 webTrack 上报数据
  • 课时7:JS 错误和资源采集
  • 课时8:接口错误采集
  • 课时9:白屏错误统计方法和代码
  • 课时10:页面加载时间计算方法和代码实现
  • 课时11:FP/FCP/FMP/FID 时间原理介绍
  • 课时12:FP/FCP/FMP/FID 时间代码实现
  • 课时13:卡顿原理和采集代码实现
  • 课时14:TBT 体验指标计算原理
  • 课时15:PV 和自定义指标采集
  • 课时16:TTI(首屏可交互时间)指标采集
  • 课时17:LCP(最大区块渲染时间)计算原理和指标采集
  • 课时18:CLS(页面累计位移)计算原理和指标才采集
  • 课时19:TBT(首屏总阻塞时间)计算原理和指标才采集

数据分析大盘

  • 课时20:如何做数据查询和可视化
  • 课时21:搭建可视化数据大盘
  • 课时22:参数化数据查询与大盘构建

数据监控告警

  • 课时23:监控和告警的区别
  • 课时24:设置 JS 同步增长告警
  • 课时25:告警准确性问题

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com
3、划线价说明:商品展示的划横线价格为参考价,并非原价。该价格仅供您参考。

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

5.0 3条评价

^_^Bp6Dz · 2022-04-11

有讨论群吗

ji3206 · 2020-09-13

不错,直接使用阿里云的日志系统,绕过最麻烦的地方,一下子降低了难度

扫地僧 · 2021-01-01

对,其实主要是采集和数据分析,课程后面我会补充下使用elastic search + kibana 替代阿里云sls的内容,敬请关注更新

kenny · 2020-08-29

首先想评价的是思否编程的评论输入框真的特么的很智障、输入内容以后光标点一下其他地方或者是回到前面内容处、居然还会把输入框清空了?

真的,我自己做过IM也做过一些编辑器, 这样的操作我还是第一次见,牛批!

其次谈一谈课程, 其实说没感觉到是在讲课, 像分享!付费买的分享, 不会具体讲说怎么来设计监控系统架构、怎么让扩展性更好、也没有在线Code、总体感觉下来给我介绍了几个JS的API!

然后,全剧终!!

最后, 这条评论至少输入了4次, 总是被输入框把我的内容清空了!

扫地僧 · 2020-09-01

课程后面我会补充下使用elastic search + kibana 替代阿里云sls的内容,敬请关注更新