前端性能监控与错误收集工程化：阿里云日志服务实践 _前端性能

前言
干净没有任何红色报错的控制台，就一定没有错误吗？
实际上却存在问题：
是一个 video 出错了，我没有使用 video 呀？
右键查一下源代码，原来确实有 video 不为人知的渲染了，但没有设定资源：
这就是前端监控工程化的好处！
日志上报
我们采用的日志上报来做收集，开通日志服务后参照官方教程：
日志服务：快速入门
在日志服务系统下方点击新建一个：
建立一个存储数据。
数据接入 > 开启，用来接收上报的日志：
之后我们就可以进行 post 或者 get 方式上报日志了，上报后即可在刚刚建立的内查看到数据。
上报方式：Get / Post 方法
监控布局
下一步到了最关键的监控上报方法布局了，本次我们采用 18 个性能指标 + 3 种错误收集作为整体格局。
错误收集性能监控 Base
上次页面卸载耗时
连接时间
重定向耗时
请求耗时
获取首字节时间 ( TTFB )
响应读取时间
Dom 解析时间
脚本执行时间
Dom 渲染耗时
首次可交互时间
页面完整加载时间
白屏时间

文章插图
FMP ( FirstPaint ) : 首次有意义的绘制
LCP ( LargePaint ) : 最大内容渲染
FP ( First Paint ) : 首次绘制时间
FCP ( FirstPaint ) : 首次内容绘制时间
FID ( First Input Delay ) : 首次交互延迟
资源加载时间 (/ Css / Img ) 数据来源效果
上报：
控制台：
筛选看一下白屏时间：
对于有大量花哨资源的博客站点来说，没有强缓存 1.5s，有缓存 0.8s 已经很满足了。
总结
监控上报工程化代码：fz6m / web--
【前端性能监控与错误收集工程化：阿里云日志服务实践】性能监控 + 错误收集格局瞬间就高了（笑