How to read Custom error message from backend in A

Question

API

add(data) {
 return this.httpClient.post<any>('/api/v3/templates', data);
}

Observable

this.templateService.add(obj)

.subscribe(
 (response) => { 
  console.log(reposne)
 },
(error) => {
 console.log(error)
 }
);

My Post API gives back a error with some Message in response as Name Already Exists But i am not able to get that in error Object which is printed to console

The object which is printed is
{
    error:null
    headers:HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, 
    lazyInit: ƒ}
    message:"Http failure response for http://localhost/api/v3/templates: 
400 Bad Request"
    name:"HttpErrorResponse"
    ok:false
    status:400
    statusText:"Bad Request"
    url:"http://localhost/api/v3/templates"

}

how can I get the message that I am getting in response as my error object doesn't have that response body.

Answer 1

In Observable there are three options.

• Next - which you subscribed to get the data
• Error - Its the next function you passed to the subscribe method. It contains the error status code and mostly http error like error in connection, bad request.
• finally - its execute any how after all.

there are others too like map, debounce etc.

  this.templateService.add(obj)
    .subscribe(
      (response) => {  // this is the next and hold the response
        console.log(response)
      },
      (error) => { // this is the error
        console.log(error)
      },
      (finall) => { // this is final and execute alwasys
        console.log('this is the final piece of code to execute')
      }
    );

I think you your case the error might not coming in http standard and might be coming in subscribe.

So check if the customized message is coming in next rather as an error.

Answer 2

The error returned is normally an instance of HttpErrorResponse, with an error property containing the wrapped error (client or server)

https://angular.io/guide/http#getting-error-details

So normally you should be able to handle the error like this.

add(data) {
 return this.httpClient.post<any>('/api/v3/templates', data)
  .pipe(
      catchError(this.handleError)
    );
}

private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error.message);
  } else {
    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
      `Backend returned code ${error.status}, ` +
      `body was: ${error.error}`);
  }
  // return an ErrorObservable with a user-facing error message
  return new ErrorObservable(
    'Something bad happened; please try again later.');
};

If the error property is null this could be because the server does not return anything. Did you check using postman or some other tool that your server returns the appropriate response?

Answer 3

You can use a typed response:

On your error notification type you could have something like:

err =>  {
        this.localErrorResponse = err as ErrorResponse;
        this.message= this.localErrorResponse.message;
      }

before, in your class:

import { ErrorResponse } from './error-response';
...
localErrorResponse: ErrorResponse;
message: string;

and then, your ErrorResponse can be like:

import { HttpHeaders} from './http-headers';

export class ErrorResponse{
  error: any;
  headers: HttpHeaders;
  message: string;
  name: string;
  ok: boolean;
  status: number;
  statusText: string;
  url: string;
}

and class HttpHeaders

export class HttpHeaders {
  normalizedNames: any;
  lazyUpdate: any;
  lazyInit: any;
}

then you can map some other variables, as message (this.message)