title: angular ErrorHandler not working for 500 status code
body: <p>I'm working on a global error handler for my angular 7 app that will handle errors from both the client and the server. I am implementing ErrorHandler for the global error handlers and HttpInterceptor to catch server errors. What I want to have happen is have the page redirected to a generic error page once its received. I have tested it out with a 404 and it will redirect correctly. However when I try to catch a 500 error, it gets caught by my HttpInterceptor method, but will not throw as an error to the global error handler. I am using RxJS's throwError method, and have also tried throwing a new HttpErrorResponse, but neither of them worked for the 500. Details below:</p>
  
  <p><strong>global-error-handler.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class GlobalErrorHandler implements ErrorHandler {
  
      private router: Router;
  
      constructor(private injector: Injector, private zone: NgZone) {
          setTimeout(() =&gt; {
              this.router = this.injector.get(Router);
          });
      }
  
      handleError(error: Error | HttpErrorResponse) {
  
          // handle HTTP errors
          if (error instanceof HttpErrorResponse) {
              console.log('error message: ' error) // logs for 404, but not 500
              const {status, message} = error;
              this.zone.run(() =&gt; this.router.navigate(['/error', {status, message}]));
              console.error(error);
          } else {
              // handle client side errors
              this.zone.run(() =&gt; this.router.navigate(['/error', {message: error.message}]));
              console.error(error);
          }
  
      }
  }
  </code></pre>
  
  <p><strong>server-error-interceptor.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class ServerErrorInterceptor implements HttpInterceptor {
  
      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; {
                  console.log('error message', error); // logs for both 404 and 500
                  return throwError(error);
                  // throw new HttpErrorResponse(error);
              }),
              tap((event: HttpResponse&lt;any&gt;) =&gt; {
                  // catch errors that come as JSON response from server
                  const { body } = event;
                  if (body &amp;&amp; body.error) {
                      throw new Error(body.error);
                  }
              }),
          );
      }
  
  }
  </code></pre>
  
  <p>Details about the simulated errors: 
  the 404 is just a bad url to my API, the 500 doing a POST request with a bad body that the API method can't understand. I can see the standard server code errors in the console for both but it doesnt  go through the errorhandler for the 500. im wondering if this has to do with my understanding of the rxjs operators. Thanks in advance!</p>
  
  <p><strong>UPDATE:</strong> </p>
  
  <p>I managed to figure out what was happening. The issue did indeed relate to RxJS. On observing the initial method that calls the api, I saw that the subscription provided a callback for an error that did not throw or handle it in a way that the global error interceptor would pick up on:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.service.postSearchQuery()
    .subscribe((res: any) =&gt; {
      // do something
    },
    err =&gt; {
      // do something here that does not throw an error
  }
  </code></pre>
  
  <p>If your observable takes a callback for the error, the throwError operator will be returned to the observer and will not be picked up by the global error interceptor.</p>