So I'm using httpClient.get() to make a REST call. I've set up the API to return a time out 504.
When looking at the Google devTools I can see that the call is made and the status is 504. but when I debug my code the HttpErrorResponse I get has status 0.
I also set up the API to return a 400 response and when I debug that code the Response status was 400. Why is the 400 propagated but the 504 is not?
We are using Angular 6.0.6
Better way of doing is to implement Error Handler. In my case I have a common class to make HTTP calls and all the services (ex: EmployeeService, SupplierService etc) will communicate to common API to make Rest API calls. Below is the sample code which handle the error. Here is what you will see if HTTP Status code is 404.
Server side Error - Code: 404 Message: Http failure response for http://localhost:5000/apiv1/account: 404 Not Found
Here is my Common Service looks like.
@Injectable({
providedIn: 'root'
})
export class ApiService {
getUrlvalue: string;
constructor(private http: HttpClient) { }
private formatErrors(error: any) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
errorMessage=`Client side Error: ${error.error.message}`;
} else {
errorMessage=`Server side Error - Code: ${error.status}\nMessage: ${error.message}`;
}
console.log(errorMessage);
return throwError(error.error);
}
get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
//console.log(`${environment.api_url}${path}`);
this.getUrlvalue = `${environment.api_url}${path}`;
console.log('API service get request is making to : ' + this.getUrlvalue);
return this.http.get(this.getUrlvalue, { params }) //, { params }
.pipe(
catchError(this.formatErrors)
);
}
put(path: string, body: Object = {}): Observable<any> {
console.log(`${environment.api_url}${path}`);
return this.http.put(
`${environment.api_url}${path}`,
JSON.stringify(body), httpHeaderOptions
).pipe(catchError(this.formatErrors));
}
post(path: string, body: Object = {}): Observable<any> {
console.log(`${environment.api_url}${path}`);
return this.http.post(
`${environment.api_url}${path}`,
JSON.stringify(body), httpHeaderOptions
).pipe(catchError(this.formatErrors));
}
delete(path): Observable<any> {
console.log(`${environment.api_url}${path}`);
return this.http.delete(
`${environment.api_url}${path}`
).pipe(catchError(this.formatErrors));
}
}From other service link AccountService this is how it's call for simple HTTP Get
@Injectable({
providedIn: 'root'
})
export class AccountService {
// private http: HttpClient
constructor(private apiService: ApiService) { }
getAccounts(): Observable<Deal[]> {
return this.apiService.get('/account')
.pipe(
tap(deals => console.log('fetched Accounts 111111')),
catchError(this.handleError('getAccounts', []))
);
}
Turns out our API Gateway wasn't set up correctly and we weren't returning the correct headers.
'Access-Control-Allow-Methods': 'POST,GET,OPTIONS',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',