@gz-fronted/gz-pc 0.1.2-beta.0 → 0.1.3-beta.0

package/README.md

@@ -126,7 +126,7 @@ function gzFetch<TResponse, TRequestParams = unknown>(
 | `paramsInUrl`      | `boolean`                              | 否   | 仅 DELETE 生效；为 `true` 时参数放入 Query |
 | `headers`          | `Record<string, string>`               | 否   | 本次请求附加的请求头                       |
 | `timeout`          | `number`                               | 否   | 本次请求超时时间，单位毫秒；优先于实例配置 |
-| `showErrorMessage` | `boolean`                              | 否   | 是否调用 gg-ui 的 `message.error`          |
+| `showErrorMessage` | `boolean`                              | 否   | 是否显示普通消息或 Debug Drawer 错误反馈   |
 | `skipAuth`         | `boolean`                              | 否   | 为 `true` 时跳过 Token 注入                |
 | `responseType`     | `'json' \| 'blob' \| 'text'`           | 否   | 响应数据类型，默认 `json`                  |
 | `signal`           | `AbortSignal`                          | 否   | 取消请求的标准 AbortSignal                 |
@@ -270,7 +270,7 @@ HTTP 非 `2xx` 时仅尝试读取响应体的 `msg`。没有有效 `msg` 时使
 - `CANCELED_ERROR`
 - `UNKNOWN_ERROR`
 
-错误 Message 默认开启，优先级为“单请求配置 > 实例配置 > 默认值 true”：
+错误反馈默认开启，优先级为“单请求配置 > 实例配置 > 默认值 true”：
 
 ```ts
 configureGzFetch({ showErrorMessage: true });
@@ -283,7 +283,7 @@ await gzFetch<void, SaveParams>({
 });
 ```
 
-取消请求会转换成 `CANCELED_ERROR`，且默认不调用 `message.error`：
+取消请求会转换成 `CANCELED_ERROR`，且默认不显示错误反馈：
 
 ```ts
 const controller = new AbortController();
@@ -326,7 +326,7 @@ configureGzFetch({
 | `modalMessage`   | `string`     | `当前登录状态已失效，请重新登录。`      |
 | `onUnauthorized` | `() => void` | 无；确认后使用 `window.location.assign` |
 
-为了让普通错误消息和 401 弹窗都继承宿主项目当前的 gg-ui 主题，需要在应用根部的
+为了让普通错误消息、Debug Drawer 和 401 弹窗都继承宿主项目当前的 gg-ui 主题，需要在应用根部的
 `ConfigProvider` 内挂载一次 `GzFetchFeedbackProvider`：
 
 ```tsx
@@ -340,12 +340,11 @@ import { ConfigProvider } from '@chenhui996/gg-ui';
 </ConfigProvider>;
 ```
 
-该 Provider 使用 `message.useMessage()` 和受控 gg-ui `Modal`，不会在已接入的项目中
-调用脱离 React 上下文的静态反馈 API。因此主题切换时，普通错误消息和 401 弹窗都会
-继续读取宿主 `ConfigProvider` 的主题 Token，无需复制亮色或暗色样式。业务页面不需要
-维护反馈状态。未挂载该 Provider 的已有项目仍会回退到原来的静态 `message.error`，
-不会产生 breaking change。`GzFetchUnauthorizedModal` 继续保留为兼容 API，但新项目
-优先使用统一 Provider。
+该 Provider 使用 `message.useMessage()`、受控 gg-ui `Modal` 和 `Drawer`，不会在已接入
+的项目中调用脱离 React 上下文的静态反馈 API。因此主题切换时，三类反馈都会继续读取
+宿主 `ConfigProvider` 的主题 Token。业务页面不需要维护反馈状态。未挂载该 Provider 的
+已有项目仍会回退到原来的静态 `message.error`，不会静默丢失错误提示。
+`GzFetchUnauthorizedModal` 继续保留为兼容 API，但新项目优先使用统一 Provider。
 
 所有由同一份 gz-pc 包创建的默认客户端和独立客户端共享一个 401 管理器。首个 401
 打开弹窗，后续并发 401 不会创建新弹窗；取消或弹窗关闭动画结束后会释放状态，后续
@@ -368,6 +367,24 @@ configureGzFetch({
 开启该能力后，401 仍会作为 `GzFetchError` 抛给调用方，但请求核心不会再为同一个
 401 额外调用普通 `message.error`。其他 HTTP 错误、网络错误、超时和取消请求行为不变。
 
+## Debug 错误反馈
+
+非 401 HTTP 异常的响应体包含对象类型的 `debug`，并且以下任一开关开启时，错误会进入
+Provider 内的 Debug Drawer，不再重复调用普通 `message.error`：
+
+- 当前 URL Query 包含 `showDebug=1`；
+- `localStorage.getItem('showDebug') === '1'`。
+
+该判断不依赖构建环境，并会安全处理无 `window`、无 `localStorage` 或存储访问被禁用的
+运行环境。Drawer 从右侧打开，在同一个列表中追加每一次错误且不去重；可逐条删除、全部
+清除或手动关闭。关闭 Drawer 不会清空列表，后续新错误会再次打开。每条记录展示错误
+摘要、请求 method/url，以及完整格式化的 `debug.request`、`debug.stackTrace` 和
+`debug.mdc`；缺失字段显示为空占位。
+
+`showErrorMessage: false` 会同时关闭普通错误消息和 Debug Drawer。HTTP 401 始终优先走
+原有 unauthorized 分支，不进入 Debug Drawer。未挂载 Provider 时会回退普通
+`message.error`，避免吞掉错误反馈。
+
 ## 中间件
 
 中间件的 `onRequest`、`onResponse` 和 `onError` 都按注册顺序执行，不采用洋葱

package/dist/fetch/index.cjs

@@ -10,6 +10,106 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 
 // src/fetch/client.ts
+
+// src/fetch/debug.ts
+var EMPTY_DEBUG_DRAWER_SNAPSHOT = {
+  activeHostId: void 0,
+  errors: [],
+  open: false
+};
+var debugErrorSequence = 0;
+var snapshot = EMPTY_DEBUG_DRAWER_SNAPSHOT;
+var listeners = /* @__PURE__ */ new Set();
+var drawerHosts = /* @__PURE__ */ new Set();
+var emitChange = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var setSnapshot = (nextSnapshot) => {
+  snapshot = nextSnapshot;
+  emitChange();
+};
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var getResponseDebugInfo = (responseData) => {
+  if (!isRecord(responseData) || !isRecord(responseData.debug)) {
+    return void 0;
+  }
+  return responseData.debug;
+};
+var isDebugEnabled = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  try {
+    if (new URLSearchParams(window.location.search).get("showDebug") === "1") {
+      return true;
+    }
+  } catch (e) {
+  }
+  try {
+    return window.localStorage.getItem("showDebug") === "1";
+  } catch (e) {
+    return false;
+  }
+};
+var subscribeDebugDrawer = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var getDebugDrawerSnapshot = () => snapshot;
+var getDebugDrawerServerSnapshot = () => EMPTY_DEBUG_DRAWER_SNAPSHOT;
+var registerDebugDrawerHost = (hostId) => {
+  drawerHosts.add(hostId);
+  if (snapshot.activeHostId === void 0) {
+    setSnapshot({ ...snapshot, activeHostId: hostId });
+  }
+  return () => {
+    drawerHosts.delete(hostId);
+    if (snapshot.activeHostId !== hostId) {
+      return;
+    }
+    const nextHost = drawerHosts.values().next();
+    setSnapshot({
+      ...snapshot,
+      activeHostId: nextHost.done ? void 0 : nextHost.value
+    });
+  };
+};
+var showFetchDebugError = (input) => {
+  if (snapshot.activeHostId === void 0) {
+    return false;
+  }
+  debugErrorSequence += 1;
+  setSnapshot({
+    ...snapshot,
+    errors: [
+      ...snapshot.errors,
+      {
+        ...input,
+        id: `${Date.now()}-${debugErrorSequence}`
+      }
+    ],
+    open: true
+  });
+  return true;
+};
+var closeDebugDrawer = () => {
+  if (snapshot.open) {
+    setSnapshot({ ...snapshot, open: false });
+  }
+};
+var removeDebugError = (id) => {
+  setSnapshot({
+    ...snapshot,
+    errors: snapshot.errors.filter((error) => error.id !== id)
+  });
+};
+var clearDebugErrors = () => {
+  if (snapshot.errors.length > 0) {
+    setSnapshot({ ...snapshot, errors: [] });
+  }
+};
 var GzFetchError = class extends Error {
   constructor(message3, options) {
     super(message3);
@@ -125,17 +225,17 @@ var DEFAULT_UNAUTHORIZED_LOGIN_URL = "/login";
 var DEFAULT_UNAUTHORIZED_MODAL_TITLE = "登录失效";
 var DEFAULT_UNAUTHORIZED_MODAL_MESSAGE = "当前登录状态已失效，请重新登录。";
 var IDLE_SNAPSHOT = { phase: "idle" };
-var snapshot = IDLE_SNAPSHOT;
-var listeners = /* @__PURE__ */ new Set();
+var snapshot2 = IDLE_SNAPSHOT;
+var listeners2 = /* @__PURE__ */ new Set();
 var modalHosts = /* @__PURE__ */ new Set();
-var emitChange = () => {
-  for (const listener of listeners) {
+var emitChange2 = () => {
+  for (const listener of listeners2) {
     listener();
   }
 };
-var setSnapshot = (nextSnapshot) => {
-  snapshot = nextSnapshot;
-  emitChange();
+var setSnapshot2 = (nextSnapshot) => {
+  snapshot2 = nextSnapshot;
+  emitChange2();
 };
 var resolveUnauthorizedOptions = (options) => {
   var _a, _b, _c, _d;
@@ -147,66 +247,66 @@ var resolveUnauthorizedOptions = (options) => {
     ...(options == null ? void 0 : options.onUnauthorized) === void 0 ? {} : { onUnauthorized: options.onUnauthorized }
   };
 };
-var getUnauthorizedSnapshot = () => snapshot;
+var getUnauthorizedSnapshot = () => snapshot2;
 var getUnauthorizedServerSnapshot = () => IDLE_SNAPSHOT;
 var subscribeUnauthorized = (listener) => {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
 };
 var registerUnauthorizedModalHost = (hostId) => {
   modalHosts.add(hostId);
-  if (snapshot.activeHostId === void 0) {
-    setSnapshot({ ...snapshot, activeHostId: hostId });
+  if (snapshot2.activeHostId === void 0) {
+    setSnapshot2({ ...snapshot2, activeHostId: hostId });
   }
   return () => {
     modalHosts.delete(hostId);
-    if (snapshot.activeHostId !== hostId) {
+    if (snapshot2.activeHostId !== hostId) {
       return;
     }
     const nextHost = modalHosts.values().next();
     const nextHostId = nextHost.done ? void 0 : nextHost.value;
-    if (snapshot.phase === "closing") {
-      setSnapshot(
+    if (snapshot2.phase === "closing") {
+      setSnapshot2(
         nextHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: nextHostId, phase: "idle" }
       );
       return;
     }
     if (nextHostId === void 0) {
-      setSnapshot(
-        snapshot.options === void 0 ? { phase: snapshot.phase } : { options: snapshot.options, phase: snapshot.phase }
+      setSnapshot2(
+        snapshot2.options === void 0 ? { phase: snapshot2.phase } : { options: snapshot2.options, phase: snapshot2.phase }
       );
       return;
     }
-    setSnapshot({ ...snapshot, activeHostId: nextHostId });
+    setSnapshot2({ ...snapshot2, activeHostId: nextHostId });
   };
 };
 var openUnauthorizedModal = (options) => {
-  if (!options.enabled || snapshot.phase !== "idle") {
+  if (!options.enabled || snapshot2.phase !== "idle") {
     return false;
   }
-  setSnapshot({
-    ...snapshot.activeHostId === void 0 ? {} : { activeHostId: snapshot.activeHostId },
+  setSnapshot2({
+    ...snapshot2.activeHostId === void 0 ? {} : { activeHostId: snapshot2.activeHostId },
     options,
     phase: "open"
   });
   return true;
 };
 var beginCloseUnauthorizedModal = () => {
-  if (snapshot.phase !== "open" || snapshot.options === void 0) {
+  if (snapshot2.phase !== "open" || snapshot2.options === void 0) {
     return void 0;
   }
-  const { options } = snapshot;
-  setSnapshot({ ...snapshot, phase: "closing" });
+  const { options } = snapshot2;
+  setSnapshot2({ ...snapshot2, phase: "closing" });
   return options;
 };
 var cancelUnauthorizedModal = () => beginCloseUnauthorizedModal() !== void 0;
 var confirmUnauthorizedModal = () => beginCloseUnauthorizedModal();
 var completeUnauthorizedModal = () => {
-  if (snapshot.phase !== "closing") {
+  if (snapshot2.phase !== "closing") {
     return;
   }
-  setSnapshot(
-    snapshot.activeHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: snapshot.activeHostId, phase: "idle" }
+  setSnapshot2(
+    snapshot2.activeHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: snapshot2.activeHostId, phase: "idle" }
   );
 };
 var executeUnauthorizedAction = (options, navigate = (loginUrl) => window.location.assign(loginUrl)) => {
@@ -285,7 +385,16 @@ function createGzFetch(options = {}) {
       await runErrorMiddlewares(error, { config: currentConfig }, middlewares);
       const shouldShowError = (_a2 = currentConfig.showErrorMessage) != null ? _a2 : showInstanceErrorMessage;
       if (shouldShowError && error.type !== "CANCELED_ERROR" && !shouldHandleUnauthorized) {
-        showFetchErrorMessage(error.message);
+        const debugInfo = error.type === "HTTP_ERROR" && error.status !== 401 && isDebugEnabled() ? getResponseDebugInfo(error.responseData) : void 0;
+        const didShowDebugError = debugInfo === void 0 ? false : showFetchDebugError({
+          debug: debugInfo,
+          message: error.message,
+          method: currentConfig.method,
+          url: currentConfig.url
+        });
+        if (!didShowDebugError) {
+          showFetchErrorMessage(error.message);
+        }
       }
       throw error;
     }
@@ -320,18 +429,133 @@ async function gzFetch(config) {
   }
   return defaultClient(config);
 }
+var EMPTY_DEBUG_VALUE = "（无）";
+var formatDebugValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (value === void 0 || value === null) {
+    return EMPTY_DEBUG_VALUE;
+  }
+  try {
+    const serialized = JSON.stringify(value, null, 2);
+    return serialized != null ? serialized : "（无法序列化）";
+  } catch (e) {
+    return "（无法序列化）";
+  }
+};
+var codeStyle = {
+  background: "rgba(127, 127, 127, 0.08)",
+  borderRadius: 6,
+  margin: "8px 0 0",
+  overflowWrap: "anywhere",
+  overflowX: "auto",
+  padding: 12,
+  whiteSpace: "pre-wrap"
+};
+var DebugSection = ({
+  title,
+  value
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16 }, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: title }),
+  /* @__PURE__ */ jsxRuntime.jsx("pre", { style: codeStyle, children: formatDebugValue(value) })
+] });
+var DebugError = ({ error }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "section",
+  {
+    style: {
+      border: "1px solid rgba(127, 127, 127, 0.24)",
+      borderRadius: 8,
+      padding: 16
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            alignItems: "flex-start",
+            display: "flex",
+            gap: 12,
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: error.message }),
+              error.method && error.url ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 6, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+                error.method,
+                " ",
+                error.url
+              ] }) }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ggUi.Button,
+              {
+                danger: true,
+                size: "small",
+                type: "text",
+                onClick: () => removeDebugError(error.id),
+                children: "删除"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(DebugSection, { title: "Request", value: error.debug.request }),
+      /* @__PURE__ */ jsxRuntime.jsx(DebugSection, { title: "Stack Trace", value: error.debug.stackTrace }),
+      /* @__PURE__ */ jsxRuntime.jsx(DebugSection, { title: "MDC", value: error.debug.mdc })
+    ]
+  }
+);
+var GzFetchDebugDrawer = () => {
+  var _a;
+  const hostIdRef = react.useRef(void 0);
+  (_a = hostIdRef.current) != null ? _a : hostIdRef.current = /* @__PURE__ */ Symbol("gz-fetch-debug-drawer-host");
+  const hostId = hostIdRef.current;
+  const snapshot3 = react.useSyncExternalStore(
+    subscribeDebugDrawer,
+    getDebugDrawerSnapshot,
+    getDebugDrawerServerSnapshot
+  );
+  react.useEffect(() => registerDebugDrawerHost(hostId), [hostId]);
+  if (snapshot3.activeHostId !== hostId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ggUi.Drawer,
+    {
+      extra: /* @__PURE__ */ jsxRuntime.jsx(
+        ggUi.Button,
+        {
+          disabled: snapshot3.errors.length === 0,
+          size: "small",
+          onClick: clearDebugErrors,
+          children: "全部清除"
+        }
+      ),
+      open: snapshot3.open,
+      placement: "right",
+      styles: { body: { overflowY: "auto" } },
+      title: `Debug Error (${snapshot3.errors.length})`,
+      width: "min(760px, 100vw)",
+      onClose: closeDebugDrawer,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gap: 16 }, children: snapshot3.errors.map((error) => /* @__PURE__ */ jsxRuntime.jsx(DebugError, { error }, error.id)) })
+    }
+  );
+};
+GzFetchDebugDrawer.displayName = "GzFetchDebugDrawer";
+var GzFetchDebugDrawer_default = GzFetchDebugDrawer;
 var GzFetchUnauthorizedModal = () => {
   var _a, _b, _c;
   const hostIdRef = react.useRef(void 0);
   (_a = hostIdRef.current) != null ? _a : hostIdRef.current = /* @__PURE__ */ Symbol("gz-fetch-unauthorized-modal-host");
   const hostId = hostIdRef.current;
-  const snapshot2 = react.useSyncExternalStore(
+  const snapshot3 = react.useSyncExternalStore(
     subscribeUnauthorized,
     getUnauthorizedSnapshot,
     getUnauthorizedServerSnapshot
   );
   react.useEffect(() => registerUnauthorizedModalHost(hostId), [hostId]);
-  if (snapshot2.activeHostId !== hostId) {
+  if (snapshot3.activeHostId !== hostId) {
     return null;
   }
   const handleConfirm = () => {
@@ -347,11 +571,11 @@ var GzFetchUnauthorizedModal = () => {
       cancelText: "取消",
       closable: true,
       okText: "重新登录",
-      open: snapshot2.phase === "open",
-      title: (_b = snapshot2.options) == null ? void 0 : _b.modalTitle,
+      open: snapshot3.phase === "open",
+      title: (_b = snapshot3.options) == null ? void 0 : _b.modalTitle,
       onCancel: cancelUnauthorizedModal,
       onOk: handleConfirm,
-      children: (_c = snapshot2.options) == null ? void 0 : _c.modalMessage
+      children: (_c = snapshot3.options) == null ? void 0 : _c.modalMessage
     }
   );
 };
@@ -375,6 +599,7 @@ var GzFetchFeedbackProvider = ({ children }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     messageContextHolder,
+    /* @__PURE__ */ jsxRuntime.jsx(GzFetchDebugDrawer_default, {}),
     /* @__PURE__ */ jsxRuntime.jsx(GzFetchUnauthorizedModal_default, {}),
     children
   ] });

package/dist/fetch/index.js

@@ -1,9 +1,109 @@
 import axios, { AxiosError, AxiosHeaders } from 'axios';
-import { Modal, message } from '@chenhui996/gg-ui';
+import { Modal, message, Drawer, Button } from '@chenhui996/gg-ui';
 import { useRef, useSyncExternalStore, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/fetch/client.ts
+
+// src/fetch/debug.ts
+var EMPTY_DEBUG_DRAWER_SNAPSHOT = {
+  activeHostId: void 0,
+  errors: [],
+  open: false
+};
+var debugErrorSequence = 0;
+var snapshot = EMPTY_DEBUG_DRAWER_SNAPSHOT;
+var listeners = /* @__PURE__ */ new Set();
+var drawerHosts = /* @__PURE__ */ new Set();
+var emitChange = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var setSnapshot = (nextSnapshot) => {
+  snapshot = nextSnapshot;
+  emitChange();
+};
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var getResponseDebugInfo = (responseData) => {
+  if (!isRecord(responseData) || !isRecord(responseData.debug)) {
+    return void 0;
+  }
+  return responseData.debug;
+};
+var isDebugEnabled = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  try {
+    if (new URLSearchParams(window.location.search).get("showDebug") === "1") {
+      return true;
+    }
+  } catch (e) {
+  }
+  try {
+    return window.localStorage.getItem("showDebug") === "1";
+  } catch (e) {
+    return false;
+  }
+};
+var subscribeDebugDrawer = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var getDebugDrawerSnapshot = () => snapshot;
+var getDebugDrawerServerSnapshot = () => EMPTY_DEBUG_DRAWER_SNAPSHOT;
+var registerDebugDrawerHost = (hostId) => {
+  drawerHosts.add(hostId);
+  if (snapshot.activeHostId === void 0) {
+    setSnapshot({ ...snapshot, activeHostId: hostId });
+  }
+  return () => {
+    drawerHosts.delete(hostId);
+    if (snapshot.activeHostId !== hostId) {
+      return;
+    }
+    const nextHost = drawerHosts.values().next();
+    setSnapshot({
+      ...snapshot,
+      activeHostId: nextHost.done ? void 0 : nextHost.value
+    });
+  };
+};
+var showFetchDebugError = (input) => {
+  if (snapshot.activeHostId === void 0) {
+    return false;
+  }
+  debugErrorSequence += 1;
+  setSnapshot({
+    ...snapshot,
+    errors: [
+      ...snapshot.errors,
+      {
+        ...input,
+        id: `${Date.now()}-${debugErrorSequence}`
+      }
+    ],
+    open: true
+  });
+  return true;
+};
+var closeDebugDrawer = () => {
+  if (snapshot.open) {
+    setSnapshot({ ...snapshot, open: false });
+  }
+};
+var removeDebugError = (id) => {
+  setSnapshot({
+    ...snapshot,
+    errors: snapshot.errors.filter((error) => error.id !== id)
+  });
+};
+var clearDebugErrors = () => {
+  if (snapshot.errors.length > 0) {
+    setSnapshot({ ...snapshot, errors: [] });
+  }
+};
 var GzFetchError = class extends Error {
   constructor(message3, options) {
     super(message3);
@@ -119,17 +219,17 @@ var DEFAULT_UNAUTHORIZED_LOGIN_URL = "/login";
 var DEFAULT_UNAUTHORIZED_MODAL_TITLE = "登录失效";
 var DEFAULT_UNAUTHORIZED_MODAL_MESSAGE = "当前登录状态已失效，请重新登录。";
 var IDLE_SNAPSHOT = { phase: "idle" };
-var snapshot = IDLE_SNAPSHOT;
-var listeners = /* @__PURE__ */ new Set();
+var snapshot2 = IDLE_SNAPSHOT;
+var listeners2 = /* @__PURE__ */ new Set();
 var modalHosts = /* @__PURE__ */ new Set();
-var emitChange = () => {
-  for (const listener of listeners) {
+var emitChange2 = () => {
+  for (const listener of listeners2) {
     listener();
   }
 };
-var setSnapshot = (nextSnapshot) => {
-  snapshot = nextSnapshot;
-  emitChange();
+var setSnapshot2 = (nextSnapshot) => {
+  snapshot2 = nextSnapshot;
+  emitChange2();
 };
 var resolveUnauthorizedOptions = (options) => {
   var _a, _b, _c, _d;
@@ -141,66 +241,66 @@ var resolveUnauthorizedOptions = (options) => {
     ...(options == null ? void 0 : options.onUnauthorized) === void 0 ? {} : { onUnauthorized: options.onUnauthorized }
   };
 };
-var getUnauthorizedSnapshot = () => snapshot;
+var getUnauthorizedSnapshot = () => snapshot2;
 var getUnauthorizedServerSnapshot = () => IDLE_SNAPSHOT;
 var subscribeUnauthorized = (listener) => {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
 };
 var registerUnauthorizedModalHost = (hostId) => {
   modalHosts.add(hostId);
-  if (snapshot.activeHostId === void 0) {
-    setSnapshot({ ...snapshot, activeHostId: hostId });
+  if (snapshot2.activeHostId === void 0) {
+    setSnapshot2({ ...snapshot2, activeHostId: hostId });
   }
   return () => {
     modalHosts.delete(hostId);
-    if (snapshot.activeHostId !== hostId) {
+    if (snapshot2.activeHostId !== hostId) {
       return;
     }
     const nextHost = modalHosts.values().next();
     const nextHostId = nextHost.done ? void 0 : nextHost.value;
-    if (snapshot.phase === "closing") {
-      setSnapshot(
+    if (snapshot2.phase === "closing") {
+      setSnapshot2(
         nextHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: nextHostId, phase: "idle" }
       );
       return;
     }
     if (nextHostId === void 0) {
-      setSnapshot(
-        snapshot.options === void 0 ? { phase: snapshot.phase } : { options: snapshot.options, phase: snapshot.phase }
+      setSnapshot2(
+        snapshot2.options === void 0 ? { phase: snapshot2.phase } : { options: snapshot2.options, phase: snapshot2.phase }
       );
       return;
     }
-    setSnapshot({ ...snapshot, activeHostId: nextHostId });
+    setSnapshot2({ ...snapshot2, activeHostId: nextHostId });
   };
 };
 var openUnauthorizedModal = (options) => {
-  if (!options.enabled || snapshot.phase !== "idle") {
+  if (!options.enabled || snapshot2.phase !== "idle") {
     return false;
   }
-  setSnapshot({
-    ...snapshot.activeHostId === void 0 ? {} : { activeHostId: snapshot.activeHostId },
+  setSnapshot2({
+    ...snapshot2.activeHostId === void 0 ? {} : { activeHostId: snapshot2.activeHostId },
     options,
     phase: "open"
   });
   return true;
 };
 var beginCloseUnauthorizedModal = () => {
-  if (snapshot.phase !== "open" || snapshot.options === void 0) {
+  if (snapshot2.phase !== "open" || snapshot2.options === void 0) {
     return void 0;
   }
-  const { options } = snapshot;
-  setSnapshot({ ...snapshot, phase: "closing" });
+  const { options } = snapshot2;
+  setSnapshot2({ ...snapshot2, phase: "closing" });
   return options;
 };
 var cancelUnauthorizedModal = () => beginCloseUnauthorizedModal() !== void 0;
 var confirmUnauthorizedModal = () => beginCloseUnauthorizedModal();
 var completeUnauthorizedModal = () => {
-  if (snapshot.phase !== "closing") {
+  if (snapshot2.phase !== "closing") {
     return;
   }
-  setSnapshot(
-    snapshot.activeHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: snapshot.activeHostId, phase: "idle" }
+  setSnapshot2(
+    snapshot2.activeHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: snapshot2.activeHostId, phase: "idle" }
   );
 };
 var executeUnauthorizedAction = (options, navigate = (loginUrl) => window.location.assign(loginUrl)) => {
@@ -279,7 +379,16 @@ function createGzFetch(options = {}) {
       await runErrorMiddlewares(error, { config: currentConfig }, middlewares);
       const shouldShowError = (_a2 = currentConfig.showErrorMessage) != null ? _a2 : showInstanceErrorMessage;
       if (shouldShowError && error.type !== "CANCELED_ERROR" && !shouldHandleUnauthorized) {
-        showFetchErrorMessage(error.message);
+        const debugInfo = error.type === "HTTP_ERROR" && error.status !== 401 && isDebugEnabled() ? getResponseDebugInfo(error.responseData) : void 0;
+        const didShowDebugError = debugInfo === void 0 ? false : showFetchDebugError({
+          debug: debugInfo,
+          message: error.message,
+          method: currentConfig.method,
+          url: currentConfig.url
+        });
+        if (!didShowDebugError) {
+          showFetchErrorMessage(error.message);
+        }
       }
       throw error;
     }
@@ -314,18 +423,133 @@ async function gzFetch(config) {
   }
   return defaultClient(config);
 }
+var EMPTY_DEBUG_VALUE = "（无）";
+var formatDebugValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (value === void 0 || value === null) {
+    return EMPTY_DEBUG_VALUE;
+  }
+  try {
+    const serialized = JSON.stringify(value, null, 2);
+    return serialized != null ? serialized : "（无法序列化）";
+  } catch (e) {
+    return "（无法序列化）";
+  }
+};
+var codeStyle = {
+  background: "rgba(127, 127, 127, 0.08)",
+  borderRadius: 6,
+  margin: "8px 0 0",
+  overflowWrap: "anywhere",
+  overflowX: "auto",
+  padding: 12,
+  whiteSpace: "pre-wrap"
+};
+var DebugSection = ({
+  title,
+  value
+}) => /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
+  /* @__PURE__ */ jsx("strong", { children: title }),
+  /* @__PURE__ */ jsx("pre", { style: codeStyle, children: formatDebugValue(value) })
+] });
+var DebugError = ({ error }) => /* @__PURE__ */ jsxs(
+  "section",
+  {
+    style: {
+      border: "1px solid rgba(127, 127, 127, 0.24)",
+      borderRadius: 8,
+      padding: 16
+    },
+    children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            alignItems: "flex-start",
+            display: "flex",
+            gap: 12,
+            justifyContent: "space-between"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("strong", { children: error.message }),
+              error.method && error.url ? /* @__PURE__ */ jsx("div", { style: { marginTop: 6, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsxs("code", { children: [
+                error.method,
+                " ",
+                error.url
+              ] }) }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                danger: true,
+                size: "small",
+                type: "text",
+                onClick: () => removeDebugError(error.id),
+                children: "删除"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(DebugSection, { title: "Request", value: error.debug.request }),
+      /* @__PURE__ */ jsx(DebugSection, { title: "Stack Trace", value: error.debug.stackTrace }),
+      /* @__PURE__ */ jsx(DebugSection, { title: "MDC", value: error.debug.mdc })
+    ]
+  }
+);
+var GzFetchDebugDrawer = () => {
+  var _a;
+  const hostIdRef = useRef(void 0);
+  (_a = hostIdRef.current) != null ? _a : hostIdRef.current = /* @__PURE__ */ Symbol("gz-fetch-debug-drawer-host");
+  const hostId = hostIdRef.current;
+  const snapshot3 = useSyncExternalStore(
+    subscribeDebugDrawer,
+    getDebugDrawerSnapshot,
+    getDebugDrawerServerSnapshot
+  );
+  useEffect(() => registerDebugDrawerHost(hostId), [hostId]);
+  if (snapshot3.activeHostId !== hostId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      extra: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: snapshot3.errors.length === 0,
+          size: "small",
+          onClick: clearDebugErrors,
+          children: "全部清除"
+        }
+      ),
+      open: snapshot3.open,
+      placement: "right",
+      styles: { body: { overflowY: "auto" } },
+      title: `Debug Error (${snapshot3.errors.length})`,
+      width: "min(760px, 100vw)",
+      onClose: closeDebugDrawer,
+      children: /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: 16 }, children: snapshot3.errors.map((error) => /* @__PURE__ */ jsx(DebugError, { error }, error.id)) })
+    }
+  );
+};
+GzFetchDebugDrawer.displayName = "GzFetchDebugDrawer";
+var GzFetchDebugDrawer_default = GzFetchDebugDrawer;
 var GzFetchUnauthorizedModal = () => {
   var _a, _b, _c;
   const hostIdRef = useRef(void 0);
   (_a = hostIdRef.current) != null ? _a : hostIdRef.current = /* @__PURE__ */ Symbol("gz-fetch-unauthorized-modal-host");
   const hostId = hostIdRef.current;
-  const snapshot2 = useSyncExternalStore(
+  const snapshot3 = useSyncExternalStore(
     subscribeUnauthorized,
     getUnauthorizedSnapshot,
     getUnauthorizedServerSnapshot
   );
   useEffect(() => registerUnauthorizedModalHost(hostId), [hostId]);
-  if (snapshot2.activeHostId !== hostId) {
+  if (snapshot3.activeHostId !== hostId) {
     return null;
   }
   const handleConfirm = () => {
@@ -341,11 +565,11 @@ var GzFetchUnauthorizedModal = () => {
       cancelText: "取消",
       closable: true,
       okText: "重新登录",
-      open: snapshot2.phase === "open",
-      title: (_b = snapshot2.options) == null ? void 0 : _b.modalTitle,
+      open: snapshot3.phase === "open",
+      title: (_b = snapshot3.options) == null ? void 0 : _b.modalTitle,
       onCancel: cancelUnauthorizedModal,
       onOk: handleConfirm,
-      children: (_c = snapshot2.options) == null ? void 0 : _c.modalMessage
+      children: (_c = snapshot3.options) == null ? void 0 : _c.modalMessage
     }
   );
 };
@@ -369,6 +593,7 @@ var GzFetchFeedbackProvider = ({ children }) => {
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     messageContextHolder,
+    /* @__PURE__ */ jsx(GzFetchDebugDrawer_default, {}),
     /* @__PURE__ */ jsx(GzFetchUnauthorizedModal_default, {}),
     children
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gz-fronted/gz-pc",
-  "version": "0.1.2-beta.0",
+  "version": "0.1.3-beta.0",
   "description": "Shared fetch, hooks and utility primitives for GZ frontend applications.",
   "license": "MIT",
   "type": "module",