title: Angular 4.3 HttpClient: catch webapi error response body
body: <p>I'm trying to handle errors returned by my .NET Core WebApi from an Angular 4.3 service using the new <code>HttpClientModule</code>.</p>
  
  <p>I'm making the http request as follows:</p>
  
  <pre class="lang-ts prettyprint-override"><code>postUser(model: IPostUser): Observable&lt;IUser&gt; {
      return this.http.post&lt;IUser&gt;(this.originUrl + '/api/registry', model)
          .catch((reason: any) =&gt; this.handleError(reason));
  }
  </code></pre>
  
  <p>the <code>handleError</code> method is:</p>
  
  <pre class="lang-ts prettyprint-override"><code>private handleError(error: HttpErrorResponse | any): ErrorObservable {
      // in a real world app, we might use a remote logging infrastructure
      let errStatus: string;
      let errMsg: string;
      if (error instanceof HttpErrorResponse) {
          try {
              const body: any = error.error || error;
              const err: string = body.message || JSON.stringify(body);
              errStatus = `${error.status} - ${error.statusText || ''}`;
              errMsg = `${err}`;
  
              if (error.status === 0) {
                  errMsg = 'Si é verificato un errore. Si prega di riprovare più tardi.';
              } else if (error.status === HttpStatusCodes.UNAUTHORIZED || error.status === HttpStatusCodes.FORBIDDEN) {
                  errMsg = 'Non hai effettuato l\'accesso.';
              }
          } catch (ex) {
              errMsg = 'Si é verificato un errore. Si prega di riprovare più tardi.';
          }
      } else {
          errMsg = error.message ? error.message : error.toString();
      }
      console.error(errStatus + ': ' + errMsg);
      this.toastrService.error(errMsg, 'Errore');
      return Observable.throw(errMsg);
  }
  </code></pre>
  
  <p>And the WebApi controller action makes the following security checks:</p>
  
  <pre class="lang-csharp prettyprint-override"><code>var user = await _userManager.FindByIdAsync(model.Id);
  if (user == null)
      return NotFound("Utente non trovato.");
  
  if ((await _userManager.FindByNameAsync(model.UserName)) != null)
      return BadRequest("Esite già un utente con questo Username.");
  else if ((await _userManager.FindByEmailAsync(model.Email)) != null)
      return BadRequest("Esite già un utente con questa Email.");
  else if ((await _userManager.Users.SingleOrDefaultAsync(u =&gt; u.TaxCode == model.TaxCode)) != null)
      return BadRequest("Esite già un utente con questo Codice Fiscale.");
  </code></pre>
  
  <p>So depending on what user try to post to the server, the server throw a NotFound or BadRequest respose with a body that is an object containing a message.</p>
  
  <p>A bad call to that WebApi action cause this error:</p>
  
  <blockquote>
    <p>undefined: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.</p>
  </blockquote>
  
  <p>I've tried to use an <em>HttpInterceptor</em> to catch the error response body:</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Injectable()
  export class ErrorInterceptor implements HttpInterceptor {
  
  constructor(private router: Router) { }
  
  intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      return next.handle(req).do((event: HttpEvent&lt;any&gt;) =&gt; {
          if (event instanceof HttpResponse) {
              // do stuff with response if you want
          }
      }).catch((error: any) =&gt; {
          if (error instanceof HttpErrorResponse) {
              let x = error;
              if (error.status === HttpStatusCodes.BAD_REQUEST || error.status === HttpStatusCodes.NOT_FOUND) {
                  return Observable.throw(error);
              }
          }
      })
  }
  </code></pre>
  
  <p>}</p>
  
  <p>But also with the interceptor the error is still the same anche the <code>catch</code> method right after the <code>post</code> call in the Angular service was called with the <code>TypeError</code> exception shown above rather than my custom error object.</p>
  
  <p>Any solution? How can I catch a BadRequest/NotFound error response from the server and get the error response body correctly?</p>
  
  <p>Thank you all in advance!</p>