埋点监控指标及收集方式

[funnycoderstar]

指标收集

异常

• JS 语法错误、代码运行异常 ✅
• 静态资源加载异常 ✅
• promise 异常 ✅
• Http 请求异常 ✅
  • ajax ✅
  • fetch ✅
• Iframe 异常
• 跨域 Script error ✅
• 崩溃和卡顿

性能

• 白屏时间 ✅
• 首屏时间 ✅
• TTFB(Time to First Byte) ✅
• FP(First Paint) ✅
• FCP(First Contentful Paint) ✅
• FMP ✅
• LCP(Largest Contentful Paint) ✅
• FID(First Input Delay) ✅
• CLS(Cumulative Layout Shift)
• 卡顿
• TBT(Total Blocking Time)

业务

• PV
• UV

性能

核心指标

https://web.dev/learn-core-web-vitals/

• LCP: https://web.dev/lcp/， 加载速度

• FID: https://web.dev/fid/， 响应速度

• CLS：https://web.dev/cls/， 视觉稳定性，比如点击了一个按钮，突然按钮跑下面去了。

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

重要指标

https://web.dev/metrics/

长任务(longtask)

https://web.dev/custom-metrics/#long-tasks-api

// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });
  // Start listening for `longtask` entries to be dispatched.
  po.observe({type: 'longtask', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

TTI

可以使用 tti-polyfill

TBT

SI

使用 speedline