fix: 🐛 增强性能监控功能，添加xhr和observerFp

Author: dengxiongfeng

packages/monitor-sdk/src/plugins/performance/index.ts

@@ -1,14 +1,18 @@
 import fetch from './utils/fetch';
+import xhr from './utils/xhr';
 import observerEntries from './utils/observerEntries';
 import observerFCP from './utils/observerFcp';
 import observerLCP from './utils/observerLcp';
 import observerLoad from './utils/observerLoad';
+import observerFp from './utils/observerFp';
 /**
  * 性能监控
  */
 export default function performanceUtil() {
   fetch();
+  xhr();
   observerEntries();
+  observerFp();
   observerFCP();
   observerLCP();
   observerLoad();

packages/monitor-sdk/src/plugins/performance/utils/observerFcp.ts

@@ -7,25 +7,39 @@ import { PaintType } from '../../../types';
  *
  */
 export default function observerFCP() {
+  // 定义回调函数，当性能观察器触发时执行
   const entryHandler = (list: PerformanceObserverEntryList) => {
+    // 遍历性能观察器条目列表
     for (const entry of list.getEntries()) {
+      // 如果条目名称为 'first-contentful-paint'
       if (entry.name === 'first-contentful-paint') {
+        // 断开观察器
         observer.disconnect();
+        // 将条目转换为JSON对象
         const json = entry.toJSON();
+        // 定义报告数据对象
         const reportData: PaintType = {
           ...json,
+          // 数据类型
           type: TraceTypeEnum.performance,
+          // 一级类型
           subType: TraceSubTypeEnum.fcp,
+          // 页面URL
           pageUrl: window.location.href,
+          // 时间戳
           timestamp: new Date().getTime(),
         };
         // 发送数据 todo;
+        // 延迟批量报告数据
         lazyReportBatch(reportData);
       }
     }
   };
+
   // 统计和计算fcp的时间
+  // 创建性能观察器，并传入回调函数
   const observer = new PerformanceObserver(entryHandler);
   // buffered: true 确保观察到所有paint事件
+  // 开始观察性能条目，类型为 'paint'，并启用缓冲
   observer.observe({ type: 'paint', buffered: true });
 }

packages/monitor-sdk/src/plugins/performance/utils/observerLcp.ts

@@ -20,7 +20,7 @@ export default function observerLCP() {
         pageUrl: window.location.href,
         timestamp: new Date().getTime(),
       };
-      // 发送数据 todo;
+      // 发送数据 ;
       lazyReportBatch(reportData);
     }
   };

packages/monitor-sdk/src/plugins/performance/utils/xhr.ts

@@ -18,6 +18,9 @@ declare global {
   }
 }
 
+/**
+ * 重写 XMLHttpRequest 的 open 和 send 方法，以便在发送请求时记录相关性能数据。
+ */
 function overwriteOpenAndSend() {
   originalProto.open = function newOpen(
     method: string,
@@ -39,6 +42,9 @@ function overwriteOpenAndSend() {
       this.startTime = Date.now();
     });
 
+    /**
+     * 页面加载完成后触发的回调函数
+     */
     const onLoaded = () => {
       this.endTime = Date.now();
       this.duration = (this.endTime ?? 0) - (this.startTime ?? 0);