What steps should be taken to automatically redirect to a different page upon encountering an HTTP error?

Question

What steps should be taken to automatically redirect to a different page upon encountering an HTTP error?

In my Angular project, I've integrated the following code within a class that extends Angular's HttpInterceptor:

handleError(error: unknown): Promise<boolean> {
        if (error instanceof HttpErrorResponse) {
            return this.router.navigate([NOT_FOUND_URL, this.errorDescriptionProvider.getHttpErrorDescription(error)]);           
        }
        else
            return this.router.navigate([NOT_FOUND_URL, this.errorDescriptionProvider.getUnspecifiedNetworkErrorDescription()])
    }

and also this:

intercept(req: HttpRequest<T>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const stream =  next
        .handle(req)
        .pipe
        (
           catchError(x => from(this.handleError(x)))              
        );

        //Encountering an error stating that it is not assignable to Observable<HttpEvent<unknow>> due to its type being Observable<boolean |....>
        return  stream;
}

What's the best way to achieve automatic redirection on HTTP errors?

angular typescript angular-http-interceptors

Answer 1

Answer №1

If any unauthorized requests are made, they will be redirected to the Login page.

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";
import { Router } from "@angular/router";
import { tap } from "rxjs/internal/operators";


@Injectable()
export class UnAuthorizedInterceptor implements HttpInterceptor {
  constructor(private router: Router) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(tap(() => { },
      (err: any) => {
        if (err instanceof HttpErrorResponse) {
          if ((err.status === 401) || (err.status === 403)) {
            this.router.navigate(['/login']);
          } else {
            return;
          }
        }
      }));
  }
}

Add

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

as a provider in app.module.ts file

Answer 2

If any unauthorized requests are made, they will be redirected to the Login page.

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";
import { Router } from "@angular/router";
import { tap } from "rxjs/internal/operators";


@Injectable()
export class UnAuthorizedInterceptor implements HttpInterceptor {
  constructor(private router: Router) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(tap(() => { },
      (err: any) => {
        if (err instanceof HttpErrorResponse) {
          if ((err.status === 401) || (err.status === 403)) {
            this.router.navigate(['/login']);
          } else {
            return;
          }
        }
      }));
  }
}

Add

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

as a provider in app.module.ts file

Answer 3

Answer №2

If you need to redirect to an error page in your Angular application, simply inject the Router into your service and use navigate.extra to send the data along.

A helpful service

  getData()
  {
    return throwError({error:"NotExist"}).pipe(catchError(x=>{
      return this.error(x)
    }))

  }
  error(x):Observable<any>
  {
    console.log(x)
    this.router.navigate(['/error'],{ state: { error: x } })
    return of(null);
  }

Your error.component

@Component({
  selector: 'error',
  template: `<h1>ERROR</h1>
  <pre>{{ state$ | async | json }}</pre>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class ErrorComponent implements OnInit  {
private state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) { }
    ngOnInit() {
      this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

}

Check out the updated sample on StackBlitz

Answer 4

If you need to redirect to an error page in your Angular application, simply inject the Router into your service and use navigate.extra to send the data along.

A helpful service

  getData()
  {
    return throwError({error:"NotExist"}).pipe(catchError(x=>{
      return this.error(x)
    }))

  }
  error(x):Observable<any>
  {
    console.log(x)
    this.router.navigate(['/error'],{ state: { error: x } })
    return of(null);
  }

Your error.component

@Component({
  selector: 'error',
  template: `<h1>ERROR</h1>
  <pre>{{ state$ | async | json }}</pre>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class ErrorComponent implements OnInit  {
private state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) { }
    ngOnInit() {
      this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

}

Check out the updated sample on StackBlitz

Answer 5

Answer №3

To ensure smooth navigation, adjust your handleError function to have a return type of void.

Additionally, in the catchError block:

  catchError(err => {
    if (err instanceof HttpErrorResponse) {
      //invoke your handle error function
       handleError(err);
    }
    return throwError(err);
  }),

Answer 6

To ensure smooth navigation, adjust your handleError function to have a return type of void.

Additionally, in the catchError block:

  catchError(err => {
    if (err instanceof HttpErrorResponse) {
      //invoke your handle error function
       handleError(err);
    }
    return throwError(err);
  }),

What steps should be taken to automatically redirect to a different page upon encountering an HTTP error?

Answer №1

Answer №2

Answer №3

Similar questions

Guide to implementing real-time filtering for a table through user input in a text box

Is there a way to inject a parent component into a shared directive without explicitly stating the component type?

Disabling the background shadow effect in Angular Material's Accordion

"Using Angular's NgFor directive to efficiently organize and collapse data within

Incorporating an Angular Application into an Established MVC Project

A guide to sorting through in-app notifications in REACT-NATIVE based on their read status

What is the best way to programmatically set attributes on an HTML element or include HEAD/(LINK|TITLE) elements in Angular?

Troubleshooting column alignment with Bootstrap4 and Angular: Resolving issues with text alignment on

Angular initiates the creation of cross-origin HTTP requests

Expanding Generic Interfaces in Typescript

Enable a VueJS directive on-the-fly from a separate directive

In Angular, there is a situation where two input fields are both referencing the same event.target

The compatibility between TypeScript and the Node.js crypto module is currently not fully optimized

The futuristic async-routing capabilities of Angular 2.0.0-rc1

Leveraging Angular 4-5's HttpClient for precise typing in HTTP requests

Is there a different way to access the prohibited secure route?

Using Angular's ElementRef to set focus on an ion-textarea: "The 'setFocus' property is not found on the 'ElementRef' type."

What is the process of extracting multiple attributes from an object that has been selected by a user using mat-options (dropdown list) in Angular?

Typegoose and NestJS: The 'save' property is not found on this type

Using Angular5 to extract coordinates from the Google Maps v3 API when a map "click" event occurs