End of section 11

Author: onur-ozguzel

client/src/app/app.component.html

@@ -1,5 +1,5 @@
 <app-header></app-header>
 
-<div class="container mt-6">
+<div class="container mt-24">
     <router-outlet></router-outlet>
 </div>

client/src/app/app.config.ts

@@ -3,12 +3,14 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { errorInterceptor } from './core/interceptors/error.interceptor';
+import { loadingInterceptor } from './core/interceptors/loading.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes), provideAnimationsAsync(),
-    provideHttpClient()
+    provideHttpClient(withInterceptors([errorInterceptor, loadingInterceptor]))
   ]
 };

client/src/app/app.routes.ts

@@ -2,10 +2,16 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from './features/home/home.component';
 import { ShopComponent } from './features/shop/shop.component';
 import { ProductDetailsComponent } from './features/shop/product-details/product-details.component';
+import { TestErrorComponent } from './features/test-error/test-error.component';
+import { NotFoundComponent } from './shared/components/not-found/not-found.component';
+import { ServerErrorComponent } from './shared/components/server-error/server-error.component';
 
 export const routes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'shop', component: ShopComponent },
     { path: 'shop/:id', component: ProductDetailsComponent },
-    { path: '**', redirectTo: '', pathMatch: 'full' }
+    { path: 'test-error', component: TestErrorComponent },
+    { path: 'not-found', component: NotFoundComponent },
+    { path: 'server-error', component: ServerErrorComponent },
+    { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
 ];

client/src/app/core/interceptors/error.interceptor.ts

@@ -0,0 +1,41 @@
+import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { catchError, throwError } from 'rxjs';
+import { SnackbarService } from '../services/snackbar.service';
+
+export const errorInterceptor: HttpInterceptorFn = (req, next) => {
+  const router = inject(Router);
+  const snackBar = inject(SnackbarService);
+
+  return next(req).pipe(
+    catchError((err: HttpErrorResponse) => {
+      if (err.status === 400) {
+        if (err.error.errors) {
+          const modelStateErrors = [];
+          for (const key in err.error.errors) {
+            if (err.error.errors[key]) {
+              modelStateErrors.push(err.error.errors[key])
+            }
+          }
+
+          throw modelStateErrors.flat();
+        } else {
+          snackBar.error(err.error.title || err.error);
+        }
+      }
+      if (err.status === 401) {
+        snackBar.error(err.error.title || err.error);
+      }
+      if (err.status === 404) {
+        router.navigateByUrl('/not-found');
+      }
+      if (err.status === 500) {
+        const navigationExtras: NavigationExtras = { state: { error: err.error } }
+        router.navigateByUrl('/server-error', navigationExtras);
+      }
+
+      return throwError(() => err)
+    })
+  );
+};

client/src/app/core/interceptors/loading.interceptor.ts

@@ -0,0 +1,15 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { delay, finalize } from 'rxjs';
+import { BusyService } from '../services/busy.service';
+
+export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
+  const busyService = inject(BusyService);
+
+  busyService.busy();
+
+  return next(req).pipe(
+    delay(500),
+    finalize(() => busyService.idle())
+  );
+};

client/src/app/core/services/busy.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BusyService {
+  loading = false;
+  busyRequestCount = 0;
+
+  busy() {
+    this.busyRequestCount++;
+    this.loading = true;
+  }
+  idle() {
+    this.busyRequestCount--;
+    if (this.busyRequestCount <= 0) {
+      this.busyRequestCount = 0;
+      this.loading = false;
+    }
+  }
+}

client/src/app/core/services/snackbar.service.ts

@@ -0,0 +1,23 @@
+import { inject, Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SnackbarService {
+  private snackBar = inject(MatSnackBar)
+
+  error(message: string) {
+    this.snackBar.open(message, 'Close', {
+      duration: 5000,
+      panelClass: ['snack-error']
+    })
+  }
+
+  success(message: string) {
+    this.snackBar.open(message, 'Close', {
+      duration: 5000,
+      panelClass: ['snack-success']
+    })
+  }
+}

client/src/app/features/test-error/test-error.component.html

@@ -0,0 +1,17 @@
+<div class="mt-5 flex justify-center gap-4">
+    <button mat-stroked-button (click)="get500Error()">Test 500 error</button>
+    <button mat-stroked-button (click)="get404Error()">Test 404 error</button>
+    <button mat-stroked-button (click)="get400Error()">Test 400 error</button>
+    <button mat-stroked-button (click)="get401Error()">Test 401 error</button>
+    <button mat-stroked-button (click)="get400ValidationErrorError()">Test validation error</button>
+</div>
+
+@if (validationErrors) {
+    <div class="mx-auto max-w-lg mt-5 bg-red-100">
+        <ul class="space-y-2 p-2">
+            @for (error of validationErrors; track $index) {
+                <li class="text-red-800">{{error}}</li>
+            }
+        </ul>
+    </div>
+}

client/src/app/features/test-error/test-error.component.scss

@@ -0,0 +1,52 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+
+@Component({
+  selector: 'app-test-error',
+  imports: [
+    MatButton
+  ],
+  templateUrl: './test-error.component.html',
+  styleUrl: './test-error.component.scss'
+})
+export class TestErrorComponent {
+  baseUrl = 'https://localhost:5001/api/';
+  private http = inject(HttpClient);
+  validationErrors?: string[];
+
+  get404Error() {
+    this.http.get(this.baseUrl + 'buggy/notfound').subscribe({
+      next: response => console.log(response),
+      error: error => console.log(error)
+    })
+  }
+
+  get400Error() {
+    this.http.get(this.baseUrl + 'buggy/badrequest').subscribe({
+      next: response => console.log(response),
+      error: error => console.log(error)
+    })
+  }
+
+  get401Error() {
+    this.http.get(this.baseUrl + 'buggy/unauthorized').subscribe({
+      next: response => console.log(response),
+      error: error => console.log(error)
+    })
+  }
+
+  get500Error() {
+    this.http.get(this.baseUrl + 'buggy/internalerror').subscribe({
+      next: response => console.log(response),
+      error: error => console.log(error)
+    })
+  }
+
+  get400ValidationErrorError() {
+    this.http.post(this.baseUrl + 'buggy/validationerror', {}).subscribe({
+      next: response => console.log(response),
+      error: error => this.validationErrors = error
+    })
+  }
+}