性能监控

指标体系设计

• 性能：Web vitalsWeb Vitals  |  Articles  |  web.dev
  • CLS (Cumlative Layout Shift)：累积布局偏移，衡量页面布局的稳定性
  • LCP (Largest Contentful Paint)：最大内容绘制时间，衡量页面的主要加载速度
  • TTFB (Time to First Bite)：首字节时间，衡量服务器的响应速度
  • INP (Interaction to Next Paint)：交互到下一次绘制的时间，衡量页面响应交互的速度。
  • FP (First Paint)：首次向屏幕绘制内容的时间
  • FCP (First Contentful Paint)：浏览器首次绘制出内容元素的时间
  • FMP (First Meaningful Paint)：首次绘制用户关注内容的时间
• 异常：
  • Js 代码异常

  window.onerror = (message, source /* , lineno, colno, error */) => {
      this.transport.send({
          type: message,
          message: source,
          path: window.location.pathname,
      })
  }

  • 异步处理异常

  window.onunhandledrejection = event => {
      this.transport.send({
          type: 'unhandledrejection',
          message: event.reason,
          path: window.location.pathname,
      })
  }

  • 资源加载异常
• 用户行为
  • 也称之为用户行为（事件 click、mousedown）埋点，sdk （手工埋点、无痕埋点、可视化埋点）
• 事件采集
  • DOM 事件：例如点击、键盘输入等用户操作
  • XHR 和 Fetch 请求：通过代理原生 XMLHttpRequest 和 fetch、捕获每个网络请求的详情、包括 URL、响应时间、状态码等。

export function instrumentXHR() {
    const originalXhrSend = XMLHttpRequest.prototype.send
    XMLHttpRequest.prototype.send = function (...args) {
        console.log('Captured XHR request', this)
        this.addEventListener('load', function () {
            console.log('XHR response received', this)
        })
        return originalXhrSend.apply(this, args)
    }
}
 
export function instrumentFetch() {
    const originalFetch = window.fetch
    window.fetch = function (...args) {
        console.log('Captured Fetch request: ', args)
        return originalFetch.apply(this, args).then(response => {
            console.log('Fetch response received:', response)
            return response
        })
    }
}

- **History 和 Navigation Api 事件**：捕获页面导航行为、如前进、后退等操作等。

• 数据请求
  • Fetch、xhr 原型重写

SDK 采集设计

• 核心模块
  1. 网页性能采集指标：通过 web-vitals 采集这些指标
  2. 异常采集：监控 js 错误，资源加载错误和未捕获的错误
  3. 点击事件采集：捕获用户点击行为、记录交互数据。
  4. 基础信息采集：采集 IP、机型、系统、浏览器等设备及环境信息
  5. 数据传输协议：统一封装不同类别的数据，发送给后端
• 核心目标
  1. 插件化设计：支持性能、异常、点击事件等不同采集事件。
  2. 跨环境兼容：支持浏览器和 Node 服务端的数据上报。
  3. 代码接耦：数据传输管理和采集逻辑分离，方便维护与拓展
  4. Monorepo：多包管理模式，提升代码复用和管理效率
• 核心架构
  1. sdk-core
     • 定义核心逻辑和 Transport 抽象接口
     • 负责插件初始化与注册
  2. sdk-brower
     • 浏览器相关插件：性能、异常、点击事件采集
     • 适配浏览器 Transport 上报实现
  3. sdk-brower-utils
     • 提供浏览器环境下的工具方法
  4. sdk-node
     • 适配 Node 环境下 Transport 上报实现
  5. sdk-vue/react/angular/solid 每个字包都可以单独打包

Monitoring init 插件化：外部传入插件数组列表，循环插件数组进行 init