How to capture and handle HTTP errors within a form using Angular 8 and RxJS

Question

How to capture and handle HTTP errors within a form using Angular 8 and RxJS

I am currently working on intercepting requests using the following code:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let tokenPromise = this.storage.get('token');

    return from(tokenPromise).pipe(mergeMap(token => {
      let data = {
        headers: request.headers.set('MyToken', token)
      };
      let newReq = request.clone(data);
      return next.handle(newReq);
    }));

}

In addition to intercepting requests, I would like to know how I can also intercept 404 errors. Can anyone provide guidance on this?

angular typescript

Answer 1

Answer №1

Keep in mind that when using HttpClient, it returns an Observable. Therefore, you can handle errors just like with any other observable by utilizing the catchError method.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let tokenPromise = this.storage.get('token');
    return from(tokenPromise).pipe(
       mergeMap(token => {...}),
       catchError((error: HttpErrorResponse) => {
          if (error.status === 404) {
             // implement some logic
          }
          return throwError(error);
       })
    );
}

Answer 2

Keep in mind that when using HttpClient, it returns an Observable. Therefore, you can handle errors just like with any other observable by utilizing the catchError method.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let tokenPromise = this.storage.get('token');
    return from(tokenPromise).pipe(
       mergeMap(token => {...}),
       catchError((error: HttpErrorResponse) => {
          if (error.status === 404) {
             // implement some logic
          }
          return throwError(error);
       })
    );
}

Answer 3

Answer №2

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private auth: AuthenticationService, private notifier: NotificationService) {}

  intercept(req: HttpRequest<any>, nextHandler: HttpHandler): Observable<HttpEvent<any>> {
    return nextHandler.handle(req)
      .pipe(handleErrors((err) => {
        if (err.status === 404) {
          // handle error
        }
    }));
  }
}

Don't forget to include in your app.module.ts under providers:

{provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}

Answer 4

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private auth: AuthenticationService, private notifier: NotificationService) {}

  intercept(req: HttpRequest<any>, nextHandler: HttpHandler): Observable<HttpEvent<any>> {
    return nextHandler.handle(req)
      .pipe(handleErrors((err) => {
        if (err.status === 404) {
          // handle error
        }
    }));
  }
}

Don't forget to include in your app.module.ts under providers:

{provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true}

How to capture and handle HTTP errors within a form using Angular 8 and RxJS

Answer №1

Answer №2

Similar questions

Modify a attribute using event handlers from the main template

The json-server-auth feature is failing to function properly upon initialization

Tips for synchronizing arrays using the Angular Drag-Drop Component

Nested self-referencing in Typescript involves a structure where

What is the reason behind not being able to perform a null check on an array entry in Typescript

Is there a way to show text as symbols in Primeng components?

A guide on how to retrieve an observer from localStorage or another observer in Angular2

What is the best way to determine the appropriate version of angular/common needed to fulfill the dependencies?

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

Guide on installing an Angular8 application on a personal computer in a secure manner

Trigger a table refresh to display updated information

Importing ES Module is a requirement when making updates to Angular framework

"Although the Set-cookie is present in the response header, it is not being properly

Implementing styles on the parent document through the child document

Together, we have a shared Yarn JS directory for both the client and server components,

Unable to establish a value for the input field

Using the double question mark operator in React JS and Typescript

Mastering the nesting of keys in Typescript.Unlock the secrets of

Adjust the dimensions of the Angular Material checkbox component (mat-checkbox)

What is the best way to provide constructor arguments in Ionic 2 / Angular 2?