Generic error handling between asp.net webapi and Angular 4

Question

I am trying to pass errors from my API to the Angular 4 application. The problem is that on the angular side I do not see proper error message:

Web Api error is generated like this:

        throw new HttpResponseException(
            new HttpResponseMessage(HttpStatusCode.BadRequest)
            {
                Headers = {{"errorMessage", "Message in header"}},
                Content = new StringContent("Message in body")
            }
        );

My angular code is something like:

    return this._http.get<IMyObj[]>(this._serviceUrl)
      .do(this.handleSuccessResponse)
      .catch(this.handleErrorResponse);

    protected handleErrorResponse(err: HttpErrorResponse) {
        console.info(err);
        // some logic based on code
    }

The problem is that if I check err it's "error" property is null, message is "Response failed for url" and no custom header, however on the network tab in the browser I can see my custom header with error as well as error in body. How do I access any of this messages from my angular app?

DeborahK · Accepted Answer · 2017-10-18 21:48:47Z

3

My error handler looks like this:

private handleError(err: HttpErrorResponse) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    let errorMessage = '';
    if (err.error instanceof Error) {
        // A client-side or network error occurred. Handle it accordingly.
        errorMessage = `An error occurred: ${err.error.message}`;
    } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }
    console.error(errorMessage);
    return Observable.throw(errorMessage);
}

Notice that it uses the status and message properties, not the error property.

answered Oct 18, 2017 at 21:48

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

6 Comments

AlexanderM Over a year ago

In my client side logic I am actually having a switch on the status and for each status code I am doing something different. The problem is that the err.message is "Http failure response for localhost:56219/api/v1/test: 400 Bad Request", but in network tab in the response body I can see "Message in body" as well as I can see my custom header. My question is how do I access response body (or custom header) in my error handler.

DeborahK Over a year ago

Have you seen this: github.com/angular/angular/pull/18466 It says it's fixed.

AlexanderM Over a year ago

Could be very basic question, but how do I update only angular to the version that has this fix? I tried bulk update but having issues after that: angular/core common and zone.js are getting as unmet dependencies.

AlexanderM Over a year ago

After updating angular error property now has the body

Roxy'Pro Over a year ago

@DeborahK how do we recognize in this example. what's client side error and what's server side error ? if the error is instanceof Error that it's client side? could you add some more code of how you use it on real app, I mean how you are invoking this handleError method .. Thanks Deborah!

|

Suraj Kumar · Accepted Answer · 2019-01-14 10:21:33Z

You can Try this.

In this I am passing a search value. You can even try without that.

//Service.ts

import {catchError, map, tap } from 'rxjs/operators';
import {throwError} from 'rxjs';
import { HttpClient, HttpErrorResponse} from '@angular/common/http';

private employeeUrl="https://api.employee.new/dept/value.json?search=city:"
getdata(selectedtype): Observable<employee[]> {
return this.http.get<employee[]>(this.employeeUrl+selectedtype)
      .pipe(
  catchError(this.errorHandler)); 
}

errorHandler(error: HttpErrorResponse)
{
return throwError(error.message || 'Server Error')
}


//employeecomponent.ts

employeedata:any=[];
public errorMsg;
ngOnInit(){
this.dataService.getdata(this.search).subscribe(data =>this.employeedata=data,
                            error =>this.errorMsg=error);
}

//last you can bind it in the Html file

//employeecomponent.html

<h3>errorMsg</h3>

Collectives™ on Stack Overflow

Generic error handling between asp.net webapi and Angular 4

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related