How to catch http errors in angular(ionic)?

Question

I'm trying to catch HTTP error with error code 400 using the following code in a ionic4 application. But it fails to catch it, what's wrong in here. None of the console log lines executes, but in firefox console it shows 400 error.

export class AuthService {

  constructor(private httpClient: HttpClient)  {}

  login(email: string, password: string){

    const data = {
      password: password,
      email: email,
    }

    this.httpClient.post(url, data).pipe(
      tap((res: IAuthResponse) => {
        console.log("Catch error 1") 
        return res;
      }),
      catchError((error) => {
        console.log("Catch error 2")
        return Observable.throw(new Error(error.status));
      })
    ).subscribe( 
       (result) => {
         console.log("Catch error 3")
       },
       (error) => {
          console.log("Catch error 4")
       }
    );
  }

Actually i just want to handle this error in any of the place where i coded console.log line. Found many examples like this, but none of them works.

Edit : In my real code this, console log line 1 is in the AuthService class but the subscribe code is in a different class file. Both these classes has to do some initialization based on the results. So I need to have both of pipe code and subscribe code.

Chanaka Weerasinghe · Accepted Answer · 2019-07-19 07:50:59Z

7

this is the way that can be done

Here is working Example

this.httpClient.post("ssdsdsd", data).pipe(
      (res: any) => {
        console.log("Catch res ") 
        return res;
      },
    ).subscribe( 
       (result) => {
         console.log("Catch result ")
       },
       (error) => {
          console.log("Catch error ")
       }
    );

answered Jul 19, 2019 at 7:50

Chanaka Weerasinghe

5,8002 gold badges31 silver badges42 bronze badges

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

Comments

Adrita Sharma · Accepted Answer · 2019-07-19 06:32:33Z

3

No need to use pipe in httpClient You can try like this:

this.httpClient.post(url, data).subscribe((res: any) => {
}, (error) => {
  console.log("Catch error ")
})

answered Jul 19, 2019 at 6:32

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Sameera K Over a year ago

Thank you for the answer. I think my question is not detail enough. In my real code this, console log line 1 is in the AuthService class but the subscribe code is in a different class file. Both these classes has to do some initialization based on the results.

Amith Kumar · Accepted Answer · 2019-07-19 23:37:16Z

What you are trying to achieve is The Catch and Rethrow Strategy, as explained here in details. Its pretty straightward implementation, no matter if your pipe-catchError & subscription exists in same class or different, I can't think of a reason why your code is acting weird. I would say put debug points in your code and debug in chrome/firefox developer mode.

const http$ = this.http.get<Course[]>('/api/courses');

http$
    .pipe(
        catchError(err => {
            console.log('Handling error locally and rethrowing it...', err);
            return throwError(err);
        })
    )
    .subscribe(
        res => console.log('HTTP response', res),
        err => console.log('HTTP Error', err),
        () => console.log('HTTP request completed.')
    );

Ganesh · Accepted Answer · 2019-07-19 06:47:34Z

1

@Sameera.. you can catch the error (with status code) something like below,

this.httpClient.post(url, data, {observe: 'response'}).subscribe((res: IAuthResponse) => {
        console.log(res);
        return res;
   }, fail => {
          console.log(fail.status);
       }
   );

you don't need to use any pipe or other operators for this..

you can check more about this here httpClient response with Status code. hope this helps.. :)

answered Jul 19, 2019 at 6:47

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

1 Comment

Sameera K Over a year ago

Thank you for the answer. I think my question is not detail enough. In my real code this, console log line 1 is in the AuthService class but the subscribe code is in a different class file. Both these classes has to do some initialization based on the results

Collectives™ on Stack Overflow

How to catch http errors in angular(ionic)?

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related