title: Error Handling in Services - Angular 4
body: <p>This question is more about the best practice for error handling within Angular 4.</p>
  
  <p>After the reading the Angular 4 <a href="https://angular.io/guide/styleguide#talk-to-the-server-through-a-service" rel="nofollow noreferrer">documentation</a> I've found that all error handling should be done in the <code>Services</code> and the <code>Components</code> don't need to worry about that.</p>
  
  <p>Currently I handle the error within the my <code>subscribe</code> call to my <code>observable</code>.</p>
  
  <pre><code>logIn(){
  
    this._userService.logIn({"email":this.loginForm.value.email,"password": this.loginForm.value.password})
    .subscribe(
    data =&gt; {//handle data here},
  
    (err: HttpErrorResponse) =&gt; {
      if (err.error instanceof Error) {
        // A client-side or network error occurred. Handle it accordingly.
        console.log('An error occurred:', err.error.message);
      } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong,
        console.log(`Backend returned code ${err.status}, body was: ${err.error.message}`);
      }
    }
  )}
  </code></pre>
  
  <p>Im struggling to handle errors within <code>Data Service</code>. Im looking for some professional advice on how I can handle errors properly.</p>
  
  <p><strong>My Data Service:</strong></p>
  
  <pre><code>logIn(body): Observable&lt;any&gt;{
  return this._http.post('http://localhost:3000/api/login', body)
    .do(data =&gt; console.log('Login: ' + JSON.stringify(data)))
  }
  </code></pre>