feat: show detailed messages from validator-services

Author: simon-20

src/components/LocalFilesValidator.vue

@@ -13,6 +13,7 @@
   const activeStep = ref(1);
   const files = ref([]);
   const requestStatus = ref(""); // 'pending' | 'draft' | 'success' | 'error' = 'draft'
+  const uploadErrorMessage = ref("");
 
   const onAddFiles = (_files) => {
     files.value = _files;
@@ -24,7 +25,14 @@
 
   const uploadFiles = () => {
     const handleError = (error) => {
-      console.error(error);
+      if (typeof error === "object" && typeof error.message === "string") {
+        try {
+          const errorResponse = JSON.parse(error.message);
+          uploadErrorMessage.value = errorResponse.message;
+        } catch (err) {
+          console.error(err);
+        }
+      }
       requestStatus.value = "error";
     };
 
@@ -62,7 +70,12 @@
       <p class="mb-4 text-center">Upload your IATI files and start validation.</p>
       <div v-if="requestStatus && requestStatus !== 'draft'" class="mb-3 text-sm">
         <AppAlert v-if="requestStatus === 'error'" variant="error">
-          File(s) uploading failed. Check your files and try again.
+          <template v-if="uploadErrorMessage === ''">
+            File(s) uploading failed. Check your files and try again.
+          </template>
+          <template v-else>
+            {{ uploadErrorMessage }}
+          </template>
         </AppAlert>
         <AppAlert v-else-if="requestStatus === 'success'" variant="success">
           File(s) have been uploaded successfully

src/components/RemoteFIlesValidator.vue

@@ -11,6 +11,7 @@
   const props = defineProps({ workspaceID: { type: String, default: "" } });
   const activeStep = ref(1);
   const requestStatus = ref(""); // 'pending' | 'draft' | 'success' | 'error' = 'draft'
+  const includeGenericErrorMessage = ref(true);
   const requestErrorMessage = ref("");
   const urls = ref("");
   const incorrectURLs = ref([]);
@@ -51,22 +52,19 @@
         requestStatus.value = "error";
         if (error && error.message) {
           requestErrorMessage.value = error.message;
+          if (error.cause.status === 503) {
+            includeGenericErrorMessage.value = false;
+          }
         } else {
-          console.log("Error: ", error);
+          console.log(`Error received from IATI Validator Services: ${error}`);
         }
       };
 
       requestStatus.value = "pending";
       parallelUpload(correctURLs).subscribe({
-        next: (response) => {
-          const responseText = Array.isArray(response) && response.length ? response[0] : response;
-          if (responseText === "success") {
-            activeStep.value = 3;
-            requestStatus.value = "success";
-          } else {
-            requestStatus.value = "error";
-            requestErrorMessage.value = responseText;
-          }
+        next: () => {
+          activeStep.value = 3;
+          requestStatus.value = "success";
         },
         error: handleError,
       });
@@ -98,7 +96,10 @@
       <p class="mb-4 text-center">Fetch the files from the web.</p>
       <div v-if="requestStatus && requestStatus !== 'draft'" class="mb-3 text-sm">
         <AppAlert v-if="requestStatus === 'error'" variant="error">
-          File(s) uploading failed. Check your files and try again.<br />{{ requestErrorMessage }}
+          <template v-if="includeGenericErrorMessage">
+            File(s) uploading failed. Check your files and try again.<br />
+          </template>
+          {{ requestErrorMessage }}
         </AppAlert>
         <AppAlert v-else-if="requestStatus === 'success'" variant="success">
           File(s) have been uploaded successfully

src/utils/api/validate.js

@@ -33,11 +33,18 @@ export const fetchFileFromURL = async (fileUrl, workspaceID) => {
   });
 
   if (req.status === 200) return "success";
+
+  let errorMessage = "";
   if (req.status === 422) {
     const error = await req.json();
-
-    return error.message.includes(fileUrl) ? error.message : `${error.url} - ${error.message}`;
+    errorMessage = error.message.includes(fileUrl) ? error.message : `${error.url} - ${error.message}`;
+  } else if (req.status === 503) {
+    const error = await req.json();
+    errorMessage = error.message;
+  } else {
+    errorMessage = req.text;
   }
+  throw new Error(errorMessage, { cause: { status: req.status } });
 };
 
 export const getTempWorkspaceURL = (workspaceID) => `${SERVICES_URL}/pvt/adhoc/session/?sessionId=${workspaceID}`;