@wutiange/log-listener-plugin 1.3.2 → 2.0.1-alpha.1

package/src/HTTPInterceptor.ts

@@ -0,0 +1,339 @@
+import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor';
+import BlobFileReader from 'react-native/Libraries/Blob/FileReader';
+import {Blob} from 'buffer';
+import { createClassWithErrorHandling, formDataToString } from './utils';
+
+type StartNetworkLoggingOptions = {
+  /** List of hosts to ignore, e.g. `services.test.com` */
+  ignoredHosts?: string[];
+  /** List of urls to ignore, e.g. `https://services.test.com/test` */
+  ignoredUrls?: string[];
+  /**
+   * List of url patterns to ignore, e.g. `/^GET https://test.com\/pages\/.*$/`
+   *
+   * Url to match with is in the format: `${method} ${url}`, e.g. `GET https://test.com/pages/123`
+   */
+  ignoredPatterns?: RegExp[];
+  /**
+   * Force the network logger to start even if another program is using the network interceptor
+   * e.g. a dev/debuging program
+   */
+  forceEnable?: boolean;
+};
+
+interface HttpRequestInfo {
+  id: string;
+  method: RequestMethod;
+  url: string;
+  timeout: number;
+  requestHeaders: Record<string, string>;
+  requestData: any | null;
+  startTime: number;
+  endTime: number;
+  responseHeaders: Headers;
+  responseData: any | null;
+  status: number;
+  duration: number;
+  responseContentType: string;
+  responseSize: number;
+  responseURL: string;
+  responseType: string;
+}
+
+type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+type XHR = {
+  uniqueId: string;
+  responseHeaders?: Headers;
+};
+
+type EventName =
+  | 'open'
+  | 'requestHeader'
+  | 'headerReceived'
+  | 'send'
+  | 'response';
+
+const extractHost = (url: string) => {
+  const host = url.split('//')[1]?.split(':')[0]?.split('/')[0] || undefined;
+
+  return host;
+};
+
+const generateUniqueId = () => {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2);
+};
+
+const parseResponseBlob = async (response: Blob) => {
+  const blobReader = new BlobFileReader();
+  blobReader.readAsText(response);
+
+  return await new Promise<string>((resolve, reject) => {
+    const handleError = () => reject(blobReader.error);
+
+    blobReader.addEventListener('load', () => {
+      resolve(blobReader.result);
+    });
+    blobReader.addEventListener('error', handleError);
+    blobReader.addEventListener('abort', handleError);
+  });
+};
+
+const getResponseBody = async (responseType: string, response: any) => {
+  try {
+    if (responseType === 'blob' && response) {
+      return await parseResponseBlob(response as unknown as Blob);
+    }
+    return response ?? null;
+  } catch (error) {
+    console.warn("getResponseBody---error---", error)
+    return null;
+  }
+};
+
+class HTTPInterceptor {
+  private static _index = 0;
+  private ignoredHosts: Set<string> | undefined;
+  private ignoredUrls: Set<string> | undefined;
+  private ignoredPatterns: RegExp[] | undefined;
+  // 只保存正在请求中的
+  private allRequests = new Map<string, Partial<HttpRequestInfo>>();
+
+  private userListeners: [
+    EventName,
+    (data: Partial<HttpRequestInfo>) => Promise<void> | void,
+  ][] = [];
+
+  private enabled = false;
+
+  addListener = (
+    eventName: EventName,
+    listener: (data: Partial<HttpRequestInfo>) => Promise<void> | void,
+  ) => {
+    // 如果之前已经订阅过了就过滤掉
+    if (
+      this.userListeners.find(
+        ([name, tempListener]) =>
+          name === eventName && tempListener === listener,
+      )
+    ) {
+      return;
+    }
+    this.userListeners.push([eventName, listener]);
+
+    return () => {
+      this.userListeners = this.userListeners.filter(
+        ([name, tempListener]) =>
+          name !== eventName || tempListener !== listener,
+      );
+    };
+  };
+
+  removeListener = (
+    eventName: EventName,
+    listener: (data: Partial<HttpRequestInfo>) => Promise<void> | void,
+  ) => {
+    this.userListeners = this.userListeners.filter(
+      ([name, tempListener]) => name !== eventName || tempListener !== listener,
+    );
+  };
+
+  removeAllListener() {
+    this.userListeners = [];
+  }
+
+  private listenerHandle = (
+    eventName: EventName,
+    data: Partial<HttpRequestInfo>,
+  ) => {
+    this.userListeners.forEach(async ([name, listener]) => {
+      try {
+        if (name === eventName) {
+          await listener(data);
+        }
+      } catch (error: any) {
+        console.warn(`eventName=${eventName}, error=${error?.message}`)
+      }
+    });
+  };
+
+  private openHandle = (method: RequestMethod, url: string, xhr: XHR) => {
+    if (this.ignoredHosts) {
+      const host = extractHost(url);
+      if (host && this.ignoredHosts.has(host)) {
+        return;
+      }
+    }
+    if (this.ignoredUrls && this.ignoredUrls.has(url)) {
+      return;
+    }
+
+    if (this.ignoredPatterns) {
+      if (
+        this.ignoredPatterns.some(pattern => pattern.test(`${method} ${url}`))
+      ) {
+        return;
+      }
+    }
+    xhr.uniqueId = HTTPInterceptor._index + generateUniqueId();
+    const newRequest = {
+      id: xhr.uniqueId,
+      method,
+      url,
+    };
+    this.allRequests.set(xhr.uniqueId, newRequest);
+    this.listenerHandle('open', newRequest);
+  };
+
+  private requestHeaderHandle = (header: string, value: string, xhr: XHR) => {
+    const currentRequest = this.allRequests.get(xhr.uniqueId);
+    if (!currentRequest) {
+      return;
+    }
+    if (!currentRequest.requestHeaders) {
+      currentRequest.requestHeaders = {};
+    }
+    currentRequest.requestHeaders[header] = value;
+    this.listenerHandle('requestHeader', currentRequest);
+  };
+
+  private headerReceivedHandle = (
+    responseContentType: string,
+    responseSize: number,
+    responseHeaders: Headers,
+    xhr: XHR,
+  ) => {
+    const currentRequest = this.allRequests.get(xhr.uniqueId);
+    if (!currentRequest) {
+      return;
+    }
+    currentRequest.responseContentType = responseContentType;
+    currentRequest.responseSize = responseSize;
+    currentRequest.responseHeaders = xhr.responseHeaders;
+    this.listenerHandle('headerReceived', currentRequest);
+  };
+
+  private responseHandle = async (
+    status: number,
+    timeout: number,
+    response: any,
+    responseURL: string,
+    responseType: string,
+    xhr: XHR,
+  ) => {
+    const currentRequest = this.allRequests.get(xhr.uniqueId);
+    if (!currentRequest) {
+      return;
+    }
+    currentRequest.endTime = Date.now();
+    currentRequest.status = status;
+    currentRequest.timeout = timeout;
+    currentRequest.responseData = await getResponseBody(responseType, response);
+    currentRequest.responseURL = responseURL;
+    currentRequest.responseType = responseType;
+    currentRequest.duration =
+      currentRequest.endTime - (currentRequest.startTime ?? 0);
+    this.listenerHandle('response', currentRequest);
+    this.allRequests.delete(xhr.uniqueId);
+  };
+
+  private sendHandle = (data: any, xhr: XHR) => {
+    const currentRequest = this.allRequests.get(xhr.uniqueId);
+    if (!currentRequest) {
+      return;
+    }
+    try {
+      if (data && typeof data === 'object' && data instanceof FormData) {
+        currentRequest.requestData = formDataToString(data);
+      } else {
+        currentRequest.requestData = JSON.parse(data);
+      }
+    } catch (error) {
+      currentRequest.requestData = null;
+    }
+    currentRequest.startTime = Date.now();
+    this.listenerHandle('send', currentRequest);
+  };
+
+  setIgnoredUrls = (ignoredUrls: string[]) => {
+    if (ignoredUrls?.length) {
+      if (
+        !Array.isArray(ignoredUrls) ||
+        typeof ignoredUrls[0] !== 'string'
+      ) {
+        console.warn(
+          'ignoredUrls must be an array of strings. The logger has not been started.',
+        );
+        return;
+      }
+      this.ignoredUrls = new Set(ignoredUrls);
+    }
+  }
+
+  enable = (options?: StartNetworkLoggingOptions) => {
+    try {
+      if (
+        this.enabled ||
+        (XHRInterceptor.isInterceptorEnabled() && !options?.forceEnable)
+      ) {
+        if (!this.enabled) {
+          console.warn(
+            'network interceptor has not been enabled as another interceptor is already running (e.g. another debugging program). Use option `forceEnable: true` to override this behaviour.',
+          );
+        }
+        return;
+      }
+
+      if (options?.ignoredHosts) {
+        if (
+          !Array.isArray(options.ignoredHosts) ||
+          typeof options.ignoredHosts[0] !== 'string'
+        ) {
+          console.warn(
+            'ignoredHosts must be an array of strings. The logger has not been started.',
+          );
+          return;
+        }
+        this.ignoredHosts = new Set(options.ignoredHosts);
+      }
+
+      if (options?.ignoredPatterns) {
+        this.ignoredPatterns = options.ignoredPatterns;
+      }
+      this.setIgnoredUrls(options?.ignoredUrls)
+      XHRInterceptor.setOpenCallback(this.openHandle);
+      XHRInterceptor.setRequestHeaderCallback(this.requestHeaderHandle);
+      XHRInterceptor.setHeaderReceivedCallback(this.headerReceivedHandle);
+      XHRInterceptor.setSendCallback(this.sendHandle);
+      XHRInterceptor.setResponseCallback(this.responseHandle);
+      XHRInterceptor.enableInterception();
+      this.enabled = true;
+    } catch (error) {}
+  };
+
+  disable = () => {
+    if (!this.enabled) {
+      return;
+    }
+    XHRInterceptor.disableInterception();
+    this.enabled = false;
+  };
+
+  reset = () => {
+    this.disable();
+    this.removeAllListener();
+    this.ignoredHosts = undefined;
+    this.ignoredUrls = undefined;
+    this.ignoredPatterns = undefined;
+    this.allRequests.clear();
+  };
+}
+
+const SafeHTTPInterceptor = createClassWithErrorHandling(HTTPInterceptor)
+const httpInterceptor = new SafeHTTPInterceptor();
+export {
+  type StartNetworkLoggingOptions,
+  httpInterceptor,
+  type EventName,
+  type RequestMethod,
+};

package/src/Server.ts

@@ -0,0 +1,166 @@
+import { hasPort, sleep } from "./utils";
+import Zeroconf from "react-native-zeroconf";
+import { getBaseData, getErrMsg, LOG_KEY } from "./common";
+import logger from "./logger";
+import md5 from 'crypto-js/md5';
+
+
+const DEFAULT_PORT = 27751;
+class Server {
+  private baseUrlObj: Record<string, string> = {};
+  private timeout: number;
+  private baseData: Record<string, any> = {};
+  private urlsListener: (
+    urls: string[],
+    urlsObj: Record<string, string>
+  ) => void;
+  private innerBaseData: Record<string, string> = {};
+
+  constructor(url?: string | Record<string, string>, timeout: number = 30000) {
+    if (typeof url === "string") {
+      this.updateUrl(url);
+    } else {
+      this.setBaseUrlObj(url ?? {});
+    }
+    this.timeout = timeout;
+    this.innerBaseData = getBaseData();
+    this.handleZeroConf();
+  }
+
+  addUrlsListener = (
+    onNewUrlCallback: (urls: string[], urlsObj: Record<string, string>) => void
+  ) => {
+    this.urlsListener = onNewUrlCallback;
+  };
+
+  private requestJoin = async (url: string, token: string) => {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json;charset=utf-8",
+      },
+      body: JSON.stringify({
+        token,
+        model: this.innerBaseData.model,
+        id: md5(JSON.stringify(this.innerBaseData)).toString(),
+      }),
+    });
+    if (response.status !== 200) {
+      return false;
+    }
+    const json = await response.json();
+
+    if (json.code !== 0) {
+      return false;
+    }
+    return true
+  }
+
+  private async handleZeroConf() {
+    try {
+      const Zeroconf = require("react-native-zeroconf")?.default;
+      if (!Zeroconf) {
+        return;
+      }
+      // @ts-ignore
+      const zeroconf: Zeroconf = new Zeroconf();
+      zeroconf.on("resolved", async (service) => {
+        try {
+          const { path, token } = service.txt ?? {};
+          if (!(path && token) || this.baseUrlObj[token]) {
+            return;
+          }
+          const url = `http://${service.host}:${service.port}`;
+          if (!(await this.requestJoin(`${url}${path}`, token))) {
+            return;
+          }
+          this.baseUrlObj[token] = url;
+          if (this.urlsListener) {
+            this.urlsListener(this.getUrls(), this.baseUrlObj);
+          }
+        } catch (error) {
+          logger.warn(LOG_KEY, "加入日志系统失败---", error);
+        }
+      });
+      zeroconf.scan("http", "tcp");
+    } catch (error: any) {
+      logger.warn(LOG_KEY, "zeroconf扫描或处理相关逻辑失败或者您根本就没有安装 react-native-zeroconf ，如果您没有安装，那么您将无法使用发现功能", error);
+    }
+  }
+
+  updateTimeout(timeout = 3000) {
+    this.timeout = timeout;
+  }
+
+  getUrls() {
+    return Object.values(this.baseUrlObj).map((e) => {
+      if (hasPort(e)) {
+        return e;
+      }
+      return `${e}:${DEFAULT_PORT}`;
+    });
+  }
+
+  private send = async (
+    path: string,
+    data: Record<string, any>
+  ): Promise<void> => {
+    const request = async (url: string, _data: Record<string, any>) => {
+      await Promise.race([
+        fetch(`${url}/${path}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json;charset=utf-8",
+          },
+          body: JSON.stringify(
+            { ...this.innerBaseData, ...this.baseData, ..._data },
+            (_, val) => {
+              if (val instanceof Error) {
+                return val.toString();
+              }
+              return val;
+            }
+          ),
+        }),
+        sleep(this.timeout, true),
+      ]);
+    };
+    try {
+      if (Object.keys(this.baseUrlObj).length === 0) {
+        return;
+      }
+      await Promise.all(this.getUrls().map(async (e) => request(e, data)));
+    } catch (error: any) {
+      Object.values(this.baseUrlObj).map(async (e) =>
+        request(e, getErrMsg(error)).catch((_) => {})
+      );
+    }
+  };
+
+  updateUrl(url: string) {
+    const tempUrl = url.includes("http") ? url : `http://${url}`;
+    if (!url) {
+      delete this.baseUrlObj["Default"];
+    } else {
+      this.baseUrlObj["Default"] = tempUrl;
+    }
+  }
+
+  setBaseUrlObj(urlObj: Record<string, string>) {
+    this.baseUrlObj = urlObj;
+  }
+
+  updateBaseData(data: Record<string, any>) {
+    this.baseData = data;
+  }
+
+  log = async (data: Record<string, any>) => {
+    return this.send("log", data);
+  };
+
+  network = async (data: Record<string, any>) => {
+    return this.send("network", data);
+  };
+}
+
+export default Server;

package/src/__mocks__/react-native/Libraries/Blob/FileReader.js

@@ -0,0 +1,45 @@
+class FileReader {
+  constructor() {
+    this.result = null;
+    this.error = null;
+    this.readyState = FileReader.EMPTY;
+  }
+
+  static EMPTY = 0;
+  static LOADING = 1;
+  static DONE = 2;
+
+  addEventListener(event, callback) {
+    this[`on${event}`] = callback;
+  }
+
+  removeEventListener(event, callback) {
+    if (this[`on${event}`] === callback) {
+      this[`on${event}`] = null;
+    }
+  }
+
+  readAsText(blob) {
+    this._read(blob, 'text');
+  }
+
+  readAsArrayBuffer(blob) {
+    this._read(blob, 'arraybuffer');
+  }
+
+  _read(blob, resultType) {
+    this.readyState = FileReader.LOADING;
+    setTimeout(() => {
+      this.readyState = FileReader.DONE;
+      if (resultType === 'text') {
+        this.result = blob.text();
+      } else if (resultType === 'arraybuffer') {
+        // 这里我们简单地返回一个空的 ArrayBuffer
+        this.result = new ArrayBuffer(0);
+      }
+      if (this.onload) this.onload({target: this});
+    }, 0);
+  }
+}
+
+module.exports = FileReader;

package/src/__mocks__/react-native/Libraries/Network/XHRInterceptor.js

@@ -0,0 +1,39 @@
+// __mocks__/react-native/Libraries/XHRInterceptor.js
+
+class XHRInterceptor {
+  static _isInterceptorEnabled = false
+  static openCallback = null
+  static requestHeaderCallback = null
+  static headerReceivedCallback = null
+  static sendCallback = null
+  static responseCallback = null
+  
+  static setOpenCallback = jest.fn((callback) => {
+    XHRInterceptor.openCallback = callback;
+  })
+  static setRequestHeaderCallback = jest.fn((callback) => {
+    XHRInterceptor.requestHeaderCallback = callback;
+  })
+  static setHeaderReceivedCallback = jest.fn((callback) => {
+    XHRInterceptor.headerReceivedCallback = callback;
+  })
+  static setSendCallback = jest.fn((callback) => {
+    XHRInterceptor.sendCallback = callback;
+  })
+  static setResponseCallback = jest.fn((callback) => {
+    XHRInterceptor.responseCallback = callback;
+  })
+  
+  static enableInterception = jest.fn(() => {
+    XHRInterceptor._isInterceptorEnabled = true;
+  })
+  
+  static disableInterception = jest.fn(() => {
+    XHRInterceptor._isInterceptorEnabled = false;
+  })
+  
+  static isInterceptorEnabled = jest.fn(() => XHRInterceptor._isInterceptorEnabled)
+};
+
+module.exports = XHRInterceptor;
+