前端监控什么数据？

新增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：告警准确性问题