vite-uni-dev-tool 0.0.1

package/dev/devIntercept/index.ts

@@ -0,0 +1,629 @@
+import { backup } from '../core';
+import { DevEvent } from '../devEvent';
+import type { DevTool } from '../type';
+import {
+  getCurrentDate,
+  getCurrentPagePath,
+  serializeCircular,
+} from '../utils/index';
+import { isObject } from '../utils/language';
+
+import { getCurrentInstance } from 'vue';
+
+/**
+ * 拦截器
+ *
+ * @export
+ * @class DevIntercept
+ */
+export class DevIntercept {
+  private event: DevEvent;
+
+  vue3instance = getCurrentInstance();
+
+  initPinia = false;
+
+  constructor(options: DevTool.DevInterceptOptions) {
+    this.event = options.event;
+    this.init(options);
+  }
+
+  init(options: DevTool.DevInterceptOptions) {
+    if (this.vue3instance) {
+      this.vue3instance.appContext.config.errorHandler = (error) => {
+        this.interceptErrorApp(error);
+      };
+      this.vue3instance.appContext.config.warnHandler = (msg: string) => {
+        this.interceptWarnApp(msg);
+      };
+    }
+
+    this.interceptAppConsole();
+
+    this.interceptSetStorage();
+    this.interceptRemoveStorage();
+    this.interceptClearStorage();
+
+    this.interceptUploadFile();
+    this.interceptRequest();
+    this.interceptSocket();
+
+    this.interceptSwitchTab();
+    this.interceptNavigateTo();
+
+    options.enableInterceptPromiseReject && this.interceptPromiseReject();
+  }
+
+  /**
+   * app 中拦截 console
+   * app
+   * @memberof DevIntercept
+   */
+  interceptAppConsole() {
+    if (!(uni as any).__log__) return;
+    const that = this;
+    (uni as any).__log__ = function (
+      type: DevTool.ConsoleType,
+      line: string,
+      ...args: any
+    ) {
+      const path = getCurrentPagePath();
+
+      backup['__log__'](type, line, ...args);
+
+      that.event.updateConsoleList([
+        {
+          type,
+          position: path,
+          time: getCurrentDate(),
+          args: args.map((item: any) => {
+            // 将循环引用的对象转为字符串
+            if (isObject(item)) {
+              return serializeCircular(item);
+            } else if (
+              item === null ||
+              item === undefined ||
+              isNaN(item) ||
+              item === Infinity
+            ) {
+              return item + '';
+            } else {
+              return item;
+            }
+          }),
+          stack: line,
+        },
+      ]);
+    };
+  }
+
+  /**
+   * 拦截 app 错误
+   *
+   * @param {*} error
+   * @memberof DevIntercept
+   */
+  interceptErrorApp(error: any) {
+    const path = getCurrentPagePath();
+    const argList = error.toString();
+
+    const stack = new Error()?.stack?.split('\n').slice(2)?.[0];
+
+    console.error(error);
+
+    this.event.updateConsoleList([
+      {
+        type: 'error',
+        args: [argList],
+        position: path,
+        time: getCurrentDate(),
+        stack,
+      },
+    ]);
+  }
+
+  preWarn: any;
+  /**
+   * 拦截 app 警告
+   *
+   * @param {*} warn
+   * @return {*}
+   * @memberof DevIntercept
+   */
+  interceptWarnApp(warn: any) {
+    if (this.preWarn === warn) return;
+    this.preWarn = warn;
+    const path = getCurrentPagePath();
+    const stack = new Error()?.stack?.split('\n').slice(2)?.[0];
+
+    console.warn(warn);
+
+    this.event.updateConsoleList([
+      {
+        type: 'warn',
+        args: [warn.toString()],
+        position: path,
+        time: getCurrentDate(),
+        stack,
+      },
+    ]);
+  }
+
+  /**
+   * 拦截 promise reject
+   *
+   * @memberof DevIntercept
+   */
+  interceptPromiseReject() {
+    Object.defineProperty(Promise, 'reject', {
+      value: function (reason: any) {
+        this.interceptErrorApp(reason);
+        return backup.reject.call(Promise, reason);
+      },
+    });
+  }
+
+  /**
+   * 拦截 nav 跳转
+   *
+   * @memberof DevIntercept
+   */
+  interceptSwitchTab() {
+    const that = this;
+    uni.addInterceptor('switchTab', {
+      invoke(args: UniNamespace.NavigateToOptions) {
+        const complete = args.complete;
+        args.complete = function (e: any) {
+          complete && complete(e);
+
+          const url = args.url?.slice(1)?.split('?')?.[0] || '/';
+          that.event.updateCurrentPagePath(url);
+        };
+      },
+    });
+  }
+
+  /**
+   * 拦截页面跳转
+   *
+   * @memberof DevIntercept
+   */
+  interceptNavigateTo() {
+    const that = this;
+    uni.addInterceptor('navigateTo', {
+      invoke(args: UniNamespace.NavigateToOptions) {
+        const complete = args.complete;
+        args.complete = function (e: any) {
+          complete && complete(e);
+          const url = args.url?.slice(1)?.split('?')?.[0] || '/';
+          that.event.updateCurrentPagePath(url);
+        };
+      },
+    });
+  }
+
+  /**
+   * 拦截网络请求
+   *
+   * @memberof DevIntercept
+   */
+  interceptRequest() {
+    const that = this;
+    uni.addInterceptor('request', {
+      invoke(args: UniNamespace.RequestOptions) {
+        const preIndex = that.event.getRequestIndex();
+        const index = that.event.setRequestIndex(preIndex + 1);
+        const url = args.url;
+        const noParams = url?.split('?')?.[0];
+        const lastG = noParams?.lastIndexOf('/');
+        const name = noParams?.slice(lastG + 1) ?? '';
+        const addInterceptorRequestData: DevTool.NetworkItem = {
+          index,
+          url: args.url,
+          name,
+          startTime: Date.now(),
+          endTime: 0,
+          time: '-',
+          headers: {
+            requestHeader: Object.entries(args.header ?? {}).map(
+              ([key, value]) => ({
+                key,
+                value,
+              }),
+            ),
+            responseHeader: [],
+          },
+          method: args.method || 'GET',
+          status: 'pending',
+          payload: args?.data ? JSON.stringify(args.data) : '',
+          response: '',
+          size: '',
+        };
+        that.event.updateNetworkList([addInterceptorRequestData]);
+
+        let _complete = args.complete;
+        args.complete = function (e: any) {
+          _complete && _complete(e);
+
+          addInterceptorRequestData.status = e.statusCode ?? 'error';
+          addInterceptorRequestData.endTime = Date.now();
+
+          const diff = Date.now() - addInterceptorRequestData.startTime;
+
+          addInterceptorRequestData.time =
+            diff < 1000 ? diff + 'ms' : diff / 1000 + 's';
+
+          const len =
+            e?.header?.['Content-Length'] || e?.header?.['content-length'] || 0;
+          addInterceptorRequestData.size =
+            len > 1024 ? (len / 1024).toFixed(2) + 'k' : len + 'b';
+          addInterceptorRequestData.response = e;
+          addInterceptorRequestData.headers.responseHeader = Object.entries(
+            e.header ?? {},
+          ).map(([key, value]) => ({
+            key,
+            value,
+          }));
+          that.event.updateNetworkList([addInterceptorRequestData], index);
+        };
+      },
+    });
+  }
+
+  /**
+   * 拦截 websocket
+   *
+   * @memberof DevIntercept
+   */
+  interceptSocket() {
+    const that = this;
+
+    const connectSocket = function (
+      connectOption: UniNamespace.ConnectSocketOption,
+    ) {
+      const url = connectOption.url;
+      const headers = Object.entries(connectOption.header ?? {}).map(
+        ([key, value]) => {
+          return { key, value } as { key: string; value: string };
+        },
+      );
+      const method = (connectOption.method ?? 'GET').toLowerCase();
+      const protocols = connectOption.protocols ?? [];
+      that.event.updateWsList({
+        url,
+        headers,
+        method,
+        protocols,
+        readyState: 'connection',
+        message: [],
+      });
+
+      const socketTask = backup.connectSocket({
+        ...connectOption,
+        success: (res) => {
+          connectOption.success?.(res);
+          that.event.updateWsList({
+            url,
+            readyState: 'open',
+            headers,
+            protocols,
+            message: [
+              {
+                data: '连接成功',
+                type: 'success',
+                time: Date.now(),
+              },
+            ],
+          });
+        },
+        fail: (error) => {
+          connectOption.fail?.(error);
+          that.event.updateWsList({
+            url,
+            readyState: 'error',
+            headers,
+            protocols,
+            message: [
+              {
+                data: '连接失败',
+                type: 'error',
+                time: Date.now(),
+              },
+            ],
+          });
+        },
+        complete: (res) => {
+          connectOption?.complete?.(res);
+        },
+      });
+
+      const send = socketTask.send;
+      socketTask.send = (options: UniApp.SendSocketMessageOptions) => {
+        send.call(socketTask, {
+          data: options.data,
+          fail: (error) => {
+            options?.fail?.(error);
+            that.event.updateWsList({
+              url,
+              readyState: 'error',
+              headers,
+              protocols,
+              message: [
+                {
+                  data: JSON.stringify(error),
+                  type: 'error',
+                  time: Date.now(),
+                },
+              ],
+            });
+          },
+          success: (res) => {
+            options?.success?.(res);
+            that.event.updateWsList({
+              readyState: 'open',
+              url,
+              headers,
+              protocols,
+              message: [
+                {
+                  type: 'success',
+                  time: Date.now(),
+                  data: options.data?.toString(),
+                },
+              ],
+            });
+          },
+          complete: (res) => {
+            options?.complete?.(res);
+          },
+        });
+      };
+
+      const close = socketTask.close;
+      socketTask.close = (options: UniApp.CloseSocketOptions) => {
+        that.event.updateWsList({
+          url,
+          readyState: 'closing',
+          headers,
+          protocols,
+          message: [],
+        });
+
+        close.call(socketTask, {
+          ...options,
+          fail: (error) => {
+            options?.fail?.(error);
+            that.event.updateWsList({
+              url,
+              headers,
+              readyState: 'open',
+              protocols,
+              message: [],
+            });
+          },
+          success: (res) => {
+            options?.success?.(res);
+            that.event.updateWsList({
+              url,
+              headers,
+              readyState: 'closed',
+              protocols,
+              message: [],
+            });
+          },
+          complete: (res) => {
+            options?.complete?.(res);
+          },
+        });
+      };
+
+      socketTask.onMessage((res) => {
+        that.event.updateWsList({
+          url,
+          headers,
+          protocols,
+          message: [
+            {
+              type: 'success',
+              time: Date.now(),
+              data: JSON.parse(res.data),
+            },
+          ],
+        });
+      });
+
+      return socketTask;
+    };
+
+    uni.connectSocket = connectSocket;
+  }
+
+  /**
+   * 拦截 uni.setStorageSync 和 uni.setStorage
+   *
+   * @memberof DevIntercept
+   */
+  interceptSetStorage() {
+    uni.setStorageSync = (key, value) => {
+      backup.setStorageSync(key.toString(), value);
+
+      this.event.updateStoreList([
+        {
+          key: key.toString(),
+          _oldKey: key.toString(),
+          value: value,
+        },
+      ]);
+    };
+    uni.setStorage = (options: UniNamespace.SetStorageOptions) => {
+      backup
+        .setStorage({
+          ...options,
+          key: options.key?.toString(),
+        })
+        .then(() => {
+          this.event.updateStoreList([
+            {
+              key: options.key?.toString(),
+              _oldKey: options.key?.toString(),
+              value: options.data,
+            },
+          ]);
+        });
+    };
+  }
+
+  /**
+   * 拦截 uni.clearStorageSync 和 uni.clearStorage
+   *
+   * @memberof DevIntercept
+   */
+  interceptClearStorage() {
+    uni.clearStorageSync = () => {
+      backup.clearStorageSync();
+      this.event.clearStorage();
+    };
+    uni.clearStorage = () => {
+      backup.clearStorage();
+      this.event.clearStorage();
+    };
+  }
+
+  /**
+   * 拦截 uni.removeStorageSync 和 uni.removeStorage
+   *
+   * @memberof DevIntercept
+   */
+  interceptRemoveStorage() {
+    uni.removeStorageSync = (key) => {
+      backup.removeStorageSync(key);
+      // remove(key);
+      this.event.removeStorage(key);
+    };
+    uni.removeStorage = (options: UniNamespace.RemoveStorageOptions) => {
+      backup.removeStorage(options).then(() => {
+        this.event.removeStorage(options.key);
+      });
+    };
+  }
+
+  /** 拦截vuex */
+  interceptVuexStorage(store: any) {
+    this.event.setVuexList(store.state);
+
+    store?.subscribe?.((_: any, state: any) => {
+      this.event.setVuexList(state);
+    });
+  }
+
+  /** 拦截pinia */
+  interceptPiniaStore(context: any) {
+    if (!this.initPinia) {
+      this.initPinia = true;
+      this.event.setPiniaStore(context.pinia);
+    }
+
+    this.event.setPiniaList(context.pinia.state.value);
+
+    context?.store?.$subscribe(() => {
+      this.event.setPiniaList({
+        [context.store.$id]: context.store.$state,
+      });
+    });
+    return context.pinia;
+  }
+
+  /**
+   * 拦截 uni.uploadFile
+   *
+   * @memberof DevIntercept
+   */
+  interceptUploadFile() {
+    const that = this;
+    const uploadFile = (uploadOption: UniNamespace.UploadFileOption) => {
+      const preIndex = that.event.getUploadIndex();
+
+      const index = that.event.setUploadIndex(preIndex + 1);
+
+      that.event.updateUploadList(
+        [
+          {
+            index,
+            name: uploadOption.name,
+            url: uploadOption.url,
+            filePath: uploadOption.filePath,
+            fileType: uploadOption.fileType,
+            headers: {
+              requestHeader: Object.entries(uploadOption.header || {}).map(
+                ([key, value]) => ({ key, value }),
+              ),
+              responseHeader: [],
+            },
+            formData: uploadOption.formData,
+            status: 'pending',
+            progress: 0,
+            totalBytesSent: 0,
+            totalBytesExpectedToSend: 0,
+            startTime: Date.now(),
+          },
+        ],
+        index,
+      );
+      const uploadTask = backup.uploadFile({
+        ...uploadOption,
+        success: (res) => {
+          uploadOption?.success?.(res);
+          that.event.updateUploadList(
+            [
+              {
+                index,
+                status: 'success',
+                endTime: Date.now(),
+                response: {
+                  ...res,
+                  data: JSON.parse(res.data),
+                },
+              },
+            ],
+            index,
+          );
+          that.event.removeUploadTask(index);
+        },
+        fail: (error) => {
+          uploadOption?.fail?.(error);
+          that.event.updateUploadList(
+            [
+              {
+                index,
+                status: 'error',
+                response: error,
+                endTime: Date.now(),
+              },
+            ],
+            index,
+          );
+          that.event.removeUploadTask(index);
+        },
+      });
+      uploadTask.onProgressUpdate((res) => {
+        that.event.updateUploadList(
+          [
+            {
+              index,
+              progress: res.progress,
+              totalBytesSent: res.totalBytesSent,
+              totalBytesExpectedToSend: res.totalBytesExpectedToSend,
+              status: 'uploading',
+            },
+          ],
+          index,
+        );
+      });
+
+      that.event.addUploadTask(index, uploadTask);
+
+      return uploadTask;
+    };
+    uni.uploadFile = uploadFile.bind(uni);
+  }
+}