前端监控SDK | 字节青训营

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

监控

前端监控就是尽可能的采集浏览器中从输入URL到页面展示过程中，以及后续用户交互中产生的性能指标和发生的异常事件并上报到平台。

以用户为中心的性能指标

人眼的反应时间50ms之后的都视为阻塞blocking

异常

1. 静态资源错误：拉取和加载html\css\js等文件过程中发烧预期之外的错误，导致静态资源无法正常渲染到页面
2. 请求错误：请求响应状态码>=400
3. js错误
4. 白屏异常：前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。通常我们可以通过判断 DOM 树的结构来粗略判断白屏是否发生，通常导致白屏发生的原因可能有如下几点：
   1. 发生 Js 错误导致关键资源渲染失败
   2. 请求异常或静态资源加载失败
   3. 长时间的 Js 线程繁忙阻塞渲染任务

实战

// 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监听器，通过report函数上传
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 }
}

developer.mozilla.org/zh-CN/docs/…

• js 错误：利用 window.addEventListener 的error和 unhandledrejection 可以监控到全局的js 错误。
• 静态资源错误：同样是error事件可以监听静态资源错误，可以通过筛选link标签来和js错误做区分
• 请求异常：通过 hook(钩子函数)+xhr(重写xhr请求的open(拿到请求地址和方法)和send(监听错误请求)再调用来实现) 或 fetch 对象来监听请求时发生的错误

SDK

sdk主要完成数据采集和组装上报(report函数)，使用专为前端监控打造的请求函数 Navigator.sendBeacon()，数据发送前要先序列化为字符串