Catching and handling backend errors in Angular

Question

I've read few other similar questions, but the information there didn't help me find the answer to my problem. I have trouble trying to pass errors that I manage to catch inside services to components. So this is my onSubmit method inside component, which registers an user:

    onSubmit({ value, valid }) {
      console.log(value, valid);
      if (valid) {
      this.userService.trySaveUser({ email: value.email, password: value.password.pass }).subscribe(
        (user) => {
          console.log('saved user ' + user.email);
        }),
        (error) => {
          console.log('inside error');
        };
      }
    }

It works as it should when everything is correct on backend side. But in case of error I can't manage to catch it here. However, it is caught in the service:

trySaveUser(body: User): Observable<any> {
    return this.http.post<any>(this.pathAPI + '/user', JSON.stringify(body), super.header()).pipe(
      catchError(super.handleError));
}

Inside super.HandleError method I retrieve data from the error and can print it into console without any problems. This method looks like this:

    public handleError(error: HttpErrorResponse | any) {
        //...fetching data from the error to errMsg

        //console.error(errMsg);
        return throwError(errMsg);
    }

I think I don't really know how it works, as I'd expect the error returned from the method above to be caught again in the component here:

(error) => {
  console.log('inside error');
};

...but it doesn't happen. Why so, and how can I correct this? I need to have it in component so that I can display the error message to the user. I'd be grateful for any help!

Can you try this throw errMsg; instead of return throwError(errMsg); — Amit Chigadani
– Amit Chigadani, Commented Dec 23, 2018 at 17:17
@AmitChigadani It won't let me do this, as catchError method requires Observable as argument. — Piotr Pieniak
– Piotr Pieniak, Commented Dec 23, 2018 at 17:22

Amit Chigadani · Accepted Answer · 2018-12-23 17:30:07Z

1

You are actually closing the subscribe block after success callback. Remove the extra bracket ( from there, so that you enclose error callback within subscribe.

this.userService.trySaveUser({ email: value.email, password: value.password.pass }).subscribe(
        (user) => {
          console.log('saved user ' + user.email);
        }, // remove extra bracket here
        (error) => {
          console.log('inside error');
        };
 )}  // add that bracket in this line

answered Dec 23, 2018 at 17:30

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Piotr Pieniak Over a year ago

Thank you, good sir! I've spent way too much time looking for the issue, and it turns out to be the silliest thing possible. Not a best way to start posting on SO... :) Thanks again!

Amit Chigadani Over a year ago

Welcome :) That happens and its a learning. Next time you will be quick to find it.

Collectives™ on Stack Overflow

Catching and handling backend errors in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related