Merge pull request #2 from EzStars/refactor/performance

Refactor/performance

Author: Ni0duann

.gitignore

@@ -2,4 +2,5 @@
 **/dist/
 **/node_modules/
 **/.vitepress/cache
-**/.vitepress/dist
+**/.vitepress/dist
+**/.DS_Store

packages/monitor-sdk/src/cache.ts

@@ -0,0 +1,15 @@
+import { deepClone } from './utils';
+
+const cache = [];
+
+export function clearCache() {
+  cache.length = 0;
+}
+
+export function addCache(data) {
+  cache.push(data);
+}
+
+export function getCache() {
+  return deepClone(cache);
+}

packages/monitor-sdk/src/config.ts

@@ -0,0 +1,19 @@
+const config = {
+  url: 'http://127.0.0.1:8080/api',
+  project: 'webEyesSDK',
+  version: '0.0.1',
+  appID: '1234567890',
+  userID: '1234567890',
+  isImageUpload: false,
+  batchSize: 5,
+};
+
+export function setConfig(options) {
+  for (const key in config) {
+    if (options[key] !== undefined) {
+      config[key] = options[key];
+    }
+  }
+}
+
+export default config;

packages/monitor-sdk/src/core/monitor.ts

@@ -1,41 +1,68 @@
-//导入类型定义
-import { MonitorOptions, MonitorEvent } from './types';
-import reportData from '../report/index';
-import PerformanceMonitor from '../plugins/performance/index';
-import { dataInterface } from '../report/types';
+import performance from '../plugins/performance';
+import error from '../plugins/error';
+import { setConfig } from '../utils/config'; // Ensure setConfig is properly imported
 
-export class Monitor {
-  private options: MonitorOptions;
-  private performanceMonitor: PerformanceMonitor; // 持有性能监控实例
-  private queue: MonitorEvent[] = []; // 事件队列
-
-  constructor(options: MonitorOptions) {
-    this.options = {
-      delay: 1000,
-      ...options,
+// Initialize the global SDK object with type safety
+declare global {
+  interface Window {
+    __EzMonitorSDK__?: {
+      version: string;
+      vue?: boolean;
+      react?: boolean;
     };
-    this.performanceMonitor = new PerformanceMonitor(); // 初始化性能监控
-    this.init();
   }
+}
 
-  //初始化会发送数据到数据库
-  private init(): void {
-    console.log('初始化监听。。。');
+window.__EzMonitorSDK__ = window.__EzMonitorSDK__ || {
+  version: '0.0.1',
+};
+
+// 针对 Vue 项目的错误捕获
+export function install(Vue, options) {
+  if (window.__EzMonitorSDK__?.vue) return;
+  window.__EzMonitorSDK__!.vue = true;
+  setConfig(options); // Ensure this function is defined and imported
+  const handler = Vue.config.errorHandler;
+  Vue.config.errorHandler = function (err, vm, info) {
+    if (handler) {
+      handler(err, vm, info);
+    }
+    const reportData = {
+      type: 'error',
+      subType: 'vue',
+      info,
+      startTime: window.performance.now(),
+      pageURL: window.location.href,
+    };
+    console.log('vue error', reportData);
+  };
+}
 
-    // 延迟上报（确保性能数据已收集）
-    setTimeout(() => {
-      // 合并性能数据和其他数据（如错误）
-      const reportPayload: dataInterface = {
-        performance: this.performanceMonitor.getMetrics(),
-        event: this.queue,
-      };
+// 针对 React 项目的错误捕获
+export function errorBoundary(err, info) {
+  if (window.__EzMonitorSDK__?.react) return;
+  window.__EzMonitorSDK__!.react = true;
+  const reportData = {
+    type: 'error',
+    subType: 'react',
+    info,
+    startTime: window.performance.now(),
+    pageURL: window.location.href,
+  };
+  console.log('react error', reportData);
+}
 
-      reportData({
-        url: this.options.reportUrl,
-        data: reportPayload, // 包含性能数据+其他数据
-        delay: 0, // 立即发送（外层已有setTimeout）
-      });
-    }, this.options.delay);
-    // 其他初始化逻辑（如错误监听）
-  }
+// 初始化函数
+export function init(options) {
+  setConfig(options); // Ensure configuration is set
+  performance(); // Initialize performance monitoring
+  error(); // Initialize error monitoring
 }
+
+export default {
+  install,
+  errorBoundary,
+  init,
+  performance,
+  error,
+};

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

@@ -0,0 +1,68 @@
+export default function error() {
+  // 捕获 JS \ CSS 资源加载错误
+  window.addEventListener(
+    'error',
+    event => {
+      const target = event.target;
+      if (
+        target instanceof HTMLImageElement ||
+        target instanceof HTMLLinkElement ||
+        target instanceof HTMLScriptElement
+      ) {
+        const url =
+          target instanceof HTMLImageElement ||
+          target instanceof HTMLScriptElement
+            ? target.src
+            : target instanceof HTMLLinkElement
+              ? target.href
+              : '';
+        const reportData = {
+          type: 'error',
+          subType: 'resource',
+          url,
+          html: target.outerHTML,
+          pageUrl: window.location.href,
+          pahts: event.composedPath(), // 事件捕获路径
+        };
+        //   todo
+        console.log('resource', reportData);
+      }
+    },
+    true,
+  );
+
+  // 捕获未处理的 Promise 错误
+  window.addEventListener(
+    'unhandledrejection',
+    event => {
+      const { reason } = event;
+      const reportData = {
+        type: 'error',
+        subType: 'promise',
+        reason: reason?.stack || reason,
+        pageUrl: window.location.href,
+        startTime: performance.now(),
+      };
+      //   todo
+      console.log('promise', reportData);
+    },
+    true,
+  );
+
+  // 捕获未处理的 JS 错误
+  window.onerror = function (message, source, lineno, colno, error) {
+    const reportData = {
+      type: 'error',
+      subType: 'js',
+      message,
+      source,
+      lineno,
+      colno,
+      error: error?.stack,
+      pageUrl: window.location.href,
+      startTime: performance.now(),
+    };
+    //   todo
+    console.log('js', reportData);
+  };
+}

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

@@ -1,3 +1,13 @@
-import { PerformanceMonitor } from './utils/performance';
+import fetch from './utils/fetch';
+import { observerEntries } from './utils/observerEntries';
+import observerFCP from './utils/observerFcp';
+import observerLCP from './utils/observerLcp';
+import observerLoad from './utils/observerLoad';
 
-export default PerformanceMonitor;
+export default function performanceUtil() {
+  fetch();
+  observerEntries();
+  observerFCP();
+  observerLCP();
+  observerLoad();
+}

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

@@ -0,0 +1,48 @@
+const originalFetch = window.fetch;
+
+function owerwriteFetch() {
+  window.fetch = function newFetch(url, config) {
+    const startTime = performance.now();
+    const reportData = {
+      type: 'performance',
+      subType: 'fetch',
+      url,
+      startTime: startTime,
+      endTime: 0,
+      duration: 0,
+      method: config?.method || 'GET',
+      status: 0,
+      success: false,
+    };
+    return originalFetch(url, config)
+      .then(response => {
+        const endTime = performance.now();
+        const duration = endTime - startTime;
+        reportData.endTime = endTime;
+        reportData.duration = duration;
+        reportData.status = response.status;
+        reportData.success = response.ok;
+        console.log('fetch', reportData);
+        // 这里可以添加上报逻辑
+        return response;
+      })
+      .catch(error => {
+        const endTime = performance.now();
+        const duration = endTime - startTime;
+        reportData.endTime = endTime;
+        reportData.duration = duration;
+        reportData.status = error.status || 0;
+        reportData.success = false;
+        console.log('fetch error', reportData);
+        // 这里可以添加上报逻辑
+        return Promise.reject(error);
+      });
+  };
+}
+export default function fetch() {
+  if (window.fetch) {
+    owerwriteFetch();
+  } else {
+    console.warn('fetch is not supported in this browser');
+  }
+}