http interceptors

Author: actionanand

README.md

@@ -248,3 +248,66 @@ To configure the pre-commit hook, simply add a `precommit` npm script. We want t
 - [GitHub Actions for Angular](https://github.com/rodrigokamada/angular-github-actions)
 - [Angular 16 - milestone release](https://github.com/actionanand/ng16-signal-milestone-release)
 - [Colorful Console Message](https://www.samanthaming.com/tidbits/40-colorful-console-message/)
+
+## Wiki
+
+### What are Angular interceptors?
+
+Interceptors are unique Angular services that we can implement to add behavior to HTTP requests in our application. **HttpInterceptor** provides a way to intercept **HTTP requests** and **responses**. In this sense, each interceptor can handle the request entirely by itself.
+
+As the diagram above shows, the interceptors are always in the middle of an HTTP request. As middlemen, they allow us to perform operations on the requests on their way to and back from the server, making it a perfect place to centralize code for things like adding headers, passing tokens, caching, and error handling.
+
+1. [Angular Error Interceptor](https://dev.to/this-is-angular/angular-error-interceptor-12bg)
+2. [Transitioning from retryWhen to retry with Delay in RxJS](https://medium.com/@nambi.n.rajan/transitioning-from-retrywhen-to-retry-with-delay-in-rxjs-699ab6a5c7ee)
+3. [Retry Error HTTP Requests in Angular (without retryWhen)](https://blog.adnanhalilovic.com/2022/07/31/retry-error-http-requests-in-angular-without-retrywhen/)
+4. [Angular 17: HTTP Interceptors guide](https://freedium.cfd/https://medium.com/@mohsinogen/angular-17-http-interceptors-guide-417e7c8ffada)
+5. [mergeMap – RxJS Reference](https://angular.love/mergemap-rxjs-reference)
+
+```ts
+// The Old Way: `retryWhen`
+import { throwError, retryWhen, delay, tap, scan } from 'rxjs';
+
+function usingRetryWhen(duration, maxtries) {
+  return retryWhen(errors =>
+    errors.pipe(
+      scan((count, err) => {
+        if (count >= maxtries) {
+          throw err;
+        }
+        return count + 1;
+      }, 0),
+      tap(val => console.log(`#${val} Attemp with RetryWhen`)),
+      delay(duration),
+    ),
+  );
+}
+
+let triggerErrorWithRetryWhen = throwError(() => new Error('Test Error'));
+
+triggerErrorWithRetryWhen.pipe(usingRetryWhen(2000, 2)).subscribe({
+  next: val => console.log(val, 'from next'),
+  error: val => console.log(val, 'from error'),
+});
+```
+
+```ts
+// The New Way: `retry` with `delay`
+import { throwError, retry, timer } from 'rxjs';
+
+function retryWithDelay(duration, maxTries) {
+  return retry({
+    count: maxTries,
+    delay: (error, retryCount) => {
+      console.log(`Retry attempt #${retryCount}`);
+      return timer(duration);
+    },
+  });
+}
+
+let triggerErrorWithRetry = throwError(() => new Error('Test Error'));
+
+triggerErrorWithRetry.pipe(retryWithDelay(2000, 2)).subscribe({
+  next: val => console.log(val, 'from next'),
+  error: val => console.log(val, 'from error'),
+});
+```

backend/data/user-places.json

@@ -9,16 +9,6 @@
     "lat": 27.1751,
     "lon": 78.0421
   },
-  {
-    "id": "p18",
-    "title": "Amazon River",
-    "image": {
-      "src": "amazon-river.jpg",
-      "alt": "Navigating the waters of the Amazon River, surrounded by dense rainforest."
-    },
-    "lat": -3.4653,
-    "lon": -58.38
-  },
   {
     "id": "p9",
     "title": "Great Barrier Reef",
@@ -28,5 +18,15 @@
     },
     "lat": -18.2871,
     "lon": 147.6992
+  },
+  {
+    "id": "p18",
+    "title": "Amazon River",
+    "image": {
+      "src": "amazon-river.jpg",
+      "alt": "Navigating the waters of the Amazon River, surrounded by dense rainforest."
+    },
+    "lat": -3.4653,
+    "lon": -58.38
   }
 ]

proxy.conf.js

@@ -1,5 +1,5 @@
-// var defaultTarget = 'http://localhost:3000';
-var defaultTarget = 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io';
+var defaultTarget = 'http://localhost:3000';
+// var defaultTarget = 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io';
 
 module.exports = [
   {

src/app/app.config.ts

@@ -1,8 +1,15 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 
 import { routes } from './app.routes';
+import { LoggingInterceptor } from './services/interceptors/logging.interceptor';
+import { RetryInterceptor } from './services/interceptors/retry.interceptor';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([LoggingInterceptor, RetryInterceptor])),
+  ],
 };

src/app/services/interceptors/error.interceptor.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { HttpErrorResponse, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import { catchError, throwError } from 'rxjs';
+
+export const ErrorInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  return next(req).pipe(
+    catchError((err: any) => {
+      if (err instanceof HttpErrorResponse) {
+        // Handle HTTP errors
+        if (err.status == 401) {
+          // Specific handling for unauthorized errors
+          console.error('Unauthorized request:', err);
+          // You might trigger a re-authentication flow or redirect the user here
+        } else {
+          // Handle other HTTP error codes
+          console.error('HTTP error:', err);
+        }
+      } else {
+        // Handle non-HTTP errors
+        console.error('An error occurred:', err);
+      }
+
+      // Re-throw the error to propagate it further
+      return throwError(() => err);
+    }),
+  );
+};

src/app/services/interceptors/logging.interceptor.ts

@@ -0,0 +1,48 @@
+import { HttpHandlerFn, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+
+/*
+// DI based / class based interceptors
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest  } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class LoggingInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    console.log('Interceptor: ', req);
+    return next.handle(req);
+  }
+}
+
+// use the below code in 'AppModule'
+@NgModule({
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }
+  ]
+})
+export class AppModule {}
+/*
+
+
+/*
+export function LoggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
+  console.log('Interceptor: ', req);
+  return next(req);
+}
+*/
+
+export const LoggingInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  const newReq = req.clone({
+    headers: req.headers.set('new-Header', 'headerValue'),
+  });
+
+  // const newReq = req.clone({
+  //   setHeaders: {
+  //     'new-Header': 'headerValue'
+  //   }
+  // });
+
+  console.log('Interceptor: ', newReq);
+  return next(newReq);
+};

src/app/services/interceptors/retry.interceptor.ts

@@ -0,0 +1,76 @@
+import { HttpErrorResponse, HttpHandlerFn, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
+import { retry, timer } from 'rxjs';
+// import { mergeMap, retryWhen, of } from 'rxjs';
+
+const maxRetries = 3;
+const delayMs = 2000;
+
+export const RetryInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  return next(req).pipe(
+    retry({
+      count: maxRetries,
+      delay: (error: HttpErrorResponse, retryCount) => {
+        if (error.status == 401) {
+          console.log(req.url, ' : 401 retrying...', retryCount);
+          return timer(delayMs);
+        } else if (error.status >= 500) {
+          console.log(req.url, ' : 500 retrying...', retryCount);
+          return timer(delayMs);
+        } else {
+          console.log(`${req.url} : ${error.status} retrying... ${retryCount}`);
+          return timer(delayMs);
+        }
+        throw error;
+      },
+    }),
+  );
+};
+
+/*
+// Simple retry
+export const RetryInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  return next(req).pipe(
+    retry(maxRetries)
+  );
+}
+*/
+
+/*
+// using 'retryWhen' for status based retry
+export const RetryInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  return next(req).pipe(
+    retryWhen((error) => {
+        return error.pipe(
+          mergeMap((err, index) => {
+            if (err.status == 401 && index < maxRetries) {
+              return of(err).pipe(
+                delay(delayMs)
+              )
+            }
+            throw err;
+          })
+        )
+      }
+    )
+  );
+}
+*/
+
+/*
+// using 'retryWhen' generally
+export const RetryInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  return next(req).pipe(
+    retryWhen((error) => {
+        return error.pipe(
+          scan((retryCount, error) => {
+            if (retryCount >= maxRetries) {
+              throw error
+            }
+            return retryCount + 1
+          }, 0)
+        )
+      }
+    )
+  );
+}
+*/

src/environments/environment.development.ts

@@ -1,4 +1,4 @@
 export const environment = {
-  backendUrl: 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/',
-  // backendUrl: 'http://localhost:3000/',
+  // backendUrl: 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/',
+  backendUrl: 'http://localhost:3000/',
 };

src/main.ts

@@ -1,19 +1,22 @@
 import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
+
+/*
+import { bootstrapApplication } from '@angular/platform-browser';
 import { HttpHandlerFn, HttpRequest, provideHttpClient, withInterceptors } from '@angular/common/http';
 
 import { AppComponent } from './app/app.component';
 
 function loggingInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn) {
-  /*
-  const newReq = req.clone({
-    headers: req.headers.set('new-Header', 'headerValue')
-  });
-  */
-
   console.log('Interceptor: ', req);
   return next(req);
 }
 
 bootstrapApplication(AppComponent, {
   providers: [provideHttpClient(withInterceptors([loggingInterceptor]))],
 }).catch(err => console.error(err));
+*/