title: Angular - Multiple error interceptors
body: <p>I have an interceptor which handles errors and reacts to them. If there is an error, it will do <code>Observable.throw(err)</code>. </p>
  
  <p>Now I need an interceptor which catches <code>401</code> statuses and then takes a stored refresh token and creates a new access token, sets the <code>authorization</code> header on <code>req</code> and tries the failed request again with the new header.</p>
  
  <p>Here's the first error interceptor, notice the <code>Observable.throw(err)</code> part:</p>
  
  <pre><code>@Injectable()
  
  export class ErrorInterceptor implements HttpInterceptor {
  
    constructor(
      private config: Config
    ) {}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      return next.handle(req)
        .pipe(
          catchError((err) =&gt; {
  
            if (err instanceof HttpErrorResponse) {
  
              if (err.status === 401) {
                this.config.onUnauthorized(err);
              }
              else {
                this.config.onHttpError(err);
              }
            }
  
            return Observable.throw(err);
          }
        )
      );
    }
  }
  </code></pre>
  
  <p>Here's the second interceptor:</p>
  
  <pre><code>@Injectable()
  
  export class TokenInterceptor implements HttpInterceptor {
  
    constructor(private api: Api, private cs: ClientStorage, private router: Router) { }
  
    private getNewAccessToken(req: HttpRequest&lt;any&gt;, next: HttpHandler) {
      console.log(0);
      return this.api.post&lt;any&gt;('token', null, {
        grant_type: 'refresh_token',
        refresh_token: this.cs.getItem(AppConstants.appState).refreshToken,
        scope: 'user'
      });
    }
  
    private appendAccessToken(req, token) {
      console.log(1, token)
      return req.clone({
        setHeaders: {
          authorization: `Bearer ${token}`
        }
      });
    }
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      const appState = this.cs.getItem(AppConstants.appState);
      const accessToken = appState ? appState.accessToken : null;
  
      return next.handle(this.appendAccessToken(req, accessToken))
        .pipe(
          catchError((error: any) =&gt; {
            console.log(error);
            if (error instanceof HttpErrorResponse) {
  
              if (error.status === 401) {
  
                console.log('Unauthorized');
  
                return this.getNewAccessToken(req, next)
                  .pipe(
                    mergeMap((res) =&gt; {
  
                    this.cs.setItem(AppConstants.appState, {...appState, accessToken: res.access_token});
  
                    return next.handle(this.appendAccessToken(req, res.access_token));
                  })
                );
              }
              else if (error.status === 403) {
                this.router.navigate(['/login']);
              }
            }
            else {
              console.log(3)
              return Observable.throw(error);
            }
          })
        );
    }
  };
  </code></pre>
  
  <p>The problem here is that the interceptor I've added doesn't seem to do anything, it initialises and it intercepts http requests which are <strong>not</strong> errors but the <code>catchError</code> bit doesn't run if there's an error. The <code>catchError</code> of the <code>ErrorInterceptor</code> however runs as expected, so I believe that they interfere with each other. </p>
  
  <p>How can I make my token interceptor work as intended?</p>