Styjun

I'm getting a 500 server error (which I expect) but my current implementation does not capture the error. Instead of capturing the error in the component and handling it, the app produces a 500 server error in the browser console and the execution gets halted and the loading spinner remains. I'm having a hard time figuring this out. I've restructured the promise a few different ways with no luck.

** Update **

I updated the service to use reject in the promise but that still did not work.

Component code

save() 
 this.loading = true; this.itemService.updateItems(this.updatedItems, this.activeCompanyId).then(() => 
 this.loading = false;
 ).catch((err) => 
 console.log("Error updating items", err);
 );
 

Service code

updateItems(items:Item[], companyId) 
 let headers = new HttpHeaders()
 .set("Content-Type", "application/json")
 .set("CompanyId", companyId);

 return new Promise((resolve, reject) => 
 this.http.post(`$this._config.API_URL`, items, headers ).subscribe(
 data => 
 resolve(data);
 ,
 err => 
 console.log('Error updating items', err);
 reject(err);
 
 );
 );
 

In case of an error, you want to reject the Promise:

updateItems(items:Item[], companyId) 
 let headers = new HttpHeaders()
 .set("Content-Type", "application/json")
 .set("CompanyId", companyId);

 return new Promise((resolve, reject) => 
 this.http.post(`$this._config.API_URL`, items, headers ).subscribe(
 data => 
 resolve(data);
 ,
 err => 
 console.log('Error updating items', err);
 reject(err);
 
 );
 );
 

I think the solution to your issue might be the http interceptor: https://angular.io/api/common/http/HttpInterceptor

create a file (for example error-interceptor.ts and inside add the following (be sure to add this class to your module's providers)

@Injectable()
export class ErrorInterceptor implements HttpInterceptor 
constructor() 

intercept(req: HttpRequest<any>, next: HttpHandler) 
 return next.handle(req).pipe(
 catchError((errorResponse: HttpErrorResponse) => 
 console.error(errorResponse.error); 
 )
 );

providers: [
 provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true 
],

As the name implies, you can now "intercept" all incoming http responses and check for an error. Depending on what you're using to send back your response on the backside, your response after an error (this is express).

res.status(500).json( message: "Server Boo-Boo" );

Then you can access the message with:

errorResponse.error.message;

I was able to solve the issue by using an HttpIntercepter

import Injectable from "@angular/core";
import 
 HttpRequest,
 HttpHandler,
 HttpEvent,
 HttpInterceptor,
 HttpErrorResponse
 from "@angular/common/http";
import Observable, of, throwError from "rxjs";
import catchError from 'rxjs/operators';


@Injectable()
export class AuthInterceptor implements HttpInterceptor 

 constructor(public auth: AuthService, public navService: NavService) 

 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
 let request = req.clone(
 withCredentials: true
 );

 return next.handle(request).pipe(catchError((err, caught) => 
 if (err instanceof HttpErrorResponse) 
 if (err.status === 500) 
 return throwError(err)
 
 
 return of(err);
 ) as any);