feat(error): Handling error globally as toasters

Author: Benoit Ngo

Makefile

@@ -129,17 +129,19 @@ cs-check: sync-env ## cs-check
 phpstan: sync-env ## phpstan
 	docker compose exec back composer -- run phpstan
 
-.PHONY: frontlint
-frontlint: sync-env ## lint front (fix)
+be-yaml:
+	docker compose exec back console -- bin/console lint:yaml config
+
+.PHONY: fe-lint
+fe-lint: sync-env ## lint front (fix)
 	docker compose exec front yarn lint --fix
 
 .PHONY: frontcheck
-frontcheck: sync-env ## lint front (check)
+fe-check: sync-env ## lint front (check)
 	docker compose exec front yarn lint
 
 .PHONY: ci
-ci: cs-fix phpstan phpmd cs-check frontlint ## Run all CI tools
-
+ci: cs-fix phpstan phpmd cs-check fe-lint ## Run all CI tools
 
 .PHONY: drop-db-dev
 drop-db-dev: ## Drop database

apps/front/package.json

@@ -6,7 +6,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "lint": "eslint nuxt.config.ts --fix ; nuxi typecheck ; eslint ./src/"
+    "lint": "eslint nuxt.config.ts --fix ; nuxi typecheck && eslint ./src/"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
@@ -20,6 +20,8 @@
     "typescript": "^5.0.4",
     "vue-tsc": "^1.6.5"
   },
+
+
   "dependencies": {
     "@nuxtjs/i18n": "^8.0.0-rc.5",
     "@pinia/nuxt": "^0.4.11",

apps/front/src/app.vue

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <NuxtErrorBoundary @error="mHandleError">
-      <NuxtLoadingIndicator
-        color="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,18,71,1) 60%, rgba(0,236,174,1) 100%)"
-      />
-      <NuxtLayout v-if="!isMePending || isAuthenticated">
-        <NuxtPage />
-      </NuxtLayout>
-    </NuxtErrorBoundary>
+    <Toast />
+    <NuxtLoadingIndicator
+      color="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,18,71,1) 60%, rgba(0,236,174,1) 100%)"
+    />
+    <NuxtLayout v-if="!isMePending || isAuthenticated">
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
 <script setup lang="ts">
@@ -19,9 +18,6 @@ const authStore = useAuthUser();
 
 const route = useRoute();
 
-const mHandleError = (e: unknown) => {
-  logger.error("Primary error boundary", e);
-};
 const { isAuthenticated, isMePending, authUrl } = storeToRefs(authStore);
 // Doing this here instead than in the middleware allow reactivity on the auth user
 watchEffect(async () => {

apps/front/src/components/user/UserUpdateForm.vue

@@ -11,12 +11,14 @@
       v-model:password-confirm="passwordConfirm"
       :is-password-confirmed="isPasswordConfirmed"
     />
-    {{ errorMessage }}
-    {{ error }}
     <Button type="submit" :disabled="!isPasswordConfirmed">{{
       $t("components.user.updateForm.ok")
     }}</Button>
   </form>
+  <div>
+    {{ errorMessage }}
+    {{ error }}
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -45,19 +47,15 @@ const {
   securedPassword,
 } = useUser(data);
 const updateUser = async () => {
-  try {
-    await updateUserApi(
-      data.value.id,
-      {
-        email: email.value,
-      },
-      securedPassword.value
-    );
-    userRefresh();
-    await navigateTo("/users");
-  } catch (e) {
-    logger.error(e);
-  }
+  await updateUserApi(
+    data.value.id,
+    {
+      email: email.value,
+    },
+    securedPassword.value
+  );
+  userRefresh();
+  await navigateTo("/users");
 };
 </script>
 

apps/front/src/composables/api/user/useDeleteUser.ts

@@ -1,17 +1,27 @@
 import { User } from "~/types/User";
 import { DELETE } from "~/constants/http";
+import useBasicError from "~/composables/useBasicError";
 
 export default function useDeleteUser() {
   const { $appFetch } = useNuxtApp();
+
+  const { setError, resetError, errorMessage } = useBasicError();
   return {
+    errorMessage,
     deleteUser: async (user: User) => {
-      const response = await $appFetch("/users/" + user.id, {
-        method: DELETE,
-      });
-      if (!response) {
-        throw createError("Error while deleting user");
+      try {
+        resetError();
+        const response = await $appFetch("/users/" + user.id, {
+          method: DELETE,
+        });
+        if (!response) {
+          throw createError("Error while deleting user");
+        }
+        return response;
+      } catch (e: any) {
+        await setError(e);
+        throw e;
       }
-      return response;
     },
   };
 }

apps/front/src/composables/useBasicError.ts

@@ -4,9 +4,26 @@ import { BasicError } from "~/types/BasicError";
 export default function useBasicError() {
   const error: Ref<BasicError | null> = ref(null);
   const errorMessage = computed(() => {
-    return (
-      error.value?.detail || error.value?.message || error.value?.error || ""
-    );
+    // Dont display message on 500 (handled via toasters)
+    if (
+      error.value?.status &&
+      (error.value.status > 500 || error.value.status === 403)
+    ) {
+      return "";
+    }
+    if (error.value?.detail) {
+      return error.value?.detail;
+    }
+    if (error.value?.message) {
+      return Array.isArray(error.value.message)
+        ? error.value.message.join(".")
+        : error.value.message;
+    }
+
+    if (error.value?.title) {
+      return error.value?.title;
+    }
+    return "";
   });
   const setError = async (e: any) => {
     error.value = e;

apps/front/src/locales/en.ts

@@ -55,4 +55,20 @@ export default {
       },
     },
   },
+  plugins: {
+    appFetch: {
+      toasterUnauthorizedDetail: "Unauthorized",
+      toasterUnauthorizedSummary: "Unauthorized",
+
+      toasterForbiddenDetail: "Forbidden",
+      toasterForbiddenSummary: "Forbidden",
+
+      toasterCatchAllDetail: "Error",
+      toasterCatchAllSummary: "Error",
+    },
+    error: {
+      toasterCatchAllDetail: "Error",
+      toasterCatchAllSummary: "Error",
+    },
+  }
 };

apps/front/src/locales/fr.ts

@@ -55,4 +55,20 @@ export default {
       },
     },
   },
+  plugins: {
+    appFetch: {
+      toasterUnauthorizedDetail: "Vous n'êtes pas authentifié",
+      toasterUnauthorizedSummary: "Erreur d'authentification",
+
+      toasterForbiddenDetail: "Vous n'êtes pas autorisé",
+      toasterForbiddenSummary: "Erreur d'autorisation",
+
+      toasterCatchAllDetail: "Erreur",
+      toasterCatchAllSummary: "Une erreur est survenue",
+    },
+    error: {
+      toasterCatchAllDetail: "Erreur",
+      toasterCatchAllSummary: "Une erreur est survenue",
+    }
+  }
 };

apps/front/src/pages/users/index.vue

@@ -7,6 +7,7 @@
     </div>
     <div v-show="usersPending" v-t="{ path: 'pages.user.index.pending' }"></div>
     <div v-show="error">{{ error }}}</div>
+    {{ errorDelete }}
     <table v-if="users">
       <thead>
         <tr>
@@ -48,7 +49,7 @@ import useListUsers from "~/composables/api/user/useListUsers";
 import useDeleteUser from "~/composables/api/user/useDeleteUser";
 
 const authStore = useAuthUser();
-const { deleteUser } = useDeleteUser();
+const { deleteUser, errorMessage: errorDelete } = useDeleteUser();
 
 const {
   data: users,
@@ -63,6 +64,7 @@ const deleteUserClick = async (user: User) => {
     usersRefresh();
   } catch (e) {
     logger.error(e);
+    throw e;
   }
 };
 </script>

apps/front/src/plugins/primevue.ts renamed to apps/front/src/plugins/01-primevue.ts

@@ -4,6 +4,8 @@ import TieredMenu from "primevue/tieredmenu";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import InputText from "primevue/inputtext";
+import Toast from "primevue/toast";
+import ToastService from "primevue/toastservice";
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(PrimeVue, { ripple: true });
@@ -12,6 +14,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component("InputText", InputText);
   nuxtApp.vueApp.component("DataTable", DataTable);
   nuxtApp.vueApp.component("Column", Column);
-
+  nuxtApp.vueApp.use(ToastService);
+  nuxtApp.vueApp.component("Toast", Toast);
   //other components that you need
 });