如何设计一个前端监控上报工具

    window.addEventListener('error', (event) => {  
        // 错误处理上报逻辑
        // event.message 是错误信息
        // event.filename 是发生错误的文件
        // event.lineno 是错误发生的行号
        // event.colno 是错误发生的列号
        // event.error 是一个 Error 对象（如果可用）

        // 监听error事件当资源加载异常的时候，也会走到这个回调处理函数中 这里需要将资源加载相关信息隔离
        // 有event.message或者event.lineno可以当js异常处理
        
   }, true)
   window.addEventListener('unhandledrejection', (event) => {
      // 错误处理上报逻辑
      // event.promise 是被拒绝的 Promise
      // event.reason 是被拒绝的原因（通常是一个 Error 对象）
   })

   const errorQueue = []
      // 清除历史上报消息的时间
   const clearInterval = 2000;

   function errorHandler(event) {
      // 监测当前event是否存在errorQueue里面 如果存在 不进行后续操作

      // 可以结合event.filename/event.lineno/event.colno/event.message/event.error.stack来判断是否是同一错误

      // 不在errorQueue里面
      errorQueue.push(event)
      setTimeout(() => {
         // 在errorQueue中找到对应event进行剔除
      }, clearInterval)
      
      // 上报逻辑
   }

   function processResourcePerformance(perf) {
        perf.getEntriesByType('resource').forEach(entry => {
            // 这里可以做过滤逻辑 过滤第三方资源控制上报

            // 判断是资源加载 用于统计资源加载情况  进行上报
            // entry上有initiatorType属性,可以区分不同资源
        });
   }
   window.addEventListener('error', (event) => {
      // 判断是资源加载异常 比如event上存在tagName
      // 进行上报
   }, true)
   // 创建一个PerformanceObserver并指定处理函数processResourcePerformance
   const observer = new PerformanceObserver(r => processResourcePerformance(r));
   // PerformanceObserver指定监听resource 资源
   observer.observe({ entryTypes: ['resource'] });

    // 这里使用的是axios
   import axios from 'axios';

   // 创建 Axios 实例
   const axiosInstance = axios.create({
      baseURL: 'https://api.example.com', // 替换为你的 API 基础 URL
      timeout: 10000, // 设置请求超时时间
      headers: { 'Content-Type': 'application/json' } // 设置默认请求头
   });
   // 响应拦截器
   axiosInstance.interceptors.response.use(
      response => {
         return response;
      },
      error => {
         // 统一上报逻辑
         // 
         return Promise.reject(error);
      }
   );

   const observer = new PerformanceObserver(r => () => {  
      // 上报api请求数据
    });
   observer.observe({ entryTypes: ['resource'] });

   let lastFrameTime = performance.now();
   let frameCount = 0;
   let fps = 0;
   function calculateFPS(currentTime) {
      frameCount++;
      const deltaTime = currentTime - lastFrameTime;

      if (deltaTime >= 1000) {
         fps = frameCount;
         frameCount = 0;
         lastFrameTime = currentTime;
         // 如果fps帧率过高 进行上报
      }
      requestAnimationFrame(calculateFPS);
   }

   requestAnimationFrame(calculateFPS);