How to make my API call not give me a string as an error response but the error's body instead?

I have a problem with the management of an error for my API call in my Angular app:

sendRequest(request: BookingRequest): Observable<any>{
const authorityCode = this.tableService.enteId;
const baseUrl = this.getCarBookingBaseUrl(authorityCode);
const url = `${baseUrl}/api/Booking`;
const body = JSON.stringify(request);
return this.http.post<any>(url, body, { headers: this.buildBasicAuthHeaders() }).pipe(
map(_ => _.bookingId || 'Number not found'),
catchError(error => {
const errorMessage = error?.error?.message || 'Unknown error';
return throwError(() => new Error(`Error while sending request: ${errorMessage}`));
})
);}


This is my call which works if there are no errors. However, in case I get an error 406, in the Chrome's console I receive this in the response of the 406 error call:

{"message":"Invalid contract"}


This is what I want to receive when I subscribe to this function. In case I get error 406, I need to show this message on screen. Problem is that error in the catchError is always like this:

"Http failure response for https:INSERT_URL_HERE: 406 OK"


How can I manage the JSON that the error sends back to me with the message I need to show?

Continue reading...