跳到主要内容

概览

备注

文章持续完善中～

概览​

一个完整的监控大致包含四部分。

1.数据采集

2.组装上报

3.清洗存储

4.数据消费

Performance Timing​

常用性能标准​

前端监控分类​

大致分为三类。性能监控、异常监控和业务相关的的数据监控。性能监控是对应用的性能相关数据进行检测分析，异常监控则是对应用运行时出现的错误进行及时的相关错误数据收集。业务相关的数据监控则为了更好的反应应用的使用情况，通过相关数据判断用户的偏好等行为以更好的改进应用。

  • 性能监控
    • 页面、资源加载时间
    • 白屏时间
  • 异常监控
    • javascript 错误监控（可利用 sentry 等工具）
  • 数据监控
    • 页面访问量
    • 页面停留时长

常见的埋点方式​

  • 手动代码埋点

    手动将需要收集数据的地方添加相关代码，工作量较大。

  • 可视化埋点

    利用可视化平台定制添加页面需要埋点的代码。无需开发人员手动添加代码，可视化平台导出具有埋点的业务代码。

  • 无埋点

    对某些全局的事件进行捕获

明确要监控的数据​

备注

某些数据考虑 p50 p95

业务数据：​

  • UV (Unique Visitor)

    • 网站一天有多少的可唯一表示的用户访问。一个账户一天多次访问只算一个 UV

  • VV (Visit View)

    • 用于统计所有用户访问网站的次数，用户关闭网站后算一次访问，再次打开网站 VV 加一
s

UV 与 VV 的区别是： UV 表示一天内网站有多少个用户访问了网站。VV 表示一天所有用户访问网站的次数。

  • PV (Page View)

    • 页面被打开次数，每打开一个页面 PV 加一，可重复累计

  • Member 成员页面数据

    • 成员卡片点击量
      • 点击一次对应的成员资料卡片则记录一次

JS 异常​

  • JS 异常总数 (以时间（天）为单位统计异常数)
  • JS Error
  • Promise Error
  • Resource Error

请求监控​

  • 请求总数
  • 请求失败数
  • 请求失败占比
  • 平均请求耗时

用户感知​

  • FP (First Paint) 从打开页面到首个像素渲染的时间
  • FCP (First Content Paint) 首次绘制完成 DOM 的时长
  • FMP (First Meaningful Paint) 首次绘制有意义的时间点
    • FMP 的时间点为 「DOM 结构变化最剧烈的点」。 「DOM 结构变化的时间点」可以利用 MutationObserver API 来监听 DOM 的变化，判断响应的 DOM 是否已经加载来断定该时间点是否为 FMP。该值一般由 LCP (largest Contentful Paint) 最大的在可视区域内变得可见的时间点
  • TTI (Time To Interactive) 页面可交互时间 也页面开始加载到页面完全可交互状态的时长
  • 1 秒快开比 首屏完全加载时长 <=1s 的 PV 占比
  • 2 秒快开比 首屏完全加载时长 <=2s 的 PV 占比
  • 5 秒快开比 首屏完全加载时长 <=5s 的 PV 占比

加载性能​

  • 检查缓存
  • DNS 查询
  • TCP 连接
  • SSL 建立首字节响应时间
  • 内容传输
  • DOM 解析资源加载
  • load 事件页面完全加载

慢加载以及白屏监控​

图

参考： https://web.dev/metrics/

如何测量相关数据​

const {
  navigationStart,
  redirectEnd,
  redirectStart,
  domainLookupStart,
  domainLookupEnd,
  fetchStart,
  connectEnd,
  connectStart,
  secureConnectionStart,
  responseStart,
  requestStart,
  responseEnd,
  domComplete,
  domLoading,
  loadEventEnd,
  loadEventStart,
} = window.performance.timing;

const redirect = redirectEnd - redirectStart;

// 检查缓存
const appCache = domainLookupStart - fetchStart;

// DNS 查询
const DNS = domainLookupEnd - domainLookupStart;

// TCP 连接
const TCP = connectEnd - connectStart;

// SSL建连
const SSL = connectEnd - secureConnectionStart;

// 内容传输
const request = responseStart - requestStart;
const response = responseEnd - responseStart;

// DOM 解析
const Processing = domComplete - domLoading;

// load 事件时间
const onLoad = loadEventEnd - loadEventStart;

// 页面完全加载
const pageLoad = loadEventEnd - navigationStart;

/**
 * window.performance.getEntriesByType('resource')   监测静态资源加载时间
 * 可以得到资源文件加载时间
 *
 * window.performance.getEntriesByType('paint')   可以得到 FP 和 FCP ？！
 */

// 需要复杂计算后才能得到的值

/**
 * FMP
 * 页面在加载和渲染过程中最大布局变动之后的时间
 * DOM 结构变化最剧烈的时间点 可以使用 Mutation Observer API 来获得
 */

/**
 * LCP Largest Contentful Paint 最大的内容在可视区域内变得可见的时间点
 * 可用于代替 FMP  且更好计算
 */

监控数据结构设计​

参考： https://apm.umeng.com/web/6281d84e6f2c485017821ea8/analysis/loading_performance

JavaScript 错误监控​

主要监控的错误类型​

  • JS Error
  • Promise Error
  • Resource Error
  • 接口请求错误

实现监控​

主要通过的 window 的 onerror 事件和 unhandlerejection 事件收集错误，然后将相关信息整理发送至服务器。

重写 xhr 的 open、send 方法来监控接口请求错误？

网站备案:蜀ICP备2023001425号👏 Powered By Docusaurus, Semi Design