Angular how to use HttpClient in custom ErrorHandler?

Question

I would like to call my rest API in my custom error handler to email myself when the handler is called.

I have tried to use the Injector, but I get this error:

Error: Cannot instantiate cyclic dependency! HttpClient

Here you can see my error handler:

import { Router } from '@angular/router';
import { ErrorHandler, Injector, Injectable, NgZone } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AppErrorHandler extends ErrorHandler {

  constructor(private injector: Injector) {
    super();
  }

  private get toastrService(): ToastrService {
    return this.injector.get(ToastrService);
  }

  private get http(): HttpClient {
    return this.injector.get(HttpClient);
  }

  private get router(): Router {
    return this.injector.get(Router);
  }

  private get ngZone(): NgZone {
    return this.injector.get(NgZone);
  }

  public handleError(error: any): void {
    if (error.status === 401) {
      this.ngZone.run(() => this.router.navigate(['/home']));
      this.toastrService.error('Login first', 'Error');
    } else if (error.status === 403) {
      this.ngZone.run(() => this.router.navigate(['/home']));
      this.toastrService.error('unauthorize', 'Error');
    } else {
      this.http.post<any>('/api/error-mailer', error).subscribe(() => { });
      this.toastrService.error('Something went wrong', 'Error', { onActivateTick: true });

    }

    super.handleError(error);
  }
}

I might also have the wrong aproach so if you could help me that be great!

Totati · Accepted Answer · 2020-04-21 15:53:52Z

3

You should handle httpClient errors with a http interceptor. In the interceptor you can inject the services you need. However you should keep an eye on calling a http request from the interceptor, cause it will run through the interceptor, and you can end up having a loop when your error-mailer is down.

edited Apr 21, 2020 at 15:53

answered Apr 21, 2020 at 15:46

Totati

1,62214 silver badges26 bronze badges

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

1 Comment

Leccho Over a year ago

Thanks for the answer. I moved the 401 and 403 into an http interceptor. I still want to send an email there for all the typescript erros (Just in case). Also I added error handling in my subscribe for so there won't be any loop.

Collectives™ on Stack Overflow

Angular how to use HttpClient in custom ErrorHandler?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related