♻️(front) add AppError

The current errorToString was showing complete javascript errors.
Which is not what we want, it those cases we want to show generic
errors, technical informations are not needed to users. So to
make sure some error are shown to the users, use AppError.

src/frontend/apps/drive/src/features/api/APIError.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import i18n from "@/features/i18n/initI18n";
+import { AppError } from "../errors/AppError";
 
 export class APIError extends Error {
   data?: any;
@@ -19,25 +20,24 @@ export const errorToString = (error: unknown): string => {
   if (error instanceof APIError) {
     // If there is a data, it means that the error is a JSON object
     if (error.data) {
-      return errorToString(error.data);
+      /**
+       * This is made to handle full text errors from the API like:
+       *
+       * "title": [
+       *   "The title field is required."
+       *  ]
+       */
+      return Object.entries(error.data)
+        .map(([, value]) => `${value}`)
+        .join("\n");
     }
     // If there is no data, it means that the error is a string, probably a complicated html error.
     return i18n.t("api.error.unexpected");
   }
-  if (error instanceof Error) {
+  // We want to show the error message from the AppError only. Not message from the Error class as they
+  // can be really technical and not helpful for the user. For those we show the generic error message.
+  if (error instanceof AppError) {
     return error.message;
   }
-  if (typeof error === "object" && error !== null) {
-    /**
-     * This is made to handle full text errors from the API like:
-     *
-     * "title": [
-     *   "The title field is required."
-     *  ]
-     */
-    return Object.entries(error)
-      .map(([, value]) => `${errorToString(value)}`)
-      .join("\n");
-  }
   return i18n.t("api.error.unexpected");
 };

src/frontend/apps/drive/src/features/errors/AppError.ts

@@ -0,0 +1 @@
+export class AppError extends Error {}