前端监控相关内容（常见埋点，监控流程...）

一、为什么要做前端监控

1. 更快发现问题和解决问题

• 页面加载慢
• 页面白屏
• 操作卡顿或无响应
• 请求响应慢，一直在请求
• 请求频繁报错
• 排版样式错乱

二、前端监控目标（关注点）

1. 提升稳定性，更快的发现异常、定位异常、解决异常

• JS错误：js执行错误或者promise异常
• 接口异常：ajax或者fetch请求接口异常
• 资源异常：script、link等资源加载异常
• 白屏：页面空白
• 用户自定义异常
  …

2. 提升用户体验，建立性能规范，长期关注优化

加载时间：各个阶段的加载时间

• TTFB（time to first byte)(首字母加载时间)：是指浏览器发起第一个请求到数钢返回第一个字节所消耗的时间，这个时间包含了网络请求时间、后端处理时间
• FP(First Paint)(首次绘制)：首次绘制包括了任何用户自定的背景绘制，它是将第一个像素点绘制到屏幕的时刻
• FCP(First Content Paint)(首次内容绘制):首次内容绘制是浏览器将第一个DOM渲染到屏南的时间,可以是任何文本、图像、SVG等的时间
• FMP(First Meaninghul paint)(首次有瓢义绘制):首次有意义绘制是页面可用性的量度标准
• FID(First linput Delay)(首次输入延迟)：用户首次和页面交互到页面响应交互的时间
• 卡顿：超过50ms的长任务

3. 业务

• PV：page view即页面浏览量或者点击量
• UV: 指访问某个站点的不同IP地址和人数
• 页面的停留时间：用户在每一个页面的停留时间

三、前端监控涉及的流程

对于前端来说目前最关注的是前两点，对于数据存储、传输等可以借助阿里云。

常见的埋点方案

1. 代码埋点

• 代码埋点，就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件.会选择在用户点击时.插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给服务器端
• 优点是可以在任意时刻，精确的发送或保存所需要的数据信息。
• 缺点是工作量较大

2. 可视化埋点

• 通过可视化交互的手段，代替代码埋点
• 将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码
• 可视化埋点其实是用系统来代替手工插入埋点代码

3.无痕埋点

• 前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来
• 通过定期上传记录文件.配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析
• 无痕埋点的优点是采集全量数据.不会出现漏埋和误埋等现象
• 缺点是给数据传输和服务器增加压力，也无法灵活定制数据结构

数据采集

• PV监控:页面切换后新的url、页面切换原因（初始化加载，spa路由切换…）
• JS错误︰错误对应类型、描述、行列号、堆栈，错误发生前的用户交互、错误的上下文等等
• 性能监控:首屏加载各阶段耗时、各性能指标、SPA切换耗时、longtask等等
• 请求监控:请求的路径、状态码、请求头和响应头、请求各阶段耗时等等
• 白屏监控:白屏发生的页面、关联的异常、相关的上下文等等
• 静态资源监控&&用户行为监控&&自定义监控…

后续会继续添加如何优化相关内容~…