Angular handleError: How to get custom API error messages?

Question

I'm trying to solve another Angular problem - can you help me? In my component I have a login function - like this:

    onLogin() {
    if (this.loginForm.valid) {
      const email = this.loginForm.get(['email']).value;
      const password = this.loginForm.get(['password']).value;

      this.ls.login(email, password).subscribe(
        result => {
          this.saveToken(result);
        },
        error => {
          this.errorMessage = error;
          this.loginForm.reset();
        }
    );

    } else {
      this.updateErrorMessage();
    }
  }

My service function looks like that:

login(email: string, password: string): Observable<string> {

    const apiUrl = environment.apiHostLumen + '/admin/login?email=' + email + '&password=' + password;

    const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    const options = new RequestOptions({ headers: headers });

    return this.http.get(apiUrl, options).pipe(
                    retry(3),
                    map(res => res.json()),
                    map(data => {
                      return data.token;
                    }),
                    catchError(this.ehs.handleError('login'))
    );

  }

Now I have implemented the function for error handling exactly as described in the documentation of Angular. I have outsourced the feature and it looks like that:

handleError<T> (operation = 'operation', result?: T) {
    return (error: HttpErrorResponse): Observable<T> => {

      const userMessage = error.message;

      return throwError(userMessage);
    };
  }

But how it's possible to access the body of the API response? error.message is always undefined. I only have access to the status code and url. How can I access the response body if the API returns an error code different from 200 ?

Thanks a lot

Typescript tells me error.json() is not available for type HttpErrorResponse — Sebastian S
– Sebastian S, Commented Jun 20, 2018 at 9:07
can you share your server side code, there might be case its returning error object without message — Pranay Rana
– Pranay Rana, Commented Jun 20, 2018 at 9:08
I'm voting to close this question as its already answered by OP — Pranay Rana
– Pranay Rana, Commented Jun 20, 2018 at 9:19

halfer · Accepted Answer · 2018-06-25 10:27:20Z

3

You can use a HttpInterceptor for this. From that you can handle all your http errors in a single class. You can read more about Intercepting requests and responses in the angular official doumetation.

And by using intercept method you can intercept each and every request and response.

 public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(req)
      .pipe(catchError(err => {
        if (err instanceof HttpErrorResponse) {
          this.onError(err);
        }
        return throwError(err);
      }));
  }



 private onError(response: HttpErrorResponse): void {
    const status: number = response.status;
    const serverErrorMessage = response.error;

    switch(status) {
      case 400:
        console.log("Bad request"); //or you can print the serverErrorMessage
      case 404:
        console.log("Not found");
    }
  }

edited Jun 25, 2018 at 10:27

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jun 20, 2018 at 9:06

Anuradha Gunasekara

7,0132 gold badges29 silver badges38 bronze badges

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

3 Comments

Pranay Rana Over a year ago

that is not needed in my application i get details without doing this stuff

Anuradha Gunasekara Over a year ago

But you have to handle the error of every request by your self. Same code will be repeated agin and again. That's not a good practice. When you implement a HttpInterceptor you don't have to do that. It will be handled by the interceptor. It will save your time.

Sebastian S Over a year ago

I have found the mistake, but nevertheless I will read in on this topic - it sounds interesting

Amit Chigadani · Accepted Answer · 2018-06-20 09:12:53Z

1

You can do error.error, which should give you the error response from the server.

handleError<T> (operation = 'operation', result?: T) {
    return (error: HttpErrorResponse): Observable<T> => {

      const userMessage = error.error; // should give error body

      return throwError(userMessage);
    };
}

Sources :

https://angular.io/api/common/http/HttpErrorResponse

Accessing HTTP Error Response Body from HttpInterceptor in Angular

answered Jun 20, 2018 at 9:12

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Comments

Sebastian S · Accepted Answer · 2018-06-20 09:15:06Z

1

I have found the mistake. Many thanks for your help! I renamed the error type to any and with error.json() I can actually access the response body as normal. I do not know how I could overlook that ...

Thanks! It seems to work!

answered Jun 20, 2018 at 9:15

Sebastian S

3971 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular handleError: How to get custom API error messages?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related