angular - Rxjs catchError not working when subscribe after pipe

Question

I have created an observable to consume an API

Observable:-

    return this.http.post('/api/ApplicationUser/Login', loginDetails, httpOptions).pipe(
      map((result: any) => {
        localStorage.setItem('jwtToken', result.jwtToken);
        localStorage.setItem('refreshToken', result.refreshToken.value)
        localStorage.setItem('UserName', result.userName);
        return result;
      }),
      catchError((err: any) => {
        //this.userLogout()
        console.log('refresh error')
        return throwError(err);
      })
    );
  }

Above code is working fine by results or throwing errors according to my situations when Iam activating with below code:-

    this.loginService.getNewRefreshToken().subscribe(
      (res => { console.log(res) }),
      (err => { 
        this.loginService.userLogout()
        console.log(err)
      }),
      () => { console.log('subscription completed')},
    );

But my problem is when Iam activating it with below code its catchError not working but results are fine. Why catchError is not working in below case?

    return this.loginService.getNewRefreshToken().pipe(
      map((res: any) => {
        console.log(res);
      }),
      catchError((err: any) => {
        console.log(err);
        return throwError(err);
      })
    ).subscribe(
      (res => {
      console.log(res)
    }),
      (err => {
        console.log(err)
      })
      )

Answer 1

Your getNewRefreshToken function eats the exception hence it does not get propagated to upstream listeners.

Try throwError

 getNewRefreshToken(): Observable<any> {
   var loginDetails: LoginDetails = {
   email: localStorage.getItem('UserName'),
   grantType: 'refreshToken',
   password: '',
   refreshToken: localStorage.getItem('refreshToken')
  }

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'my-auth-token'
  }),
 };

return this.http.post('/api/ApplicationUser/Login', loginDetails, httpOptions).pipe(
  map((result: LoginResponse) => {
    localStorage.setItem('jwtToken', result.jwtToken);
    localStorage.setItem('refreshToken', result.refreshToken.value)
    localStorage.setItem('UserName', result.userName);
    return result;
  }),
  catchError((err: any) => {
    this.userLogout()
    console.log('refresh error')
    return throwError(err);  //<-- insert this 
  })
);
}

Sample See the results in console.