menu 洛璃 关于 留言板 左邻右舍
前端性能监控与错误收集工程化
作者 | 浏览量 80 |
请注意,本文编写于 299 天前,最后修改于 270 天前,其中某些信息可能已经过时。

本文由桃饱の店授权发布

前言

干净没有任何红色报错的控制台,就一定没有错误吗?



实际上却存在问题:

是一个 video 出错了,我没有使用 video 呀?

右键查一下源代码,原来确实有 video 不为人知的渲染了,但没有设定资源:



这就是前端监控工程化的好处!

Aliyun 日志上报

我们本次采用 Aliyun 的日志上报来做收集,开通日志服务后参照官方教程:

日志服务:快速入门

  1. 在日志服务系统下方点击新建一个 Project :

  2. 建立一个 Logstore 存储数据。
  3. 数据接入 > 开启 Webtracking ,用来接收上报的日志:

之后我们就可以进行 post 或者 get 方式上报日志了,上报后即可在刚刚建立的 Logstore 内查看到数据。

上报方式:Get / Post 方法

监控布局

下一步到了最关键的监控上报方法布局了,本次我们采用 18 个性能指标 + 3 种错误收集作为整体格局。

错误收集

  • JavaScript 语法错误
  • 资源加载错误
  • Promise 错误

性能监控

Base

  1. 上次页面卸载耗时
  2. 连接时间
  3. 重定向耗时
  4. 请求耗时
  5. 获取首字节时间 ( TTFB )
  6. 响应读取时间
  7. Dom 解析时间
  8. 脚本执行时间
  9. Dom 渲染耗时
  10. 首次可交互时间
  11. 页面完整加载时间
  12. 白屏时间

Render

  1. FMP ( First Meaningful Paint ) : 首次有意义的绘制
  2. LCP ( Large Contentful Paint ) : 最大内容渲染
  3. FP ( First Paint ) : 首次绘制时间
  4. FCP ( First Content Paint ) : 首次内容绘制时间
  5. FID ( First Input Delay ) : 首次交互延迟

Resource

  1. 资源加载时间 ( JavaScript / Css / Img )

数据来源

  • window.performance 获取性能相关数据
  • window.addEventListener('error', (e) => {}) 获取 JavaScript 报错信息
  • window.addEventListener('unhandledrejection', (e) => {}) 获取 Promise 报错信息
  • new PerformanceObserver() 获取页面渲染、加载资源相关信息
  • ua-parser-js 解析 user-agent 获取用户和浏览器相关信息

效果

上报:



控制台:



筛选看一下白屏时间:



对于有大量花哨资源的博客站点来说,没有强缓存 1.6s ,有缓存 0.8s 已经很满足了。

总结

监控上报工程化代码:fz6m / web-performance-monitor

性能监控 + 错误收集格局瞬间就高了(笑

版权所属洛璃
本文作者
本文链接https://www.ilolita.cn/3108.html
版权声明知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
添加新评论
您尚未输入昵称,昵称不能是空哦~
您输入的不是一个合法邮箱地址哦~
您尚未输入网址,网址不能是空哦~
您尚未输入评论,评论不能是空哦~