From 94288b5dc3cad70656d4c83ba6c93a4e3a23bded Mon Sep 17 00:00:00 2001
From: Gabe Yuan <yugang2002@gmail.com>
Date: Thu, 2 Nov 2023 23:35:36 +0800
Subject: [PATCH] show detail error to api test

---
 src/background.js         |  2 +-
 src/libs/fetch.js         | 10 ++++++++--
 src/views/Options/Apis.js | 15 ++++++++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/background.js b/src/background.js
index 3c6862f..0d8ea87 100644
--- a/src/background.js
+++ b/src/background.js
@@ -60,7 +60,7 @@ browser.runtime.onMessage.addListener(
             sendResponse({ data });
           })
           .catch((error) => {
-            sendResponse({ error: error.message });
+            sendResponse({ error: error.message, cause: error.cause });
           });
         break;
       case MSG_FETCH_LIMIT:
diff --git a/src/libs/fetch.js b/src/libs/fetch.js
index f468f38..e22fe4d 100644
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -127,7 +127,13 @@ export const fetchData = async (
     }
 
     if (!res?.ok) {
-      throw new Error(`response: ${res.statusText}`);
+      const cause = {
+        status: res.status,
+      };
+      if (res.headers.get("Content-Type")?.includes("json")) {
+        cause.body = await res.json();
+      }
+      throw new Error(`response: [${res.status}] ${res.statusText}`, { cause });
     }
 
     // 插入缓存
@@ -163,7 +169,7 @@ export const fetchPolyfill = async (input, opts) => {
   if (isExt && !isBg()) {
     const res = await sendBgMsg(MSG_FETCH, { input, opts });
     if (res.error) {
-      throw new Error(res.error);
+      throw new Error(res.error, { cause: res.cause });
     }
     return res.data;
   }
diff --git a/src/views/Options/Apis.js b/src/views/Options/Apis.js
index db033e9..4030c8c 100644
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -46,7 +46,20 @@ function TestButton({ translator, api }) {
       }
       alert.success(i18n("test_success"));
     } catch (err) {
-      alert.error(`${i18n("test_failed")}: ${err.message}`);
+      // alert.error(`${i18n("test_failed")}: ${err.message}`);
+      alert.error(
+        <>
+          <div>{`${i18n("test_failed")}: ${err.message}`}</div>
+          <pre
+            style={{
+              maxWidth: 400,
+              overflow: "auto",
+            }}
+          >
+            {JSON.stringify(err.cause || {}, null, 2)}
+          </pre>
+        </>
+      );
     } finally {
       setLoading(false);
     }