前端监控SDK开发|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第十二天

课堂重点知识

1. 前端监控简介
2. 前端监控之常用指标
3. 前端监控实战

知识总结及实例

前端监控

• 引言

• why 面临的问题 前端监控系统应运而生
• what

前端监控之常用指标

性能标准

• 以用户为中心的性指标

概述

具体指标

实例

LCP 优点及比较

异常事件

• 静态资源错误

• 请求异常

状态码为0是什么

请求成功率=请求成功数/（请求成功数+请求失败数）

• JS错误

• 白屏异常

对白屏异常进行归因

前端性能实战

• 性能监控

/**
 * 列举出性能指标对应的 entry type
 * fp,fcp --> paint
 * lcp --> largest-contentful-paint
 * fip --> first-input
 */
const entryTypes = ['paint', 'largest-contentful-paint', 'first-input']

// 1. 通过 PerformanceObserver 监听
const p = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(entry);
  }
})
p.observe({ entryTypes });
// 2. 也可以通过 window.performance 对象拿到 fp fcp 和 fip。
// 注意如果同步打印他们是取不到值的，想想为什么？
window.performance.getEntriesByType('paint');
window.performance.getEntriesByType('first-input');


// 3. 封装成一个 monitor
function createPerfMonitor(report: ({ name: string, data: any }) => void) {
  const name = 'performance';
  const entryTypes = ['paint', 'largest-contentful-paint', 'first-input']
  function start() {
    const p = new PerformanceObserver(list => {
      for (const entry of list.getEntries()) {
        report({ name, data: entry });
      }
    })
    p.observe({ entryTypes });
  }
  return { name, start }
}

• js 错误监听

/ 1. 监听 js 执行报错
window.addEventListener("error", (e) => {
  // 只有 error 属性不为空的 ErrorEvent 才是一个合法的 js 错误
  if (e.error) {
    console.log('caputure an error', e.error);
  }
});
// throw(new Error('test'));
// 2. 监听 promise rejection
window.addEventListener("unhandledrejection", (e) => {
  console.log('capture a unrejection', e);
});
Promise.reject('test');

// 3. 封装成一个 monitor
function createJsErrorMonitor(report: ({ name: string, data: any }) => void) {
  const name = "js-error";
  function start() {
    window.addEventListener("error", (e) => {
      // 只有 error 属性不为空的 ErrorEvent 才是一个合法的 js 错误
      if (e.error) {
        report({ name, data: { type: e.type, message: e.message } });
      }
    });
    window.addEventListener("unhandledrejection", (e) => {
      report({ name, data: { type: e.type, reason: e.reason } });
    });
  }
  return { name, start }
}

• 静态资源错误监听

前端监控过程

个人总结

• 明确前端监控的重要意义，并学会应用于实际中，对前端性能做出相关提高

• 实战中监听的性能指标，并尝试实现其他性能指标的监听，如 FMP、CLS、TTI 等。

• 如何借助 hook 函数实现请求错误监听，并尝试封装一个更可靠的 hook 函数以及关注慢请求指标。

• 用户行为监控。