title: .catch() in http.get not catching HTTP 500 error code
body: <p>In my Angular 2 app, I have a Service with an <code>http.get</code> method that returns an Observable.</p>
  
  <p><strong>campaign.service.ts</strong></p>
  
  <pre><code>public getCampaign(campaignId: string): Observable&lt;Campaign&gt; {
    return this.http.get(this.campaignsUrl + '/' + campaignId, options)
      .map(this.extractData)
      .catch(this.handleError);
  }
  
  private extractData(res: Response) {
    let body = res.json();
    return body.data || body || {};
  }
  
  private handleError(error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
  </code></pre>
  
  <p>I then call it in my Component, like so:</p>
  
  <p><strong>campaign.component.ts</strong></p>
  
  <pre><code>this.campaignService.getCampaign(paramId)
    .subscribe(
      obj =&gt; {
        // do something
      },
      () =&gt; {
        // handle error here
      }
    });
  </code></pre>
  
  <p>However, if the <code>http.get</code> call returns a HTTP 500, I never hit my <code>.catch(...)</code> section in my Service class. Console outputs an uncaught exception.</p>
  
  <pre><code>GET http://localhost:9001/api/v1/campaigns/4175edc4 500 (Internal Server Error)
  EXCEPTION: Response with status: 500 Internal Server Error for URL: http://localhost:9001/api/v1/campaigns/4175edc4
  Uncaught Response {_body: "{"message":"invalid input syntax for uuid: \"4175edc4\""}", status: 500, ok: false, statusText: "Internal Server Error", headers: Headers…}
  </code></pre>
  
  <p>What could I be doing wrong here?</p>