title: Angular2 : HTTP error handling
body: <p>I am trying to reproduce the following behaviour that I successfully implemented using Angular 1.x interceptors and promises, in a Angular2 based Ionic2 app :</p>
  
  <ol>
  <li>Intercept HTTP request errors</li>
  <li><p>If the status code is 401, then </p>
  
  <p>a. make another request to register the client. This will provide some token that I can subsequently attach to each request.</p>
  
  <p>b. Retry the orignal request and provide the result to the caller through the promise / observable</p></li>
  <li><p>If the error status is anything other than 401 just let the flow normally to the caller</p></li>
  </ol>
  
  <p>NB: The register process does not need any intervention from the user (no login) so I want it to be completely transparent for the user. I register once when the app is first loaded, but the session will eventually expire and I need to automatically re-register.</p>
  
  <p>This is the original Angular 1 implementation (I include only the <code>responseError</code>part of the interceptor):</p>
  
  <pre><code>responseError : function(rejection){
      if(rejection.status == 401){
          $log.info('Intercepting unauthorized 401 response. Will try to re-register the session and retry the request.');
  
          var security = $injector.get('SecurityService');
          var $http = $injector.get('$http');
  
          return security.registerSession().then(function(){
              return $http(rejection.config);
          });
  
      }else{
          return rejection;
      }
  }
  </code></pre>
  
  <p>Now, I have wrapped Angular2's HTTP service and I can do simple things like adding a header to each request. However I am struggling to reproduce the same behaviour using Angular2 and Observables.</p>
  
  <p>My attempt so far, this is the request method of my HTTP wrapper that my services will call :</p>
  
  <pre><code>request(url: string | Request, options?: RequestOptionsArgs): Observable&lt;Response&gt; {
  
      let req: Request = this.buildRequest(url, options);
  
      this.beforeCall(req);
  
      var observable = this.http
          .request(req)
          .retry(3)
          .catch(res =&gt; {
              debugger;
              console.log("ERROR! " + res.status);
              if(res.status == 401){
                  this.logger.log('Unauthorized request. Trying to register the session and then retry the request.');
                  return this.securityService.registerSession().subscribe(() =&gt; {
                      // What to do here so the client gets the result of the original request ??
                  });
              }
          })
          .do((res:Response) =&gt; { this.afterCall(req, res) });
  
      return observable;
  }
  </code></pre>