title: Angular ErrorHandler and HttpErrorResponse
body: <p>Today I have decided to look more into some centralized error reporting for my Angular application. I used great article on Medium by Michael Karén (<a href="https://medium.com/angular-in-depth/expecting-the-unexpected-best-practices-for-error-handling-in-angular-21c3662ef9e4" rel="nofollow noreferrer">https://medium.com/angular-in-depth/expecting-the-unexpected-best-practices-for-error-handling-in-angular-21c3662ef9e4</a>) explaining how to handle both client-side and server-side problems and log them.</p>
  <p>In my sample project, I have a really simple interceptor:</p>
  <pre><code>export class HttpInterceptor implements NgHttpInterceptor {
    constructor(
      private auth : AuthService
    ) { }
    intercept(request : HttpRequest&lt;any&gt;, next : HttpHandler) : Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(request)
        .pipe(
          retry(1),
          catchError((error : HttpErrorResponse) =&gt; {
            return throwError(error);
          })
        );
    }
  }
  </code></pre>
  <p>And very simple ErrorHandler:</p>
  <pre><code>@Injectable()
  export class AppErrorHandler implements ErrorHandler {
    constructor(
      private readonly injector : Injector
    ) { }
    handleError(error : Error | HttpErrorResponse) {
      /** injectables */
      const errorService = this.injector.get(ErrorService);
      const loggingService = this.injector.get(LoggingService);
      /** initialize empty variables */
      let message : string;
      let stackTrace : string;
      if (error instanceof HttpErrorResponse) {
        console.log('server');
      } else {
        console.log('client');
      }
    }
  }
  </code></pre>
  <p>Yes, so far it is not really logging but that's not an issue. What I noticed, however, is that when using Angular's <code>HttpClient</code> and either 1) using <code>toPromise()</code> method rather than subscribing, or 2) subscribing to error on response, the error handler says that <code>error instanceof HttpErrorResponse</code> is false. So..</p>
  <p><strong>This will log 'server' correctly:</strong></p>
  <pre><code>this.httpClient.get('foo').subscribe()
  </code></pre>
  <p><strong>This will log 'client' incorrectly:</strong></p>
  <pre><code>this.httpClient.get('foo').subscribe(
    data =&gt; console.log,
    error =&gt; console.error
  )
  </code></pre>
  <p><strong>This will also log 'client' incorrectly:</strong></p>
  <pre><code>await this.httpClient.get('foo').toPromise()
  </code></pre>
  <p>As I am totally failing to understand what exactly is happening here and why is it an issue, would somebody please help me with correct error reporting of HTTP errors? I was thinking about logging those errors in HttpInterceptor, however when throwing them, the ErrorHandler would log them again as client errors.</p>
  <p><strong>Why do I use callback</strong>
  The use of callback is mostly because all these calls are in respective services. For example, user service fetches data from an endpoint, does something with the data and then resolves a promise (or finishes observer, whatever really)</p>
  <p>Edit:</p>
  <p>I have created a StackBlitz sample illustrating the problem: <a href="https://stackblitz.com/edit/angular-ivy-gjtxk2" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-gjtxk2</a></p>