* now will not show error when it's null

* now will split the array of `errorInfo` into `<p>` tags @ `<PlaceholderError>` * replace field `response` to its `.body.text()` @ `api/index.ts.FetchResponseError` * rename class name from camelCase to kebab-case @ `<SelectUser>` & `<PlaceholderError>` @ fe
n0099 · Feb 24, 2024 · 25d8550 · 25d8550
1 parent 5edbc0e
commit 25d8550
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/fe/src/api/index.ts b/fe/src/api/index.ts
@@ -15,8 +15,8 @@ export class ApiResponseError extends Error {
     }
 }
 export class FetchResponseError extends Error {
-    public constructor(public readonly response: Response) {
-        super(JSON.stringify(response));
+    public constructor(public readonly bodyText: string) {
+        super(bodyText);
     }
 }
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
@@ -39,11 +39,14 @@ export const queryFunction = <TResponse, TQueryParam>(endpoint: string, queryPar
                     + `${_.isEmpty(queryParam) ? '' : '?'}${stringify(queryParam)}`,
                 { headers: { Accept: 'application/json' }, signal: queryContext.signal }
             );
+
+            // must before any Response.text|json() to prevent `Failed to execute 'clone' on 'Response': Response body is already used`
+            const response2 = response.clone();
             const json = await response.json() as TResponse;
-            if (!response.ok)
-                throw new FetchResponseError(response);
             if (isApiError(json))
                 throw new ApiResponseError(json.errorCode, json.errorInfo);
+            if (!response.ok)
+                throw new FetchResponseError(await response2.text());
 
             return json;
         } finally {

diff --git a/fe/src/components/placeholders/PlaceholderError.vue b/fe/src/components/placeholders/PlaceholderError.vue
@@ -1,23 +1,23 @@
 <template>
     <div class="text-center">
-        <template v-if="error === null">
-            <span class="errorCode text-muted">error</span>
-        </template>
-        <template v-else-if="error instanceof FetchResponseError">
-            <p class="errorCode text-muted">{{ error.response }}</p>
+        <template v-if="error instanceof FetchResponseError">
+            <p class="error-code text-muted">{{ error.bodyText }}</p>
         </template>
         <template v-else-if="error instanceof ApiResponseError">
-            <p class="errorCode text-muted">{{ error.errorCode }}</p>
+            <p class="error-code text-muted">{{ error.errorCode }}</p>
             <template v-if="_.isString(error.errorInfo)">
                 <p v-for="(info, _k) in error.errorInfo.split('\n')" :key="_k">{{ info }}</p>
             </template>
             <template v-else-if="_.isObject(error.errorInfo)">
-                <p v-for="(lines, paramName) in error.errorInfo" :key="paramName">
+                <p v-for="(paramError, paramName) in error.errorInfo" :key="paramName">
                     参数 {{ paramName }}：
-                    <template v-if="_.isString(lines)">
-                        <p v-for="(info, _k) in lines.split('\n')" :key="_k">{{ info }}</p>
+                    <template v-if="_.isString(paramError)">
+                        <p v-for="(line, _k) in paramError.split('\n')" :key="_k">{{ line }}</p>
+                    </template>
+                    <template v-else-if="_.isArray(paramError) && paramError.length > 1">
+                        <p v-for="(item, _k) in paramError" :key="_k">{{ item }}</p>
                     </template>
-                    <template v-else>{{ lines }}</template>
+                    <template v-else>{{ paramError }}</template>
                 </p>
             </template>
         </template>
@@ -33,7 +33,7 @@ defineProps<{ error: ApiErrorClass | null }>();
 </script>
 
 <style scoped>
-.errorCode {
+.error-code {
     font-size: 6rem;
 }
 </style>
diff --git a/fe/src/components/widgets/SelectUser.vue b/fe/src/components/widgets/SelectUser.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="col-5">
         <div class="input-group">
-            <select v-model="selectBy" class="selectUserBy form-select">
+            <select v-model="selectBy" class="select-user-by form-select">
                 <option value="">未选择</option>
                 <option value="uid">百度UID</option>
                 <option value="name">用户名</option>
@@ -10,7 +10,7 @@
                 <option value="displayNameNULL">NULL覆盖名</option>
             </select>
             <template v-if="selectBy === 'uid'">
-                <select v-model="params.uidCompareBy" class="uidCompareBy form-select">
+                <select v-model="params.uidCompareBy" class="uid-compare-by form-select">
                     <option>&lt;</option>
                     <option>=</option>
                     <option>&gt;</option>
@@ -107,10 +107,10 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.selectUserBy {
+.select-user-by {
     flex-grow: .3;
 }
-.uidCompareBy {
+.uid-compare-by {
     flex-grow: .1;
 }
 </style>