Преглед на файлове

添加阿里云日志上传

Michael Wang преди 3 години
родител
ревизия
3ce6cce007
променени са 7 файла, в които са добавени 59 реда и са изтрити 17 реда
  1. 1 0
      .env.production
  2. 13 15
      arch-design.md
  3. 1 0
      package.json
  4. 6 0
      pnpm-lock.yaml
  5. 3 0
      src/constants/constants.ts
  6. 22 0
      src/types/3rd.d.ts
  7. 13 2
      src/utils/logger.ts

+ 1 - 0
.env.production

@@ -0,0 +1 @@
+VITE_SLS_STORE_NAME=student-client

+ 13 - 15
arch-design.md

@@ -89,7 +89,7 @@ type Store = {
     /** 学号 */
     studentCodeList: string[];
     // ...
-  }
+  };
   // ...
 };
 
@@ -237,7 +237,7 @@ VUE_APP_SKIP_CHECK_NATIVE:允许本地通过 web 来访问学生端服务
 
 VUE_APP_CORE_HOST_URL:本地开发时,后台服务器的地址
 
-VUE_APP_SLS_STORE_NAME:阿里云日志服务地址
+VITE_SLS_STORE_NAME:阿里云日志服务地址
 
 VUE_APP_CONFIG_FILE_SEVER_URL=https://ecs-static.qmth.com.cn
 
@@ -538,19 +538,18 @@ Todolist:
 
 ## 前端加密解密设计
 
-前后端协商加密解密,避免接口敏感信息被暴露。  
+前后端协商加密解密,避免接口敏感信息被暴露。
 
-1. 前后端协商N(比如5)种加密解密方式
-2. 后端选择加密的组合方式,1到2种进行连续加密
+1. 前后端协商 N(比如 5)种加密解密方式
+2. 后端选择加密的组合方式,1  2 种进行连续加密
 3. 前端在需要加密的接口使用后端规定的加密方式进行连续加密,参数要加上时间戳
-4. 后端验证通过后,返回的response也是用之前加密的方式加密过,前端再进行相应的解密
+4. 后端验证通过后,返回的 response 也是用之前加密的方式加密过,前端再进行相应的解密
 5. 加密方式被禁用后,仅影响开考接口?
 6. 后端对加密方案的选择:间隔一段时间才换加密组合
 
 ## Prevent cheating: 防作弊设计
 
-1. 检测伪装Chrome版本号的行为 - 检测Chrome高能力特性
-
+1. 检测伪装 Chrome 版本号的行为 - 检测 Chrome 高能力特性
 
 ## tech challenges: 局部技术难点
 
@@ -587,20 +586,19 @@ paramsSerializer QS defaults: null => '' ; undefined => omit ; change arrayForma
 
 ## Upgrade strategy: 升级策略
 
-新增加API支持新前端,后端维护多套API,一次升级。  
+新增加 API 支持新前端,后端维护多套 API,一次升级。  
 前端保持多套,新旧共存。  
-nginx通过域名来分发新旧前端代码。  
+nginx 通过域名来分发新旧前端代码。  
 如此,可支持前端灰度升级。
 
 ## Optional feature: 选做功能
 
 1. Electron crash 日志捕获及上传
 1. 不适用的宿主环境日志
-1. Electron启动速度
-1. 非生产环境,右上角显示tip,并可以打开console
-1. Electron加固(替换网络层,用C来发网络请求,探索可行性)
-1. 先得到抓拍的png照片,再通过canvas得到jpeg格式的照片。[js image manipulation](https://github.com/oliver-moran/jimp)
-
+1. Electron 启动速度
+1. 非生产环境,右上角显示 tip,并可以打开 console
+1. Electron 加固(替换网络层,用 C 来发网络请求,探索可行性)
+1. 先得到抓拍的 png 照片,再通过 canvas 得到 jpeg 格式的照片。[js image manipulation](https://github.com/oliver-moran/jimp)
 
 ## 待整理
 

+ 1 - 0
package.json

@@ -18,6 +18,7 @@
     "axios": "^0.26.0",
     "axios-progress-bar": "^1.2.0",
     "axios-retry": "^3.2.4",
+    "js-sls-logger": "^2.0.0-beta.2",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",
     "naive-ui": "^2.26.0",

+ 6 - 0
pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   eslint: ^8.10.0
   eslint-config-prettier: ^8.5.0
   eslint-plugin-vue: ^8.5.0
+  js-sls-logger: ^2.0.0-beta.2
   lodash-es: ^4.17.21
   moment: ^2.29.1
   naive-ui: ^2.26.0
@@ -38,6 +39,7 @@ dependencies:
   axios: 0.26.0
   axios-progress-bar: 1.2.0_axios@0.26.0
   axios-retry: 3.2.4
+  js-sls-logger: 2.0.0-beta.2
   lodash-es: 4.17.21
   moment: 2.29.1
   naive-ui: 2.26.0_vue@3.2.31
@@ -1650,6 +1652,10 @@ packages:
       pretty-format: 27.5.1
     dev: false
 
+  /js-sls-logger/2.0.0-beta.2:
+    resolution: {integrity: sha512-09T0hdLlet01EAvXlQeu1g42+k2ohwSdfZlPav8JTvaLBrSHJqN1xbr29j9ITqNNIZr7Ro1KmrpCgQ2X6Rh9WA==}
+    dev: false
+
   /js-stringify/1.0.2:
     resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==}
     dev: true

+ 3 - 0
src/constants/constants.ts

@@ -1 +1,4 @@
 export const YYYYMMDDHHmmss = "YYYY-MM-DD HH:mm:ss";
+
+export const VITE_SLS_STORE_NAME = import.meta.env
+  .VITE_SLS_STORE_NAME as string;

+ 22 - 0
src/types/3rd.d.ts

@@ -1 +1,23 @@
 declare module "axios-progress-bar";
+
+type Sls_Options = {
+  /** 所在区域的host */
+  host: string;
+  /** project名称 */
+  project: string;
+  /** logstore名称 */
+  logstore: string;
+  /** 定义时间,默认是10秒,number类型,选填 */
+  time?: number;
+  /** 定义数据条数,默认是10条,number类型,选填 */
+  count?: number;
+  /** 是否启用压缩,默认为true */
+  compress?: true;
+};
+declare module "js-sls-logger" {
+  export default class {
+    constructor(opts: Sls_Options);
+
+    send(log: Record<string, any>): void;
+  }
+}

+ 13 - 2
src/utils/logger.ts

@@ -1,6 +1,14 @@
 import { store } from "@/store/store";
 import moment from "moment";
 import { omit } from "lodash-es";
+import SlsWebLogger from "js-sls-logger";
+import { VITE_SLS_STORE_NAME } from "@/constants/constants";
+
+const aliLogger = new SlsWebLogger({
+  host: "cn-shenzhen.log.aliyuncs.com",
+  project: "examcloud",
+  logstore: VITE_SLS_STORE_NAME,
+});
 
 type LogDetail = {
   level?: "debug" | "log" | "warn" | "error";
@@ -24,8 +32,8 @@ type LogDetail = {
   aus?: string;
   /** error json */
   ejn?: string;
-  /** 扩展字段的集合。TODO: 消除这里的any,提示不允许出去前面的字段 */
-  ext?: any;
+  /** 扩展字段的集合。TODO: 提示不允许出去前面的字段 */
+  ext?: Record<string, any>;
 };
 /** 记录重要日志到多个source
  * 示例:
@@ -55,4 +63,7 @@ export default function (detail: LogDetail) {
   if (detail.cnl?.includes("console")) {
     console.log(newDetail);
   }
+  if (detail.cnl?.includes("server")) {
+    aliLogger.send(newDetail);
+  }
 }