How to prevent the display in the logs of error when using angular httpClient.get?

Question

I've the following method:

  retrieveAccessToken() {
    this.httpClient
      .get(environment.backendUrl + 'accounts/refresh-token')
      .subscribe({
        next: (response) => {
          this.handleLogginResponse(response);
        },
        error: (err) => {
          console.log(`Ohoh, error while retriving refresh token`, err);
        },
      });
  }

It works fine. This method is used to retrieve the access token based on the HttpOnly token stored in the cookies. Since it's an HttpOnly cookie, I've no way of knowing if there is a token and if it's valid. So when the application, it requests the server, and the server will:

1. Return the access token(and a refreshed refresh-token) if it's valid
2. return a 401 unauthorized error if it's not valid.

The method work, but currently, I get anway in the error logs of the browser, the error:

My question is: How do I prevent the display of the error in this case? I don't want to use an interceptor that catch all, since it's only for this case.

Answer 1

You can use catchError operator to catch any errors and then return an EMPTY observable to suppress the error!

retrieveAccessToken() {
  this.httpClient
    .get(environment.backendUrl + 'accounts/refresh-token')
    .pipe(
      catchError(error => EMPTY)
    )
    .subscribe({
      next: (response) => {
        this.handleLogginResponse(response);
      }
    });
}

Answer 2

You could add in the devMode logic to your console log:

      retrieveAccessToken() {
        this.httpClient
          .get(environment.backendUrl + 'accounts/refresh-token')
          .subscribe({
            next: (response) => {
              this.handleLogginResponse(response);
            },
            error: (err) => {
              if (isDevMode()) {
              console.log(`Ohoh, error while retriving refresh token`, err);
              }
            },
          });
      }

Answer 3

Option 1

Even though you said you don't want to, your best bet is to implement a HttpInterceptor if you'd like to handle HTTP errors in general:

create the interceptor

@Injectable()
export class CustomErrorHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err) => {
        if (err instanceof HttpErrorResponse && !environment.production) {
          // <-- at this point you can check the err object and do something else if you'd like
          if (err.status == 401){
            console.log(`Ohoh, unauthorized`, err);
          } else {
            console.log(`Ohoh, http error`, err);  
          }
        }
        return throwError(err);
      })
    );
  }
}

and provide the interceptor in your app's main module

@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
...

This should display the error in console when in dev mode, but not in production mode

Option 2

if your intention is really to handle it only at that servicecall, you should use a more usual rxjs pattern, as per angular docs, this will keep you out of the trouble other patterns can get you into. Btw, there is nothing wrong with your code to handle this specific error, it is only missing a condition to not write the error to the console when necessary.

You should also instead of subscribing at the service, return the http client's observable:

retrieveAccessToken() {
  return this.httpClient.get(environment.backendUrl + 'accounts/refresh-token').pipe(
    catchError((err) => {
       if(!environment.production) 
          console.log(`Ohoh, error while retrieving refresh token`, err);

      // re-throw the error otherwise you would have to handle an "incorrect" non-error response when subscribing to the service
      return throwError(err);
    })
  );
}

Then when you use it from your component, that's when you subscribe:

componentFunction() {
  this.yourService.retrieveAccessToken().subscribe(() => {
    // do something if necessary
  })
}