CODEWITHSUNDEEP
angularpromisehttp-post
Smooth
Smooth

Reputation: 956

Angular 7 - How to capture 500 server error on http.post when returning a new Promise?

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);
        }
      );
    });
  }

Upvotes: 0

Views: 5658

Answers (3)

Smooth
Smooth

Reputation: 956

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);
  }
}

Upvotes: 0

docb45
docb45

Reputation: 304

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;

Upvotes: 0

sloth
sloth

Reputation: 101052

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);
        }
      );
    });
  }

Upvotes: 2

Related Questions