feat: initialize frontend project with Angular dependencies and add global HTTP error interceptor

Author: beginwebdev2002

frontend/package.json

@@ -32,19 +32,15 @@
     "flowbite": "^4.0.1",
     "jwt-decode": "^4.0.0",
     "rxjs": "^7.8.1"
-    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^2.4.0",
     "@playwright/test": "^1.59.1",
     "@types/node": "^22.14.0",
     "autoprefixer": "^10.4.27",
-    "autoprefixer": "^10.4.27",
     "flowbite": "^4.0.1",
     "jsdom": "^29.0.2",
     "postcss": "^8.5.9",
-    "tailwindcss": "^3.4.19",
-    "postcss": "^8.5.9",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.8.2",
     "vite": "^6.2.0",

frontend/src/core/interceptors/error.interceptors.ts

@@ -0,0 +1,45 @@
+import { HttpErrorResponse, HttpInterceptorFn } from "@angular/common/http";
+import { inject } from "@angular/core";
+import { catchError, throwError } from "rxjs";
+import { ErrorService } from "@shared/services";
+
+export const errorInterceptor: HttpInterceptorFn = (req, next) => {
+  const errorService = inject(ErrorService);
+
+  return next(req).pipe(
+    catchError((error: HttpErrorResponse) => {
+      let message = "An unexpected error occurred";
+
+      if (error.error instanceof ErrorEvent) {
+        // Client-side error
+        message = `Client Error: ${error.error.message}`;
+      } else {
+        // Backend error
+        if (error.status === 0) {
+          message = "Network error. Please check your internet connection.";
+        } else if (error.status === 400) {
+          // Check for Veil/NestJS validation array
+          if (Array.isArray(error.error.message)) {
+            message = error.error.message.join("\n");
+          } else if (typeof error.error.message === "string") {
+            message = error.error.message;
+          } else {
+            message = "Bad Request";
+          }
+        } else if (error.status === 401) {
+          message = "Unauthorized. Please login again.";
+        } else if (error.status === 403) {
+          message =
+            "Forbidden. You do not have permission to access this resource.";
+        } else if (error.status === 404) {
+          message = "Resource not found.";
+        } else if (error.status >= 500) {
+          message = "Server error. Please try again later.";
+        }
+      }
+
+      errorService.showError(message, error.status);
+      return throwError(() => error);
+    }),
+  );
+};