fix(fe): fetch default error handling

frontend/package.json

@@ -25,6 +25,7 @@
     "start": "vite --host --port 3000",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "cross-env VITE_NODE_ENV=test start-server-and-test stub http://127.0.0.1:8080/ 'vite --host --port 3000'",
+    "preview:app": "cross-env VITE_NODE_ENV=test vite --host --port 3000",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --fix --ignore-path .gitignore",
     "stub": "wiremock --enable-stub-cors --port 8080 --https-port 8081 --preserve-host-header --root-dir ./stub --verbose --global-response-templating",

frontend/src/components/grouping/AddressGroupComponent.vue

@@ -30,8 +30,6 @@ const emit = defineEmits<{
   (e: "remove", value: number): void;
 }>();
 
-const generalErrorBus = useEventBus<string>("general-error-notification");
-
 const noValidation = (value: string) => "";
 
 //We set it as a separated ref due to props not being updatable
@@ -211,8 +209,6 @@ watch([autoCompleteResult], () => {
     );
 
     watch([error], () => {
-      // @ts-ignore
-      generalErrorBus.emit(error.response?.data.message);
       postalCodeShowHint.value = true;
     });
 

frontend/src/composables/useFetch.ts

@@ -19,7 +19,25 @@ export const useFetch = (url: string | Ref, config: any = {}) => {
   const data: any = ref(config.initialData || {});
   const info = useFetchTo(url, data, config);
 
-  return { ...info, data };
+  return info;
+};
+
+const handleErrorDefault = (error: any) => {
+  if (
+    error.code === "ERR_BAD_RESPONSE" ||
+    error.code === "ERR_NETWORK"
+  ) {
+    notificationBus.emit({
+      fieldId: "internal.server.error",
+      errorMsg: "",
+    });
+  }
+  else if (error.code === "ERR_BAD_REQUEST") {
+    notificationBus.emit({
+      fieldId: "bad.request.error",
+      errorMsg: "",
+    });
+  }
 };
 
 /**
@@ -61,29 +79,27 @@ export const useFetchTo = (
       data.value = result.data;
     } catch (ex) {
       error.value = ex;
-      if (
-        error.value.code === "ERR_BAD_RESPONSE" ||
-        error.value.code === "ERR_NETWORK"
-      ) {
-        notificationBus.emit({
-          fieldId: "internal.server.error",
-          errorMsg: "",
-        });
-      }
-      else if (error.value.code === "ERR_BAD_REQUEST") {
-        notificationBus.emit({
-          fieldId: "bad.request.error",
-          errorMsg: "",
-        });
+      if (config.skipDefaultErrorHandling) {
+        return;
       }
+      apiDataHandler.handleErrorDefault();
     } finally {
       loading.value = false;
     }
   };
 
   !config.skip && fetch();
 
-  return { response, error, data, loading, fetch };
+  const apiDataHandler = {
+    response,
+    error,
+    data,
+    loading,
+    fetch,
+    handleErrorDefault: () => handleErrorDefault(error.value),
+  };
+
+  return apiDataHandler;
 };
 
 /**
@@ -123,26 +139,24 @@ export const usePost = (url: string, body: any, config: any = {}) => {
       responseBody.value = result.data;
     } catch (ex: any) {
       error.value = ex;
-      if (
-        error.value.code === "ERR_BAD_RESPONSE" ||
-        error.value.code === "ERR_NETWORK"
-      ) {
-        notificationBus.emit({
-          fieldId: "internal.server.error",
-          errorMsg: "",
-        });
-      }
-      else if (error.value.code === "ERR_BAD_REQUEST") {
-        notificationBus.emit({
-          fieldId: "bad.request.error",
-          errorMsg: "",
-        });
+      if (config.skipDefaultErrorHandling) {
+        return;
       }
+      apiDataHandler.handleErrorDefault();
     } finally {
       loading.value = false;
     }
   };
   !config.skip && fetch();
 
-  return { response, error, responseBody, loading, fetch };
+  const apiDataHandler = {
+    response,
+    error,
+    responseBody,
+    loading,
+    fetch,
+    handleErrorDefault: () => handleErrorDefault(error.value),
+  };
+
+  return apiDataHandler;
 };

frontend/src/pages/FormBCSCPage.vue

@@ -335,6 +335,7 @@ const {
   response,
   error,
   fetch: fetchSubmit,
+  handleErrorDefault,
 } = usePost("/api/clients/submissions", toRef(formData).value, {
   skip: true,
 });
@@ -364,29 +365,41 @@ watch([error], () => {
   // reset the button to allow a new submission attempt
   submitBtnDisabled.value = !validInd.value;
 
-  const validationErrors: ValidationMessageType[] =
-    error.value.response?.data ?? ([] as ValidationMessageType[]);
+  if (Array.isArray(error.value.response?.data)) {
+    const validationErrors: ValidationMessageType[] = error.value.response?.data;
+
+    validationErrors.forEach((errorItem: ValidationMessageType) =>
+      notificationBus.emit({
+        fieldId: "server.validation.error",
+        fieldName: convertFieldNameToSentence(errorItem.fieldId),
+        errorMsg: errorItem.errorMsg,
+      }),
+    );
+  } else {
+    handleErrorDefault();
+  }
 
-  validationErrors.forEach((errorItem: ValidationMessageType) =>
-    notificationBus.emit({
-      fieldId: "server.validation.error",
-      fieldName: convertFieldNameToSentence(errorItem.fieldId),
-      errorMsg: errorItem.errorMsg,
-    })
-  );
   setScrollPoint("top-notification");
 });
 
-const { error:validationError } = useFetch(`/api/clients/individual/${ForestClientUserSession.user?.userId.split('\\').pop()}?lastName=${ForestClientUserSession.user?.lastName}`);
+const { error: validationError, handleErrorDefault: handleValidationError } = useFetch(
+  `/api/clients/individual/${ForestClientUserSession.user?.userId
+    .split("\\")
+    .pop()}?lastName=${ForestClientUserSession.user?.lastName}`,
+  { skipDefaultErrorHandling: true },
+);
 watch([validationError], () => {
   if (validationError.value.response?.status === 409) {
     updateValidState(-1, false); //-1 to define the error as global
     notificationBus.emit({
       fieldId: "server.validation.error",
       fieldName: '',
       errorMsg: validationError.value.response?.data ?? "",
-    })
-  }  
+    });
+  } else if (validationError.value.response?.status !== 404) {
+    updateValidState(-1, false); //-1 to define the error as global
+    handleValidationError();
+  }
 });
 
 const districtsList = ref([]);

frontend/src/pages/FormBCeIDPage.vue

@@ -107,13 +107,15 @@ const associatedLocations = computed(() =>
     )
 );
 
-const { response, error, fetch: post } = usePost(
-  "/api/clients/submissions",
-  toRef(formData).value,
-  {
-    skip: true,
-  }
-);
+const {
+  response,
+  error,
+  fetch: post,
+  handleErrorDefault,
+} = usePost("/api/clients/submissions", toRef(formData).value, {
+  skip: true,
+  skipDefaultErrorHandling: true,
+});
 
 watch([response], () => {
   if (response.value.status === 201) {
@@ -125,16 +127,20 @@ watch([error], () => {
   // reset the button to allow a new submission attempt
   submitBtnDisabled.value = false;
 
-  const validationErrors: ValidationMessageType[] = error.value.response?.data ?? 
-    [] as ValidationMessageType[];
+  if (Array.isArray(error.value.response?.data)) {
+    const validationErrors: ValidationMessageType[] = error.value.response?.data;
+
+    validationErrors.forEach((errorItem: ValidationMessageType) =>
+      notificationBus.emit({
+        fieldId: "server.validation.error",
+        fieldName: convertFieldNameToSentence(errorItem.fieldId),
+        errorMsg: errorItem.errorMsg,
+      }),
+    );
+  } else {
+    handleErrorDefault();
+  }
 
-  validationErrors.forEach((errorItem: ValidationMessageType) =>
-    notificationBus.emit({
-      fieldId: "server.validation.error",
-      fieldName: convertFieldNameToSentence(errorItem.fieldId),
-      errorMsg: errorItem.errorMsg,
-    })
-  );
   setScrollPoint("top-notification");
 });
 

frontend/src/pages/bceidform/BusinessInformationWizardStep.vue

@@ -54,9 +54,7 @@ const ForestClientUserSession = instance.appContext.config.globalProperties.$ses
 const progressIndicatorBus = useEventBus<ProgressNotification>(
   "progress-indicator-bus"
 );
-const exitBus =
-  useEventBus<Record<string, boolean | null>>("exit-notification");
-const generalErrorBus = useEventBus<string>("general-error-notification");
+const exitBus = useEventBus<Record<string, boolean | null>>("exit-notification");
 
 //Set the prop as a ref, and then emit when it changes
 const formData = ref<FormDataDto>(props.data);
@@ -176,11 +174,13 @@ watch([autoCompleteResult], () => {
     emit("update:data", formData.value);
 
     //Also, we will load the backend data to fill all the other information as well
-    const { error, loading: detailsLoading } = useFetchTo(
-      `/api/clients/${autoCompleteResult.value.code}`,
-      detailsData,
-      {}
-    );
+    const {
+      error,
+      loading: detailsLoading,
+      handleErrorDefault,
+    } = useFetchTo(`/api/clients/${autoCompleteResult.value.code}`, detailsData, {
+      skipDefaultErrorHandling: true,
+    });
 
     showDetailsLoading.value = true;
     watch(error, () => {
@@ -207,8 +207,7 @@ watch([autoCompleteResult], () => {
         emit("update:data", formData.value);
         return;
       }
-      // @ts-ignore
-      generalErrorBus.emit(error.value.response?.data.message);
+      handleErrorDefault();
     });
 
     watch(
@@ -227,10 +226,15 @@ watch([autoCompleteResult], () => {
  * @param {string} lastName - The last name to check.
  */
 const checkForIndividualValid = (lastName: string) => {
-  const { error: validationError, response: individualResponse } = useFetch(
+  const {
+    error: validationError,
+    response: individualResponse,
+    handleErrorDefault,
+  } = useFetch(
     `/api/clients/individual/${ForestClientUserSession.user?.userId
       .split("\\")
-      .pop()}?lastName=${lastName}`
+      .pop()}?lastName=${lastName}`,
+    { skipDefaultErrorHandling: true },
   );
 
   // reset validation
@@ -240,13 +244,14 @@ const checkForIndividualValid = (lastName: string) => {
     if (watchValue.response?.status === 409) {
       validation.business = false;
       toggleErrorMessages(null, true, null);
-      generalErrorBus.emit(watchValue.response?.data ?? "");
     } else if (watchValue.response?.status === 404) {
       validation.individual = true;
+    } else {
+      handleErrorDefault();
     }
   });
   watch(individualResponse, (watchValue) => {
-    if(watchValue.status === 200){
+    if (watchValue.status === 200) {
       validation.individual = true;
     }
   });