Angular HttpInterceptor如何忽略特定HttpErrorResponse状态码404？

Hey there! I’ve dealt with this exact scenario before when working with Angular’s HttpInterceptor, so let me break down how to get your 404 error handling working correctly.

The root of the problem is that your interceptor’s catchError operator must always return an Observable—you can’t just leave the block empty. When you do that, it returns undefined, which breaks the RxJS stream and throws that frustrating error.

Here’s how to adjust your interceptor to ignore 404 errors (letting the calling service handle them) while keeping the stream intact:

Updated Interceptor Code #

import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<any> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // Only handle errors that are NOT 404
        if (error.status !== 404) {
          // Put your existing error handling logic here (logging, alerts, etc.)
          console.error('Interceptor processed error:', error);
        }

        // Critical: Always return an Observable. For 404, re-throw the error
        // so the calling service's catchError can pick it up
        return throwError(() => error);
      })
    );
  }
}

Why This Works #

• For non-404 errors: Your interceptor runs its usual handling logic, then re-throws the error (though you could also return a fallback value if needed).
• For 404 errors: The interceptor skips its custom handling, but still returns an Observable via throwError(). This lets the error propagate down to the calling service’s own catchError block, where you can implement service-specific 404 logic.

Example Service-Specific 404 Handling #

Here’s how you might handle the 404 in your service:

// In your service class
getData(): Observable<any> {
  return this.http.get('/api/some-resource').pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 404) {
        // Service-specific 404 logic (e.g., show user message, fallback data)
        console.log('Service handled 404: Resource not found');
        // Optional: Return fallback data instead of re-throwing
        // return of([]);
      }
      // Re-throw if you want upstream subscribers to handle it too
      return throwError(() => error);
    })
  );
}

The key takeaway is that RxJS operators like catchError rely on you returning a valid stream. Skipping the return or returning undefined breaks the chain—so always make sure to return an Observable, even if you’re just passing the error along.

内容的提问来源于stack exchange，提问作者chad