Angular httpClient interceptor error handling

Question

after reading the documentation on angular about http client error handling, I still don't understand why I don't catch a 401 error from the server with the code below:

export class interceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('this log is printed on the console!');

        return next.handle(request).do(() => (err: any) => {
            console.log('this log isn't');
            if (err instanceof HttpErrorResponse) {
                if (err.status === 401) {
                    console.log('nor this one!');
                }
            }
        });
    }
}

on the console log, I also get this:

zone.js:2969 GET http://localhost:8080/test 401 ()

core.js:1449 ERROR HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "OK", url: "http://localhost:8080/test", ok: false, …}

Titukedo · Accepted Answer · 2019-05-13 09:06:30Z

12

Your error handler needs to return a new Observable<HttpEvent<any>>()

return next.handle(request)
    .pipe(catchError((err: any) => {
        console.log('this log isn't');
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                console.log('Unauthorized');
            }
        }

      return new Observable<HttpEvent<any>>();
    }));

answered May 13, 2019 at 9:06

Titukedo

9701 gold badge14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit Chigadani · Accepted Answer · 2018-06-23 11:10:59Z

10

You should catch an error using catchError

return next.handle(request)
      .pipe(catchError(err => {
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                console.log('this should print your error!', err.error);
            }
        }
}));

answered Jun 23, 2018 at 11:10

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

10 Comments

Amit Chigadani Over a year ago

Read more about it here angular.io/guide/http#getting-error-details

sarahwc5 Over a year ago

I get this error: TS2345: Argument of type '(err: any) => void' is not assignable to parameter of type '(err: any, caught: Observable<HttpEvent<any>>) => ObservableInput<{}>'. Type 'void' is not assignable to type 'ObservableInput<{}>'.

Amit Chigadani Over a year ago

I just mentioned the syntax for catching errors. You should return the error or properly handle it in there. for ex you can do return Observable.throw(err); You could also change your return type to Observable<any> instead of Observable<HttpEvent<any>>

sarahwc5 Over a year ago

What should be the correct return result if I just want "nothing to happen" (ie, it wasn't an error) ?

sarahwc5 Over a year ago

I tried adding return Observable.empty<HttpEvent<any>>(), but I still get a ' EmptyError: no elements in sequence' printed in the console

|

Daniel Caldera · Accepted Answer · 2018-06-23 09:40:09Z

1

You must pass the argument value to the do function of the stream, not create a new function inside it:

return next.handle(request)
    .do((err: any) => {
        console.log('this log isn't');
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                console.log('nor this one!');
            }
        }
    });

answered Jun 23, 2018 at 9:40

Daniel Caldera

1,1291 gold badge9 silver badges17 bronze badges

2 Comments

sarahwc5 Over a year ago

I still don't get the 'nor this one' log.

Daniel Caldera Over a year ago

Add a debugger inside the do, check what is the response that comes from the server and check why is not matching the two ifs.

Oleksii · Accepted Answer · 2018-11-01 22:13:28Z

0

It is off top, but Angular has better opportunity handle errors than interceptor. You can implement your own ErrorHandler. https://angular.io/api/core/ErrorHandler

answered Nov 1, 2018 at 22:13

Oleksii

596 bronze badges

3 Comments

Erik Philips Over a year ago

When someone goes on Stack Exchange, the question "answer" should actually contain an answer. Not just a bunch of directions towards the answer..

Oleksii Over a year ago

It is the answer. Move to off Angular documentation, not only copy-paste.@ErikPhilips

Black Mamba Over a year ago

How to implement it for handling network errors? The documentation doesn't has much for specific use case @Oleksii

Muhammed Moussa · Accepted Answer · 2020-02-12 17:40:27Z

here some example I'm using:

export class ErrorHandlerInterceptor implements HttpInterceptor {

    intercept(
        request: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        const loadingHandlerService = this.inej.get(LoadingHandlerService);
        const errorHandlerService = this.inej.get(ErrorHandlerService);

        return next.handle(request)
            .pipe(
                catchError(err => {
                    loadingHandlerService.hideLoading();
                    if (err instanceof HttpErrorResponse) { errorHandlerService.handleError(err) }
                    return new Observable<HttpEvent<any>>();
                })
            );
    }

    constructor(private inej: Injector) { }
}

Collectives™ on Stack Overflow

Angular httpClient interceptor error handling

5 Answers 5

Comments

10 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

10 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related