enhance: error handling and improve configuration inspection

Author: 0xJacky

app/src/views/config/InspectConfig.vue

@@ -1,21 +1,34 @@
 <script setup lang="ts">
+import type { CosyError } from '@/lib/http/types'
 import ngx from '@/api/ngx'
+import { translateError } from '@/lib/http/error'
 import { logLevel } from '@/views/config/constants'
 
 defineProps<{
   banner?: boolean
 }>()
 
-const data = ref({
-  level: 0,
-  message: '',
-})
+interface TestResult extends CosyError {
+  message: string
+  level: number
+}
+
+const data = ref<TestResult>()
+const translatedError = ref<string>('')
 
 test()
 
 function test() {
   ngx.test().then(r => {
     data.value = r
+    if (r && r.level > logLevel.Warn) {
+      const cosyError: CosyError = {
+        ...r,
+      }
+      translateError(cosyError).then(translated => {
+        translatedError.value = translated
+      })
+    }
   })
 }
 
@@ -27,7 +40,7 @@ defineExpose({
 <template>
   <div class="inspect-container">
     <AAlert
-      v-if="data?.level <= logLevel.Info"
+      v-if="data && data.level <= logLevel.Info"
       :banner
       :message="$gettext('Configuration file is test successful')"
       type="success"
@@ -41,19 +54,19 @@ defineExpose({
       show-icon
     >
       <template #description>
-        {{ data.message }}
+        {{ data?.message }}
       </template>
     </AAlert>
 
     <AAlert
-      v-else-if="data?.level > logLevel.Warn"
+      v-else-if="data && data.level > logLevel.Warn"
       :message="$gettext('Error')"
       :banner
       type="error"
       show-icon
     >
       <template #description>
-        {{ data.message }}
+        {{ translatedError }}
       </template>
     </AAlert>
   </div>

app/src/views/site/site_edit/components/SiteEditor/store.ts

@@ -1,10 +1,12 @@
 import type { CertificateInfo } from '@/api/cert'
 import type { Site } from '@/api/site'
+import type { CosyError } from '@/lib/http/types'
 import type { CheckedType } from '@/types'
 import config from '@/api/config'
 import ngx from '@/api/ngx'
 import site from '@/api/site'
 import { useNgxConfigStore } from '@/components/NgxConfigEditor'
+import { translateError } from '@/lib/http/error'
 
 export const useSiteEditorStore = defineStore('siteEditor', () => {
   const advanceMode = ref(false)
@@ -46,7 +48,7 @@ export const useSiteEditorStore = defineStore('siteEditor', () => {
         handleResponse(r)
       }
       catch (error) {
-        handleParseError(error as { error?: string, message: string })
+        handleParseError(error as CosyError)
       }
     }
     loading.value = false
@@ -77,17 +79,17 @@ export const useSiteEditorStore = defineStore('siteEditor', () => {
       handleResponse(response)
     }
     catch (error) {
-      handleParseError(error as { error?: string, message: string })
+      handleParseError(error as CosyError)
     }
     finally {
       saving.value = false
     }
   }
 
-  function handleParseError(e: { error?: string, message: string }) {
+  async function handleParseError(e: CosyError) {
     console.error(e)
     parseErrorStatus.value = true
-    parseErrorMessage.value = e.message
+    parseErrorMessage.value = await translateError(e)
     config.getItem(`sites-available/${encodeURIComponent(name.value)}`).then(r => {
       configText.value = r.content
     })