前端错误监控

为什么要做前端监控

• 更快发现问题和解决问题
• 做产品的决策依据
• 为业务扩展提供了更多可能性

前端监控目标

稳定性

• js错误：js执行错误或者promise异常

// 监听promise 错误
  window.addEventListener("unhandledrejection", (event) => {
      const reason = event.reason;
    })

• 资源异常：script、link等资源加载异常
• 接口错误： ajax或fetch 请求接口异常
  1. 通过重写XHR对象open 和send 方法进行拦截
  2. xhr.onload;xhr.onerror;xhr.abort;事件去计算接口请求数据
• 白屏：页面空白

   function blankScreen() {
      for (let i = 1; i <= 9; i++) {
        let xElements = document.elementFromPoint(
          window.innerWidth * i / 10, window.innerHeight / 2
        );
        let yElements = document.elementFromPoint(
          window.innerWidth / 2, window.innerHeight * i / 10
        )
        isWrapper(xElements[0])
        isWrapper(yElements[0])
      }
    }

用户体验

• 加载时间：各阶段加载时间
• TTFB(time to first Byte)首字节时间：是指浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络请求时间、后端处理时间
• FP(first Paint)首次绘制：将第一个像素点绘制到屏幕的时刻

performance.getEntriesByName('first-paint')[0]

• FCP
• FMP(First Meaningful paint)首次有意义绘制
• FID

  // Dom 解析时间
    const parseDomTime = performance.timing.loadEventStart - performance.timing.domLoading
    // 从请求到第一个字节返回的诗句
    const ttfb = performance.timing.responseStart - performance.timing.requestStart
    // 响应读取时间
    const responseTiming = performance.timing.responseEnd - performance.timing.responseStart;
    // 连接时间
    const connectTiming = performance.timing.connectEnd - performance.timing.connectStart
    // Dom 内容完成时间
    const domContentLoadedTime = performance.timing.domContentLoadedEventEnd - performance.timing.domContentLoadedEventStart
    // Dom可交互时间
    const timeToInteractive = performance.timing.domInteractive - performance.timing.fetchStart;

业务

• PV:page view即页面浏览量或点击量
• UV: 指访问某个站点的不同ip地址的人数。
• 页面停留的时间

前端监控流程

• 前端埋点
• 数据上报(上报到阿里云sls)
• 分析和计算 将采集的数据进行加工汇总
• 可视化展示
• 监控报警

常见的埋点方案

• 代码埋点：以嵌入代码的形式进行埋点。 优点：可以在任意时刻，精确的发送保存说需要的数据 缺点：工作量较大
• 可视化埋点
• 无痕埋点： 任意一个事件都会被绑定一个标识，将所有事件都记录下来 优点：采集全量数据，不会出现漏埋或误埋现象 缺点：数据传输和服务器增加压力，也无法灵活定制数据结构。

即时运行错误的捕获方式

1. trycatch
2. window.onerror(捕捉同域错误)：跨域错误一般返回script ERROR

资源加载错误

1. object.onerror
2. performance.getEntries()
3. Error 事件捕获

跨域js运行错误可以捕获吗？错误提升，应该怎么处理？

利用crossorigin属性：HTML5元素中提供了对CORS的支持，如:audio,link,script,video,img

<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>

上报错误的基本原理

1. 利用ajax通信的方式上报
2. 利用Image对象上报