@wutiange/log-listener-plugin 1.2.3 → 1.3.0-alpha.1

package/packages/network-logger/NetworkRequestInfo.ts

@@ -0,0 +1,161 @@
+// @ts-ignore
+import BlobFileReader from 'react-native/Libraries/Blob/FileReader';
+import type {Headers, NetworkRequestInfoRow, RequestMethod} from './types';
+import fromEntries from './utils/fromEntries';
+
+export default class NetworkRequestInfo {
+  id = '';
+  type = '';
+  url = '';
+  method: RequestMethod;
+  status: number = -1;
+  dataSent = '';
+  responseContentType = '';
+  responseSize = 0;
+  requestHeaders: Headers = {};
+  responseHeaders: Headers = {};
+  response = '';
+  responseURL = '';
+  responseType = '';
+  timeout = 0;
+  closeReason = '';
+  messages = '';
+  serverClose: any = undefined;
+  serverError: any = undefined;
+  startTime: number = 0;
+  endTime: number = 0;
+  gqlOperation?: string;
+  updatedAt: number = 0;
+
+  constructor(id: string, type: string, method: RequestMethod, url: string) {
+    this.id = id;
+    this.type = type;
+    this.method = method;
+    this.url = url;
+    this.updatedAt = Date.now();
+  }
+
+  get duration() {
+    return this.endTime - this.startTime;
+  }
+
+  get curlRequest() {
+    let headersPart =
+      this.requestHeaders &&
+      Object.entries(this.requestHeaders)
+        .map(([key, value]) => `'${key}: ${this.escapeQuotes(value)}'`)
+        .join(' -H ');
+    headersPart = headersPart ? `-H ${headersPart}` : '';
+
+    const body = this.dataSent && this.escapeQuotes(this.dataSent);
+
+    const methodPart =
+      this.method !== 'GET' ? `-X${this.method.toUpperCase()}` : '';
+    const bodyPart = body ? `-d '${body}'` : '';
+
+    const parts = ['curl', methodPart, headersPart, bodyPart, `'${this.url}'`];
+
+    return parts.filter(Boolean).join(' ');
+  }
+
+  update(values: Partial<NetworkRequestInfo>) {
+    Object.assign(this, values);
+    if (values.dataSent) {
+      const data = this.parseData(values.dataSent);
+      this.gqlOperation = data?.operationName;
+    }
+    this.updatedAt = Date.now();
+  }
+
+  private escapeQuotes(value: string) {
+    return value.replace?.(/'/g, "\\'");
+  }
+
+  private parseData(data: any) {
+    try {
+      if (data?._parts?.length) {
+        return fromEntries(data?._parts);
+      }
+      return JSON.parse(data);
+    } catch (e) {
+      return {data};
+    }
+  }
+
+  private stringifyFormat(data: any) {
+    return JSON.stringify(this.parseData(data), null, 2);
+  }
+
+  public toRow(): NetworkRequestInfoRow {
+    return {
+      url: this.url,
+      gqlOperation: this.gqlOperation,
+      id: this.id,
+      method: this.method,
+      status: this.status,
+      duration: this.duration,
+      startTime: this.startTime,
+    };
+  }
+
+  getRequestBody(replaceEscaped = false) {
+    const body = this.stringifyFormat(this.dataSent);
+
+    if (replaceEscaped) {
+      return body.replace(/\\n/g, '\n').replace(/\\"/g, '"');
+    }
+
+    return body;
+  }
+
+  private async parseResponseBlob() {
+    const blobReader = new BlobFileReader();
+    blobReader.readAsText(this.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);
+    });
+  }
+
+  async getResponseBody() {
+    const body = await (this.responseType !== 'blob'
+      ? this.response
+      : this.parseResponseBlob());
+
+    return this.stringifyFormat(body);
+  }
+
+  public copy(): NetworkRequestInfo {
+    const newInstance = new NetworkRequestInfo(this.id, this.type, this.method, this.url);
+    
+    // 复制基本类型属性
+    newInstance.status = this.status;
+    newInstance.dataSent = this.dataSent;
+    newInstance.responseContentType = this.responseContentType;
+    newInstance.responseSize = this.responseSize;
+    newInstance.response = this.response;
+    newInstance.responseURL = this.responseURL;
+    newInstance.responseType = this.responseType;
+    newInstance.timeout = this.timeout;
+    newInstance.closeReason = this.closeReason;
+    newInstance.messages = this.messages;
+    newInstance.serverClose = this.serverClose;
+    newInstance.serverError = this.serverError;
+    newInstance.startTime = this.startTime;
+    newInstance.endTime = this.endTime;
+    newInstance.gqlOperation = this.gqlOperation;
+    newInstance.updatedAt = this.updatedAt;
+
+    // 深拷贝对象类型属性
+    newInstance.requestHeaders = JSON.parse(JSON.stringify(this.requestHeaders));
+    newInstance.responseHeaders = JSON.parse(JSON.stringify(this.responseHeaders));
+
+    return newInstance;
+  }
+}

package/packages/network-logger/constant.ts

@@ -0,0 +1,3 @@
+// StartNetworkLoggingOptions
+export const LOGGER_MAX_REQUESTS: number = 500;
+export const LOGGER_REFRESH_RATE: number = 50;

package/packages/network-logger/types.ts

@@ -0,0 +1,36 @@
+import NetworkRequestInfo from './NetworkRequestInfo';
+
+export type Headers = {[header: string]: string};
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+export type StartNetworkLoggingOptions = {
+  /**
+   * Max number of requests to keep before overwriting
+   * @default 500
+   */
+  maxRequests?: number;
+  /** 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;
+  /**
+   * Refresh rate of the logger in milliseconds
+   * @default 50
+   */
+  refreshRate?: number;
+};
+
+export type NetworkRequestInfoRow = Pick<
+  NetworkRequestInfo,
+  'url' | 'gqlOperation' | 'id' | 'method' | 'status' | 'duration' | 'startTime'
+>;

package/packages/network-logger/utils/debounce.ts

@@ -0,0 +1,21 @@
+// https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_debounce
+function debounce(func: Function, wait: number, immediate: boolean = false) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  return function () {
+    const args = arguments;
+    clearTimeout(timeout);
+    // @ts-ignore
+    if (immediate && !timeout) {
+      func.apply(this, args);
+    }
+    timeout = setTimeout(function () {
+      timeout = undefined;
+      // @ts-ignore
+      if (!immediate) {
+        func.apply(this, args);
+      }
+    }, wait);
+  };
+}
+
+export default debounce;

package/packages/network-logger/utils/extractHost.ts

@@ -0,0 +1,7 @@
+const extractHost = (url: string) => {
+  const host = url.split('//')[1]?.split(':')[0]?.split('/')[0] || undefined;
+
+  return host;
+};
+
+export default extractHost;

package/packages/network-logger/utils/fromEntries.ts

@@ -0,0 +1,7 @@
+const fromEntries = (arr: any[]) =>
+  arr.reduce((acc, [k, v]) => {
+    acc[k] = v;
+    return acc;
+  }, {});
+
+export default fromEntries;

package/packages/network-logger/utils/logger.ts

@@ -0,0 +1,2 @@
+export const warn = (message: string) => 
+  console.warn(`react-native-network-logger: ${message}`);

package/src/CompatibilityManager.ts

@@ -0,0 +1,71 @@
+import NetworkRequestInfo from "../packages/network-logger/NetworkRequestInfo";
+
+class CompatibilityManager {
+  private static requestInfoObj: Record<string, NetworkRequestInfo> = {}
+  static async interceptionToNetwork(data: NetworkRequestInfo[]) {
+    const tempWillSendArr: NetworkRequestInfo[] = []
+    if (Object.keys(CompatibilityManager.requestInfoObj).length === 0) {
+      CompatibilityManager.requestInfoObj = data.reduce((e, c) => {
+        if (c.endTime) {
+          const startReq = c.copy()
+          startReq.endTime = 0;
+          tempWillSendArr.push(startReq, c)
+          return e
+        }
+        tempWillSendArr.push(c)
+        return {...e, [c.id]: c}
+      }, {})
+    } else {
+      data.forEach(e => {
+        const tempObj = CompatibilityManager.requestInfoObj
+        if (!(e.id in tempObj)) {
+          if (!e.endTime) {
+            tempWillSendArr.push(e)
+            CompatibilityManager.requestInfoObj[e.id] = e
+          } else {
+            const startReq = e.copy()
+            startReq.endTime = 0;
+            tempWillSendArr.push(startReq, e)
+          }
+          return
+        }
+        if (e.id in tempObj && e.endTime) {
+          tempWillSendArr.push(e)
+          delete CompatibilityManager.requestInfoObj[e.id]
+          return
+        }
+      })
+    }
+
+    // 将要发送的数据转换成兼容的数据
+    return CompatibilityManager.asyncSwapSendArr(tempWillSendArr)
+  }
+
+  private static async asyncSwapSendArr(data: NetworkRequestInfo[]) {
+    const asyncTempArr = await Promise.all(data.map(async (e) => {
+      if (e.endTime) {
+        return {
+          headers: e.responseHeaders,
+          body: await e.getResponseBody(),
+          requestId: e.id,
+          statusCode: e.status,
+          endTime: e.endTime,
+        };
+      } else {
+        return {
+          url: e.url,
+          id: e.id,
+          method: e.method,
+          headers: e.requestHeaders,
+          body: e.getRequestBody(),
+          createTime: e.startTime,
+        };
+      }
+    }));
+  
+    return asyncTempArr;
+  }  
+}
+
+
+export default CompatibilityManager

package/src/__tests__/console.test.ts

@@ -1,5 +1,5 @@
-import '../console'
-import logger from '../index'
+import '../../console'
+import logger from '../../index'
 describe("重写日志", () => {
   it("log 没有提前设置 url", () => {
     console.log("log 是否正常打印")

package/src/common.ts

@@ -1,5 +1,4 @@
-export const [log, warn, error] = [console.log, console.warn, console.error]
-
+export const [log, warn, error] = [console.log, console.warn, console.error];
 
 // @ts-ignore
-export const tempFetch = global.fetch as typeof fetch
+export const tempFetch = global.fetch as typeof fetch;

package/src/logPlugin.ts

@@ -0,0 +1,229 @@
+import Server from './server';
+import Logger from '../packages/network-logger/Logger';
+import NetworkRequestInfo from '../packages/network-logger/NetworkRequestInfo';
+import { extractDomain } from './utils';
+import CompatibilityManager from './CompatibilityManager';
+
+class LogPlugin {
+  private server: Server | null = null;
+  private baseData: Record<string, any> = {};
+  private timeout: number | null = null;
+  private networkLogger = new Logger();
+  private host = '';
+  private isAuto = false
+
+  auto() {
+    if (this.host) {
+      this.startRecordNetwork();
+      this.startRecordLog();
+    }
+    this.isAuto = true
+  }
+
+  unAuto() {
+    this.stopRecordLog()
+    this.networkLogger.disableXHRInterception()
+    this.isAuto = false
+  }
+
+  startRecordLog() {
+    const common = require('./common')
+    console.log = (...data: any[]) => {
+      this.log(...data);
+      common.log(...data);
+    };
+
+    console.warn = (...data: any[]) => {
+      this.warn(...data);
+      common.warn(...data);
+    };
+
+    console.error = (...data: any[]) => {
+      this.error(...data);
+      common.error(...data);
+    };
+  }
+
+  stopRecordLog() {
+    const common = require('./common')
+    console.log = common.log
+    console.warn = common.warn
+    console.error = common.error
+  }
+
+  startRecordNetwork() {
+    this.networkLogger.setCallback(async (data: NetworkRequestInfo[]) => {
+      const sendData = await CompatibilityManager.interceptionToNetwork(data);
+      sendData.forEach(e => {
+        this.server?.network({
+          ...this.baseData,
+          ...e
+        });
+      })
+    });
+
+    this.networkLogger.enableXHRInterception({
+      ignoredHosts: [extractDomain(this.host)],
+    });
+  }
+
+  setBaseUrl(url: string) {
+    if (!url?.trim()) {
+      this.networkLogger.disableXHRInterception()
+      this.stopRecordLog()
+      return
+    }
+    this.host = url.includes("http") ? url : `http://${url}`;
+    if (this.server) {
+      this.server.updateUrl(url);
+    } else {
+      this.server = new Server(url);
+    }
+    if (this.isAuto) {
+      this.startRecordNetwork();
+      this.startRecordLog()
+    }
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  setTimeout(timeout: number) {
+    if (typeof timeout === 'number') {
+      this.timeout = timeout;
+      this.server?.updateTimeout(this.timeout);
+    }
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  getTimeout() {
+    if (typeof this.timeout === 'number') {
+      return this.timeout;
+    }
+    return null;
+  }
+
+  setBaseData(data: Record<string, any> = {}) {
+    this.baseData = data;
+  }
+
+  private _log(level: string, tag: string, ...data: any[]) {
+    const sendData = {
+      ...this.baseData,
+      message: data,
+      tag,
+      level: level ?? 'log',
+      createTime: Date.now(),
+    };
+    this.server?.log(sendData);
+  }
+
+  tag(tag: string, ...data: any[]) {
+    this._log('log', tag, ...data);
+  }
+
+  log(...data: any[]) {
+    this._log('log', 'default', ...data);
+  }
+
+  warn(...data: any[]) {
+    this._log('warn', 'default', ...data);
+  }
+
+  error(...data: any[]) {
+    this._log('error', 'default', ...data);
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  async uniqueReq(
+    uniqueId: string | undefined,
+    input: RequestInfo | URL,
+    init?: RequestInit
+  ) {
+    let url: string | null = null;
+    let method = init?.method ?? 'get';
+    let headers = init?.headers;
+    let body = init?.body;
+    if (input instanceof Request) {
+      url = input.url;
+      method = input.method ?? 'get';
+      headers = (input.headers as Record<string, any>).map;
+      body = input.body;
+    } else if (input instanceof URL) {
+      url = input.href;
+    } else {
+      url = input;
+    }
+    return this.server?.network({
+      ...this.baseData,
+      url,
+      id: uniqueId,
+      method,
+      headers,
+      body,
+      createTime: Date.now(),
+    });
+  }
+
+  private async _res(uniqueId?: string, id?: number, response?: Response) {
+    const body = await response?.text();
+    return this.server?.network({
+      ...this.baseData,
+      headers: (response?.headers as Record<string, any>).map,
+      body,
+      requestId: uniqueId ?? Number(id),
+      statusCode: response?.status,
+      endTime: Date.now(),
+    });
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  async resTimeout(uniqueId: string) {
+    return this.server?.network({
+      ...this.baseData,
+      isTimeout: true,
+      requestId: uniqueId,
+    });
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  async resResponseError(uniqueId: string) {
+    return this.server?.network({
+      ...this.baseData,
+      isResponseError: true,
+      requestId: uniqueId,
+    });
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  async uniqueRes(uniqueId: string, response?: Response) {
+    return this._res(uniqueId, undefined, response);
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  async req(input: RequestInfo | URL, init?: RequestInit) {
+    return this.uniqueReq(undefined, input, init);
+  }
+
+  /**
+   * @deprecated 不需要手动上报，日志插件会自动收集日志
+   */
+  async res(id: number, response?: Response) {
+    return this._res(undefined, id, response);
+  }
+}
+const logPlugin = new LogPlugin();
+export { LogPlugin };
+export default logPlugin;

package/src/server.ts

@@ -1,61 +1,66 @@
-import { sleep } from "./utils";
-
+import {hasPort, sleep} from './utils';
+const DEFAULT_PORT = 27751
 class Server {
   private baseUrl = '';
-  private port = 27751
   private timeout: number;
 
-
   constructor(url: string, timeout: number = 3000) {
-    this.updateUrl(url)
-    this.timeout = timeout
+    this.updateUrl(url);
+    this.timeout = timeout;
   }
 
   updateTimeout(timeout = 3000) {
-    this.timeout = timeout
+    this.timeout = timeout;
+  }
+
+  private getPort() {
+    if (hasPort(this.baseUrl)) {
+      return ''
+    }
+    return DEFAULT_PORT;
   }
 
   private async send(path: string, data: Record<string, any>) {
     try {
       if (!this.baseUrl) {
-        return null
+        return null;
       }
-      const common = await import('./common.js')
+      const common = require('./common');
       const result = await Promise.race([
-        common.tempFetch(`${this.baseUrl}:${this.port}/${path}`, {
+        common.tempFetch(`${this.baseUrl}:${this.getPort()}/${path}`, {
           method: 'POST',
           headers: {
-            'Content-Type': 'application/json;charset=utf-8'
+            'Content-Type': 'application/json;charset=utf-8',
           },
           body: JSON.stringify(data, (_, val) => {
             if (val instanceof Error) {
-              return val.toString()
+              return val.toString();
             }
-            return val
-          })
+            return val;
+          }),
         }),
-        sleep(this.timeout, true)
-      ]) 
+        sleep(this.timeout, true),
+      ]);
       if (result instanceof Response) {
-        return result.text()
+        return result.text();
       }
-      return null
+      return null;
     } catch (error) {
-      return null
+      return null;
     }
   }
 
   updateUrl(url: string) {
-    this.baseUrl = url
+    this.baseUrl = url;
   }
 
   async log(data: Record<string, any>) {
-    return this.send("log", data)
+    return this.send('log', data);
   }
 
   async network(data: Record<string, any>) {
-    return this.send("network", data)
+    return this.send('network', data);
   }
 }
 
-export default Server
+export default Server;

package/src/utils.ts

@@ -7,3 +7,41 @@ export function sleep(ms: number, isReject: boolean = false) {
     }) : resolve, ms)
   })
 }
+
+export function extractDomain(url: string) {
+  // 如果 url 是空的或不是字符串，直接返回
+  if (!url || typeof url !== 'string') {
+    return url;
+  }
+
+  // 使用正则表达式匹配 URL
+  const match = url.match(/^(https?:\/\/)?([^/:]+)/i);
+
+  // 如果没有匹配到，返回原始输入
+  if (!match) {
+    return url;
+  }
+
+  // 返回匹配到的域名部分
+  return match[2];
+}
+
+
+export function hasPort(url: string) {
+  // 如果 url 是空的或不是字符串，返回 false
+  if (!url || typeof url !== 'string') {
+    return false;
+  }
+
+  try {
+    // 使用 URL 构造函数解析 URL
+    const parsedUrl = new URL(url);
+    
+    // 检查 port 属性是否为空
+    // 注意：如果使用默认端口（如 HTTP 的 80 或 HTTPS 的 443），port 会是空字符串
+    return parsedUrl.port !== '';
+  } catch (error) {
+    // 如果 URL 无效，捕获错误并返回 false
+    return false;
+  }
+}

package/dist/__tests__/console.test.d.ts

@@ -1 +0,0 @@
-import '../console';