perf: + PageSpy

src/config.js

@@ -1,6 +1,8 @@
 import React from "react";
 import dayjs from "dayjs";
 
+export const PROJECT_NAME = "GHHub";
+
 export const HT_HOST = process.env.NODE_ENV == "production" ? "https://p9axztuwd7x8a7.mycht.cn" :"http://202.103.68.144:890"; //"http://202.103.68.231:889";
 export const DATE_FORMAT = "YYYY-MM-DD";
 export const DATE_FORMAT_MONTH = "YYYY-MM";

src/pageSpy/index.jsx

@@ -0,0 +1,37 @@
+import { loadScript } from '@/utils/commons';
+import { PROJECT_NAME } from '@/config';
+
+export const loadPageSpy = (title) => {
+  const PageSpySrc = [
+    'https://page-spy.mycht.cn/page-spy/index.min.js',
+    'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js',
+    'https://page-spy.mycht.cn/plugin/rrweb/index.min.js',
+  ];
+  Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
+    // 注册插件
+    PageSpy.registerPlugin(new DataHarborPlugin({ maximum: 2 * 1024 * 1024 }));
+    // 实例化 PageSpy
+    window.$pageSpy = new PageSpy({ api: 'page-spy.mycht.cn', project: PROJECT_NAME, title: title, autoRender: false });
+  });
+};
+
+export const uploadPageSpyLog = () => {
+  window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+}
+
+export const PageSpyLog = () => {
+  return (
+    <>
+      {window.$pageSpy && (
+        <a
+          className='text-primary'
+          onClick={() => {
+            window.$pageSpy.triggerPlugins('onOfflineLog', 'download');
+            window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
+          }}>
+          上传Debug日志 ({window.$pageSpy.address.substring(0, 4)})
+        </a>
+      )}
+    </>
+  );
+};

src/stores/Auth.js

@@ -2,6 +2,7 @@ import { makeAutoObservable, runInAction } from "mobx";
 import { fetchJSON, postForm } from '@/utils/request';
 import { HT_HOST } from "@/config";
 import { isNotEmpty, prepareUrl } from '@/utils/commons';
+import { loadPageSpy } from '@/pageSpy';
 
 const KEY_LOGIN_TOKEN = 'KEY_LOGIN_TOKEN';
 const KEY_TRAVEL_AGENCY_ID = 'KEY_TRAVEL_AGENCY_ID';
@@ -60,6 +61,7 @@ class Auth {
             this.root.putSession(KEY_TRAVEL_AGENCY_ID, this.login.travelAgencyId);
             this.root.putSession(KEY_USER_ID, this.login.userId);
           });
+          loadPageSpy(`${json.Result.VName}-${json.Result.LoginName}`)
           this.startTokenInterval();
           return this.login;
         } else {
@@ -131,8 +133,8 @@ class Auth {
         .build();
 
     return fetchJSON(fetchUrl)
-      .then(json => {   
-        //console.log(json);     
+      .then(json => {
+        //console.log(json);
         if (json.errcode == 0) {
           runInAction(() => {
             this.VendorList = json.Result;
@@ -166,7 +168,7 @@ class Auth {
       }
     });
   }
-  
+
   VendorList = [];//海外供应商列表
 
   login = {
@@ -182,4 +184,4 @@ class Auth {
   }
 }
 
-export default Auth;
+export default Auth;

src/views/error-page.jsx

@@ -1,8 +1,10 @@
 import { useRouteError } from "react-router-dom";
+import { uploadPageSpyLog } from '@/pageSpy';
 
 export default function ErrorPage() {
   const error = useRouteError();
   console.error(error);
+  uploadPageSpyLog();
 
   return (
     <div id="error-page">
@@ -13,4 +15,4 @@ export default function ErrorPage() {
       </p>
     </div>
   );
-}
+}