npm - @zchi/z-expo-axios-debugger - Versions diffs - 1.0.0 - Mend

@zchi/z-expo-axios-debugger 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (377) hide show

package/dist/index.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>@zchi/z-expo-axios-debugger-webui</title>
+    <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
+    <style id="expo-reset">
+      /* These styles make the body full-height */
+      html,
+      body {
+        height: 100%;
+      }
+      /* These styles disable body scrolling if you are using <ScrollView> */
+      body {
+        overflow: hidden;
+      }
+      /* These styles make the root element full-height */
+      #root {
+        display: flex;
+        height: 100%;
+        flex: 1;
+      }
+    </style>
+  <link rel="preload" href="/_expo/plugins/@zchi/z-expo-axios-debugger/_expo/static/css/tableCell.module-3305842bdff759fe9eec469d0cdcda1b.css" as="style"><link rel="stylesheet" href="/_expo/plugins/@zchi/z-expo-axios-debugger/_expo/static/css/tableCell.module-3305842bdff759fe9eec469d0cdcda1b.css"></head>
+  <body>
+    <!-- Use static rendering with Expo Router to support running without JavaScript. -->
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <!-- The root element for your Expo app. -->
+    <div id="root"></div>
+  <script src="/_expo/plugins/@zchi/z-expo-axios-debugger/_expo/static/js/web/index-985d968857e4904cc144f8ea955e4c42.js" defer></script>
+</body>
+</html>

package/dist/metadata.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":0,"bundler":"metro","fileMetadata":{}}

package/expo-module.config.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "platforms": ["devtools"],
+  "devtools": {
+    "webpageRoot": "dist"
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,61 @@
+{
+  "name": "@zchi/z-expo-axios-debugger",
+  "version": "1.0.0",
+  "description": "Expo DevTools Plugin for Axios Debugging, Compatible with Expo@50.0.8",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "dist": "rm -rf dist && cd webui && npx expo export -p web --output-dir ../dist && cd .. && node  scripts/update-script-path.js",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "update-script-path": "node scripts/update-script-path.js"
+  },
+  "keywords": [
+    "expo",
+    "devtools"
+  ],
+  "files": [
+    "build",
+    "dist",
+    "expo-module.config.json",
+    "src"
+  ],
+  "author": "jthoward64",
+  "license": "MIT",
+  "devDependencies": {
+    "@expo/spawn-async": "^1.7.2",
+    "@tsconfig/node20": "^20.1.2",
+    "axios": "^1.8.4",
+    "copy": "^0.3.2",
+    "expo": "50.0.8",
+    "expo-module-scripts": "^3.1.0",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "expo": "*"
+  },
+  "packageManager": "yarn@3.5.0",
+  "dependencies": {
+    "@ant-design/icons": "^6.1.1",
+    "@expo/metro-runtime": "3.1.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "antd": "^6.3.5",
+    "copy-to-clipboard": "^3.3.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.73.2",
+    "react-native-device-info": "^14.0.4",
+    "react-native-web": "~0.19.6",
+    "react-syntax-highlighter": "^15.6.1"
+  }
+}

package/src/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export let useAxiosDebugger: typeof import('./useAxiosDebugger').useAxiosDebugger;
+// @ts-ignore process.env.NODE_ENV is defined by metro transform plugins
+if (process.env.NODE_ENV !== 'production') {
+  useAxiosDebugger = require('./useAxiosDebugger').useAxiosDebugger;
+} else {
+  useAxiosDebugger = () => ({
+    getAllRequests: () => [],
+    filterRequestsByUrl: () => [],
+    clearRequests: () => {}
+  });
+}

package/src/useAxiosDebugger.ts ADDED Viewed

@@ -0,0 +1,390 @@
+import { useDevToolsPluginClient, type EventSubscription } from "expo/devtools";
+import { useCallback, useEffect, useState } from "react";
+import { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig, AxiosRequestConfig } from "axios";
+import { Method } from "../methods";
+// 请求记录接口定义
+interface AxiosRequestRecord {
+  id: string;
+  timestamp: number;
+  method: string;
+  url: string;
+  host: string;
+  path: string;
+  query: string;
+  requestHeaders: Record<string, any>;
+  requestData: any;
+  requestParams: any;
+  status?: number;
+  responseHeaders?: Record<string, any>;
+  responseData?: any;
+  duration?: number;
+  error?: string;
+}
+/**
+ * 这个 hook 为 Axios 注册一个调试插件。
+ *
+ * 该插件提供了查看所有 Axios 请求和响应的能力。
+ *
+ * @param axiosInstance - 要调试的 Axios 实例
+ * @param options
+ * @param options.errorHandler - 处理与调试工具通信时发生的任何错误的函数，如果未提供，则忽略错误。强烈建议设置此项。
+ * @param options.disabled - 是否禁用调试工具
+ */
+export function useAxiosDebugger(
+  axiosInstance: AxiosInstance,
+  {
+    errorHandler,
+    disabled,
+  }: {
+    errorHandler?: (error: Error) => void;
+    disabled?: boolean;
+  } = {}
+) {
+  const [init, setInit] = useState(false);
+  const client = useDevToolsPluginClient("z-expo-axios-debugger");
+  const [deviceId, setDeviceId] = useState<string | null>(null);
+  // 存储所有请求记录
+  const [requestRecords] = useState<Map<string, AxiosRequestRecord>>(new Map());
+  if (!init) {
+    console.log("[AxiosDebugger] 初始化");
+    setInit(true);
+  }
+  // 获取设备ID
+  useEffect(() => {
+    const getDeviceId = () => {
+      try {
+        const DeviceInfo = require("react-native-device-info");
+        // 直接使用设备信息生成设备ID
+        const deviceName = DeviceInfo.getDeviceNameSync() || "未知设备";
+        const deviceModel = DeviceInfo.getModel() || "未知型号";
+        const deviceUniqueId = DeviceInfo.getUniqueIdSync();
+        const id = `${deviceName}-${deviceModel}-${deviceUniqueId}`;
+        setDeviceId(id);
+        // 如果已连接，则向webui端注册设备
+        if (client?.isConnected()) {
+          console.log("requestZAxiosRegister", id);
+          client.sendMessage("requestZAxiosRegister", {
+            deviceId: id,
+            deviceInfo: {
+              name: DeviceInfo.getDeviceNameSync() || "未知设备",
+              model: DeviceInfo.getModel() || "未知型号",
+              osName: DeviceInfo.getSystemName() || "未知系统",
+              osVersion: DeviceInfo.getSystemVersion() || "未知版本",
+            },
+          });
+        }
+      } catch (error) {
+        console.error("获取设备ID失败", error);
+        errorHandler?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
+    };
+    // 只获取一次设备ID
+    getDeviceId();
+  }, [client, errorHandler]);
+  const handleError = useCallback(
+    (error: unknown) => {
+      if (error instanceof Error) {
+        errorHandler?.(error);
+      } else {
+        errorHandler?.(new Error(`未知错误: ${String(error)}`));
+      }
+    },
+    [errorHandler]
+  );
+  // 生成唯一ID
+  const generateRequestId = useCallback(() =>
+    `req_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`, []);
+  // 设置拦截器
+  useEffect(() => {
+    if (!axiosInstance || disabled) return;
+    // 添加请求拦截器
+    const requestInterceptor = axiosInstance.interceptors.request.use(
+      (config: InternalAxiosRequestConfig) => {
+        const requestId = generateRequestId();
+        // 解析URL
+        let url: URL;
+        try {
+          if (config.baseURL && !config.url?.startsWith('http')) {
+            url = new URL(config.url || '', config.baseURL);
+          } else {
+            url = new URL(config.url || '');
+          }
+        } catch (error) {
+          const urlString = config.url || '';
+          const [pathname, search] = urlString.split('?');
+          url = {
+            host: 'unknown',
+            pathname: pathname || urlString,
+            search: search ? `?${search}` : '',
+            toString: () => urlString,
+          } as any;
+        }
+        // 创建请求记录
+        const record: AxiosRequestRecord = {
+          id: requestId,
+          timestamp: Date.now(),
+          method: (config.method || 'GET').toUpperCase(),
+          url: url.toString(),
+          host: url.host,
+          path: url.pathname,
+          query: url.search,
+          requestHeaders: config.headers || {},
+          requestData: config.data,
+          requestParams: config.params,
+        };
+        // 存储请求记录
+        requestRecords.set(requestId, record);
+        // 在请求配置中添加ID
+        // if (!config.headers) config.headers = {};
+        (config.headers as any)['X-Request-ID'] = requestId;
+        // 发送请求开始事件到调试工具
+        client?.sendMessage('axios-request-start', {
+          ...record,
+          deviceId,
+        });
+        return config;
+      },
+      (error) => {
+        handleError(error);
+        return Promise.reject(error);
+      }
+    );
+    // 添加响应拦截器
+    const responseInterceptor = axiosInstance.interceptors.response.use(
+      (response: AxiosResponse) => {
+        const requestId = (response.config.headers as any)['X-Request-ID'];
+        const record = requestRecords.get(requestId);
+        if (record) {
+          // 更新请求记录
+          const updatedRecord: AxiosRequestRecord = {
+            ...record,
+            status: response.status,
+            responseHeaders: response.headers,
+            responseData: response.data,
+            duration: Date.now() - record.timestamp,
+          };
+          // 更新存储
+          requestRecords.set(requestId, updatedRecord);
+          // 发送请求完成事件到调试工具
+          client?.sendMessage('axios-request-complete', {
+            ...updatedRecord,
+            deviceId,
+          });
+        }
+        return response;
+      },
+      (error) => {
+        if (error.config) {
+          const requestId = (error.config.headers as any)['X-Request-ID'];
+          const record = requestRecords.get(requestId);
+          if (record) {
+            // 更新请求记录
+            const updatedRecord: AxiosRequestRecord = {
+              ...record,
+              status: error.response?.status,
+              responseHeaders: error.response?.headers,
+              responseData: error.response?.data,
+              duration: Date.now() - record.timestamp,
+              error: error.message,
+            };
+            // 更新存储
+            requestRecords.set(requestId, updatedRecord);
+            // 发送请求错误事件到调试工具
+            client?.sendMessage('axios-request-error', {
+              ...updatedRecord,
+              deviceId,
+            });
+          }
+        }
+        handleError(error);
+        return Promise.reject(error);
+      }
+    );
+    // 在组件卸载时移除拦截器
+    return () => {
+      axiosInstance.interceptors.request.eject(requestInterceptor);
+      axiosInstance.interceptors.response.eject(responseInterceptor);
+    };
+  }, [axiosInstance, disabled, deviceId, generateRequestId, requestRecords, client, handleError]);
+  // 处理来自调试工具的消息
+  useEffect(() => {
+    if (!client || disabled) return;
+    const on = (
+      event: Method,
+      listener: (params: {
+        urlPattern?: string;
+        targetDeviceId?: string;
+      }) => Promise<any>
+    ) =>
+      client?.addMessageListener(
+        event,
+        async (params: {
+          urlPattern?: string;
+          targetDeviceId?: string;
+        }) => {
+          try {
+            // 检查消息是否是发给当前设备的
+            if (params.targetDeviceId && params.targetDeviceId !== deviceId) {
+              // 不是发给当前设备的消息，忽略
+              return;
+            }
+            const result = await listener(params);
+            console.log("client?.connectionInfo", client?.connectionInfo);
+            client?.sendMessage(`ack:${event}`, {
+              result,
+              clientId: client?.connectionInfo,
+              deviceId, // 在响应中包含设备ID
+            });
+          } catch (error) {
+            try {
+              client?.sendMessage("error", { error });
+              handleError(error);
+            } catch (e) {
+              handleError(e);
+            }
+          }
+        }
+      );
+    const subscriptions: EventSubscription[] = [];
+    try {
+      // 获取所有请求记录
+      subscriptions.push(
+        on("getAllAxiosRequests", async () => {
+          console.log("收到 getAllAxiosRequests 请求");
+          try {
+            const records = Array.from(requestRecords.values());
+            return records;
+          } catch (error) {
+            console.error("获取Axios请求记录失败", error);
+            handleError(error);
+            return [];
+          }
+        })
+      );
+    } catch (e) {
+      handleError(e);
+    }
+    try {
+      // 根据URL过滤请求记录
+      subscriptions.push(
+        on("filterAxiosRequests", async ({ urlPattern }) => {
+          console.log("收到 filterAxiosRequests 请求", urlPattern);
+          try {
+            if (!urlPattern) return [];
+            const records = Array.from(requestRecords.values()).filter(
+              (record) => record.url.includes(urlPattern)
+            );
+            return records;
+          } catch (error) {
+            console.error("过滤Axios请求记录失败", error);
+            handleError(error);
+            return [];
+          }
+        })
+      );
+    } catch (e) {
+      handleError(e);
+    }
+    try {
+      // 清除所有请求记录
+      subscriptions.push(
+        on("clearAxiosRequests", async () => {
+          console.log("收到 clearAxiosRequests 请求");
+          try {
+            requestRecords.clear();
+            return { success: true };
+          } catch (error) {
+            console.error("清除Axios请求记录失败", error);
+            handleError(error);
+            return { success: false };
+          }
+        })
+      );
+    } catch (e) {
+      handleError(e);
+    }
+    // 添加设备注册消息监听器
+    try {
+      subscriptions.push(
+        client.addMessageListener("requestZAxiosRegister", () => {
+          console.log("收到 requestZAxiosRegister 请求");
+          // 收到注册请求，发送设备信息
+          if (deviceId) {
+            const DeviceInfo = require("react-native-device-info");
+            const deviceInfo = {
+              name: DeviceInfo.getDeviceNameSync() || "未知设备",
+              model: DeviceInfo.getModel() || "未知型号",
+              osName: DeviceInfo.getSystemName() || "未知系统",
+              osVersion: DeviceInfo.getSystemVersion() || "未知版本",
+            };
+            client.sendMessage("ack:requestZAxiosRegister", {
+              deviceId,
+              deviceInfo,
+              clientId: client?.connectionInfo,
+            });
+          }
+        })
+      );
+    } catch (e) {
+      handleError(e);
+    }
+    return () => {
+      for (const subscription of subscriptions) {
+        try {
+          subscription?.remove();
+        } catch (e) {
+          handleError(e);
+        }
+      }
+    };
+  }, [client, deviceId, requestRecords, handleError, disabled]);
+  // 返回一些有用的方法，以便使用方可以手动操作
+  return {
+    getAllRequests: () => Array.from(requestRecords.values()),
+    filterRequestsByUrl: (urlPattern: string) =>
+      Array.from(requestRecords.values()).filter(record => record.url.includes(urlPattern)),
+    clearRequests: () => requestRecords.clear()
+  };
+}