优化错误sdk

admin/src/views/error/test.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { onUnmounted } from 'vue'
-import XLog from '../../../../x_error_sdk/x-log'
-import x_log_browser from '../../../../x_error_sdk/x-log-browser'
-const xLog = new XLog(
+import { XErr, XErrWeb } from '../../../../x_err_sdk/web/index'
+// { XErr, XErrWeb }
+const xErr = new XErr(
     {
         Dns: 'http://localhost:5174/api',
         Pid: 'e19e3be20de94f49b68fafb4c30668bc',
         Uid: '10'
     },
-    new x_log_browser()
+    new XErrWeb()
 )
 onUnmounted(() => {
-    xLog.unListen()
+    xErr.unListen()
 })
 defineProps<{ msg: string }>()
 function error() {

docs/admin/nginx配置.md

@@ -4,8 +4,13 @@
 
 ## 前端页面使用history模式需要重定向
 ```nginx
+
 location / {
     index /index.html;
     try_files $uri $uri/ /index.html;
 }
+# 找不到静态文件返回404
+location ~* \.(?:html|css|js|png|jpg|jpeg|gif|webp|pdf|mp4|mp3|aac|ico|svg|woff|woff2|ttf|eot)$ {
+    try_files $uri =404;
+}
 ```

server.code-workspace

@@ -19,7 +19,7 @@
 			"path": ".workflow"
 		},
 		{
-			"path": "x_error_sdk"
+			"path": "x_err_sdk"
 		}
 	],
 	"settings": {

x_err_sdk/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@adtkcn/x_err",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "build": "npm run build:web&&npm run build:ts",
+    "build:web": "esbuild web/index.ts --bundle --sourcemap --minify --outfile=dist/web/index.js --format=esm --target=es2015",
+    "build:ts": "tsc --emitDeclarationOnly",
+    "outdated": "pnpm outdated"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "typescript": "^5.6.3",
+    "uuid": "^11.0.2"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  }
+}

x_err_sdk/tsconfig.json

@@ -7,12 +7,9 @@
             "dom"
         ], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array"
         "strict": true, // 开启所有严格的类型检查
-        "noImplicitAny": false, // 不允许隐式的any类型
+        "noImplicitAny": true, // 不允许隐式的any类型
         "esModuleInterop": true, // 允许export=导出，由import from 导入
         "moduleResolution": "node", // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
-        "outDir": "dist", // 指定输出目录
-        "types": [
-            "@dcloudio/types"
-        ]
+        "outDir": "dist" // 指定输出目录
     }
 }

x_err_sdk/web/err-entry.ts

@@ -0,0 +1,151 @@
+import { v1 as uuid_v1 } from "uuid";
+import type { LogWithError, IErrorEvent, LogWithEnv } from "../types";
+ 
+type Uid = string | number;
+
+type Props = {
+  Dns: string; // 域名
+  Pid: string; // 项目标识
+  Uid?: Uid; //用户标识
+};
+
+class XLog {
+  private Dns: string = "";
+  private client_id: string = "";
+  private Pid: string = "";
+  private Uid: Uid = "";
+
+  private platform: IErrorEvent | null = null;
+
+  private MessageList: any[] = [];
+  private timer: number = 0;
+
+  constructor(props: Props, platform: IErrorEvent) {
+    if (!props) {
+      console.error("props is null");
+      return;
+    }
+    if (!platform) {
+      console.error("platform is null");
+      return;
+    }
+    this.platform = platform;
+    if (props.Dns && props.Pid) {
+      this.Dns = props.Dns;
+      this.Pid = props.Pid;
+    } else {
+      console.error("props.Dns and props.Pid cannot be null");
+      return;
+    }
+    if (props.Uid) {
+      this.Uid = props.Uid;
+    }
+    this.setClientID();
+    this.SetUid();
+    this.getLocalMessage();
+
+    // 监听错误
+    platform.listen((params: LogWithError) => {
+      console.log("listenCallback", params);
+
+      this.Push(params);
+    });
+
+    this.timer = setInterval(() => {
+      this.upload();
+    }, 1000 * 10);
+  }
+
+  // 设置用户id
+  public SetUid(uid?: Uid) {
+    if (uid) {
+      this.platform?.setCache("x_err_uid", uid);
+      this.Uid = uid;
+    } else {
+      const u_id = this.platform?.getCache("x_err_uid");
+      if (u_id) {
+        this.Uid = u_id;
+      }
+    }
+    this.initEnv();
+  }
+  // 初始化环境信息并上传
+  private initEnv() {
+    let envInfo = this.platform?.getEnvInfo();
+    if (envInfo) {
+      this.uploadInfo(envInfo);
+    }
+  }
+  // 设置错误ID
+  private setClientID() {
+    const client_id = this.platform?.getCache("x_err_client_id");
+    if (client_id) {
+      this.client_id = client_id;
+    } else {
+      this.client_id = uuid_v1();
+      this.platform?.setCache("x_err_client_id", this.client_id);
+    }
+  }
+  // 获取本地缓存消息
+  private getLocalMessage() {
+    let x_err_message_list = this.platform?.getCache("x_err_message_list");
+    if (x_err_message_list) {
+      this.MessageList = x_err_message_list;
+    } else {
+      this.MessageList = [];
+    }
+  }
+  // 记录错误，超出5条时立即上报，否则缓存到本地(等待定时器上报)
+  public Push(data: LogWithError) {
+    this.MessageList.push({
+      ...data,
+      ProjectKey: this.Pid,
+      ClientId: this.client_id,
+    });
+
+    if (this.MessageList.length > 5) {
+      this.upload(); //上传
+    } else {
+      this.platform?.setCache("x_err_message_list", this.MessageList);
+    }
+  }
+  public uploadInfo(envInfo: LogWithEnv) {
+    if (!this.Dns) return; //未设置Dns服务器不上传
+
+    try {
+      this.platform
+        ?.upload(this.Dns + `/admin/monitor_client/add`, {
+          ProjectKey: this.Pid,
+          ClientId: this.client_id,
+          UserId: this.Uid,
+          Width: envInfo.ScreenWidth,
+          Height: envInfo.ScreenHeight,
+        })
+        .catch((err: any) => {
+          // 上传失败
+        });
+    } catch (error) {}
+  }
+
+  // 上传文件
+  public upload() {
+    if (!this.Dns) return; //未设置Dns服务器不上传
+    if (!this.MessageList.length) {
+      return;
+    }
+    try {
+      this.platform
+        ?.upload(this.Dns + `/admin/monitor_error/add`, this.MessageList)
+        .catch((err: any) => {
+          // 上传失败
+        });
+      this.MessageList = [];
+      this.platform?.delCache("x_err_message_list");
+    } catch (error) {}
+  }
+  public unListen() {
+    clearInterval(this.timer);
+    this.platform?.unListen();
+  }
+}
+export default XLog;

x_err_sdk/web/err-implement.ts

@@ -3,7 +3,7 @@ import type {
   LogWithEnv,
   ListenCallbackFn,
   IErrorEvent,
-} from "./types";
+} from "../types";
 
 class Logger implements IErrorEvent {
   public upload(url: string, data: object): Promise<void> {
@@ -108,7 +108,7 @@ class Logger implements IErrorEvent {
       });
     }
   };
-  listenClick = (e) => {
+  private listenClick = (e: Event) => {
     let target = e.target as HTMLElement;
     let tagName = target?.localName;
     let name = [tagName];
@@ -129,7 +129,7 @@ class Logger implements IErrorEvent {
       Stack: "",
     });
   };
-  listenHistoryRouterChange = () => {
+  private listenHistoryRouterChange = () => {
     this.callback({
       Type: "historyChange",
       EventType: "popstate",
@@ -139,7 +139,7 @@ class Logger implements IErrorEvent {
     });
   };
   // 监听hash
-  private listenHashRouterChange = (e) => {
+  private listenHashRouterChange = () => {
     this.callback({
       Type: "hashChange",
       EventType: "hashChange",
@@ -159,6 +159,49 @@ class Logger implements IErrorEvent {
     }
     return newStack.join("\n");
   }
+  private onLoad = () => {
+    // 获取性能数据
+    const entries = performance.getEntriesByType("navigation") ;
+    if (entries.length > 0) {
+      const performanceData = entries[0] as PerformanceNavigationTiming
+
+    // 计算页面加载时间
+    console.log("performanceData", performanceData);
+
+    // 计算请求响应时间
+    const requestResponseTime =
+      performanceData.responseEnd - performanceData.requestStart;
+
+    // 计算DNS查询时间
+    let dnsLookupTime =
+      performanceData.domainLookupEnd - performanceData.domainLookupStart;
+
+    // 计算TCP连接时间
+    let tcpConnectTime =
+      performanceData.connectEnd - performanceData.connectStart;
+
+    // 计算白屏时间
+    let whiteScreenTime =
+      performanceData.responseStart - performanceData.startTime
+    // 获取 FCP 时间
+    let fcpTime = 0;
+    const [fcpEntry] = performance.getEntriesByName("first-contentful-paint");
+    if (fcpEntry) {
+      fcpTime = fcpEntry.startTime;
+    }
+
+    // 构造要发送的性能数据
+    let perfData = {
+      type: "performance",
+      // pageLoadTime: pageLoadTime,
+      dnsLookupTime: dnsLookupTime,
+      tcpConnectTime: tcpConnectTime,
+      whiteScreenTime: whiteScreenTime,
+      requestResponseTime: requestResponseTime,
+      // 其它你想要收集的信息
+    };
+  }
+  };
   public listen(callback: ListenCallbackFn): void {
     this.callback = callback;
     window.addEventListener("unhandledrejection", this.unhandledrejection);
@@ -166,6 +209,8 @@ class Logger implements IErrorEvent {
     // window.addEventListener("click", this.listenClick);
     window.addEventListener("hashchange", this.listenHashRouterChange);
     window.addEventListener("popstate", this.listenHistoryRouterChange);
+
+    window.addEventListener("load", this.onLoad);
   }
 
   public unListen(): void {

x_err_sdk/web/index.ts

@@ -0,0 +1,6 @@
+import XErr from "./err-entry"
+import XErrWeb from "./err-implement"
+
+
+export {XErr,XErrWeb}
+ 

x_error_sdk/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "@adtkcn/x-log",
-  "version": "1.0.0",
-  "description": "",
-  "module": "./index.ts",
-  "main": "./index.ts",
-  "scripts": {
-    "build": "npm run build:index&&npm run build:browser&&npm run build:ts",
-    "build:index": "esbuild x-log.ts --bundle --sourcemap --outfile=dist/x-log.js --format=esm --target=es2015",
-    "build:browser": "esbuild x-log-browser.ts --bundle --sourcemap --outfile=dist/x-log-browser.js --format=esm --target=es2015",
-    "build:ts": "tsc --emitDeclarationOnly"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "typescript": "^5.6.3",
-    "uuid": "^9.0.0"
-  },
-  "devDependencies": {
-    "@dcloudio/types": "^3.0.19",
-    "@types/uuid": "^8.3.4",
-    "esbuild": "^0.15.14"
-  }
-}

x_error_sdk/x-log-browser copy.ts

@@ -1,170 +0,0 @@
-import type { LogWithError, LogWithEnv, ListenCallbackFn } from "./types";
-export function upload(url: string, data: object) {
-  return new Promise(() => {
-    try {
-      let h = new Image();
-      h.onerror = function (event) {
-        var e = event as Event;
-        e.preventDefault();
-      };
-      h.onload = function () {};
-      h.src = url + "?data=" + encodeURIComponent(JSON.stringify(data));
-    } catch (error) {}
-  });
-}
-export function setCache(key: string, info: any) {
-  localStorage.setItem(key, JSON.stringify(info));
-}
-export function getCache(key: string): any {
-  try {
-    let list = localStorage.getItem(key);
-    if (list) {
-      return JSON.parse(list);
-    } else {
-      return null;
-    }
-  } catch (error) {
-    return null;
-  }
-}
-export function delCache(key: string) {
-  localStorage.removeItem(key);
-}
-
-// 获取环境信息
-export function getEnvInfo(): LogWithEnv {
-  const env: LogWithEnv = {
-    Type: "env",
-    ScreenHeight: 0,
-    ScreenWidth: 0,
-  };
-
-  // navigator对象数据
-  if (window ) {
-    env.ScreenHeight = window.innerHeight || 0; // 获取显示屏信息
-    env.ScreenWidth = window.innerWidth || 0;
-  }
-
-  return env;
-}
-function errorCallback(err:Event) {
-  
-}
-export function listenError(callback: ListenCallbackFn) {
-  window.addEventListener(
-    "error",
-    (err: any) => {
-      console.error(err);
-      let target = err.target;
-      if (target?.localName) {
-        if (target?.localName == "img" || target?.localName == "script") {
-          // errorResources(target?.localName, target.src);
-          callback({
-            Type: "resources",
-            EventType: target?.localName,
-            Path: target.src,
-            Message:'',
-            Stack: "",
-          });
-        } else if (target?.localName == "link") {
-          // errorResources(target?.localName, target.href);
-          callback({
-            Type: "resources",
-            EventType: target?.localName,
-            Path: target.href,
-            Message:'',
-            Stack: "",
-          });
-        }
-      } else {
-        // errorLog(err.type, err.message, err.error?.stack || "");
-        callback({
-          Type: "error",
-          EventType: err.type,
-          Path:window.location.href,
-          Message: err.message,
-          Stack: err.error?.stack || "",
-        });
-      }
-    },
-    true
-  );
-  window.addEventListener("unhandledrejection", (err) => {
-    if (typeof err.reason == "string") {
-      // errorLog(err.type, err.reason, "");
-      callback({
-        Type: "error",
-        EventType: err.type,
-        Path:window.location.href,
-        Message: err.reason,
-        Stack: "",
-      });
-    } else if (typeof err.reason == "object") {
-      // errorLog(err.type, err.reason?.message || "", err.reason?.stack || "");
-      callback({
-        Type: "error",
-        EventType: err.type,
-        Path:window.location.href,
-        Message: err.reason?.message || "",
-        Stack: err.reason?.stack || "",
-      });
-    }
-  });
-}
-
-// export function listenBehavior(eventLog: EventLog) {
-//   window.addEventListener("click", (e) => {
-//     let target = e.target as HTMLElement;
-//     let tagName = target?.localName;
-//     let name = [tagName];
-//     if (target.id) {
-//       name.push("#" + target.id);
-//     }
-//     target.classList.forEach((item) => {
-//       name.push("." + item);
-//     });
-//     if (target.innerText) {
-//       name.push(":" + target.innerText);
-//     }
-//     eventLog("click", name.join(""));
-//   });
-//   window.addEventListener("hashchange", (e) => {
-//     eventLog("pageChange", e.newURL);
-//   });
-
-//   eventLog("pageChange", window.location.href);
-// }
-
-export function listen(callback: ListenCallbackFn) {
-  listenError((params: LogWithError) => {
-  
-      if (params.Stack) {
-        let newStack: string[] = [];
-        params.Stack.split("\n").map((item, index) => {
-          if (index < 4) {
-            newStack.push(item);
-          }
-        });
-        params.Stack = newStack.join("\n");
-      }
-  
-    callback(params);
-  });
-}
-// 取消监听
-export function unListen() {
-  window.removeEventListener("error", () => {});
-  window.removeEventListener("unhandledrejection", () => {});
-}
-
-
-export default {
-  getEnvInfo,
-  listenError,
-  upload,
-  getCache,
-  setCache,
-  delCache,
-  listen,
-
-};

x_error_sdk/x-log-node.ts

@@ -1,18 +0,0 @@
-// import http from "http";
-
-// export function upload(url: string, data: Object) {
-// 	let h = new Image();
-// 	h.onerror = function () {};
-// 	h.src = url + "?log=" + encodeURIComponent(data.toString());
-
-// 	const req = http.request(url, { method: "POST" }, (res: any) => {
-// 		res.setEncoding("utf8");
-// 		res.on("data", (chunk) => {});
-// 		// 监听接口请求完成, 除非error，最终都会执行end;
-// 		res.on("end", () => {});
-// 	});
-// 	req.on("error", (e) => {});
-// 	// 写入请求的数据
-// 	data && req.write(data);
-// 	req.end();
-// }

x_error_sdk/x-log-uniapp.ts

@@ -1,20 +0,0 @@
-export function upload(url: string, data: Object) {
-	if (uni) {
-		uni.request({
-			url: url, //仅为示例，并非真实接口地址。
-			data: {
-				log: encodeURIComponent(JSON.stringify(data)),
-			},
-			method: "POST",
-			header: {
-				// xlog: "version", //自定义请求头信息
-			},
-			success: (res: any) => {
-				console.log(res.data);
-			},
-			fail: (err: any) => {
-				console.log(err);
-			},
-		});
-	}
-}

x_error_sdk/x-log.ts

@@ -1,148 +0,0 @@
-import { v1 as uuid_v1 } from "uuid";
-import type { LogWithError, IErrorEvent,LogWithEnv  } from "./types";
-
-type Uid = string | number;
-
-type Props = {
-  Dns: string; // 域名
-  Pid: string; // 项目标识
-  Uid?: Uid; //用户标识
-};
-
-class XLog {
-  private Dns: string = "";
-  private client_id: string = "";
-  private Pid: string = "";
-  private Uid: Uid = "";
-
-  private platform: IErrorEvent;
-
-  private MessageList: any[] = [];
-  private timer: number;
-
-  constructor(props: Props, platform: IErrorEvent) {
-    this.platform = platform;
-    if (props) {
-      props.Dns && (this.Dns = props.Dns);
-      props.Pid && (this.Pid = props.Pid);
-      props.Uid && (this.Uid = props.Uid);
-    }
-    this.SetClientID();
-    this.getLocalMessage();
-    this.initEnv();
-
- 
-    // 监听错误
-    platform.listen((params: LogWithError) => {
-      console.log('listenCallback',params);
-      
-      this.Push(params);
-    });
-
-    this.timer=setInterval(() => {
-      this.upload();
-    }, 1000 * 10);
-  }
-  private initEnv() {
-    let envInfo:LogWithEnv  = this.platform.getEnvInfo();
-    if (envInfo) {
-      this.uploadInfo(envInfo);
-    }
-  }
-  // 关联用户id
-  public SetUid(uid: Uid) {
-    this.Uid = uid;
-    this.initEnv();
-  }
-  // 设置错误ID
-  private SetClientID() {
-    const client_id = this.platform.getCache("x_log_client_id");
-    if (client_id) {
-      this.client_id = client_id;
-    } else {
-      this.client_id = uuid_v1();
-      this.platform.setCache("x_log_client_id", this.client_id);
-    }
-  }
-  // 获取本地缓存消息
-  private getLocalMessage() {
-    let x_message_list = this.platform.getCache("x_message_list");
-    if (x_message_list) {
-      this.MessageList = x_message_list;
-    } else {
-      this.MessageList = [];
-    }
-  }
-  // 记录错误，超出5条时立即上报，否则缓存到本地(等待定时器上报)
-  public Push(data: LogWithError) {
-    console.log(this);
-
-    this.MessageList.push({
-      ...data,
-      ProjectKey:this.Pid,
-      ClientId:this.client_id
-    });
-
-    if (this.MessageList.length > 5) {
-      this.upload(); //上传
-    } else {
-      this.platform.setCache(
-        "x_message_list",
-        this.MessageList
-      );
-    }
-  }
-  public uploadInfo(envInfo:LogWithEnv ) {
-    if (!this.Dns) return; //未设置Dns服务器不上传
- 
-    try {
-      this.platform
-        .upload(
-          this.Dns +
-            `/admin/monitor_client/add`,
-          {
-            ProjectKey:this.Pid,
-            ClientId:this.client_id,
-            UserId:this.Uid,
-            Width: envInfo.ScreenWidth,
-            Height:envInfo.ScreenHeight
-          }
-        )
-        .catch((err: any) => {
-          // 上传失败
-        });
-    } catch (error) {}
-  }
-
-  // 上传文件
-  public upload() {
-    if (!this.Dns) return; //未设置Dns服务器不上传
-    if (!this.MessageList.length) {
-      return;
-    }
-    try {
-      this.platform
-        .upload(
-          this.Dns +
-            `/admin/monitor_error/add`,
-          this.MessageList
-        )
-        .catch((err: any) => {
-          // 上传失败
-        });
-      this.MessageList = [];
-      this.platform.delCache("x_message_list");
-    } catch (error) {}
-  }
-  public unListen(){
-    clearInterval(this.timer)
-    this.platform.unListen()
-  }
-  // public Vue2 = (app: any) => {
-  //   app.prototype.$xLog = this;
-  // };
-  // public Vue3 = (app: any) => {
-  //   app.config.globalProperties.$xLog = this;
-  // };
-}
-export default XLog;