Angular HTTP Interceptors — Logging, Loading State and Retry

Angular HTTP interceptors form a pipeline through which every HTTP request and response passes. Each interceptor can modify the request before it is sent, transform the response, handle errors, add side effects (logging, loading state), or retry failed requests. The interceptor order in withInterceptors([...]) determines the wrapping — the first interceptor in the array is the outermost wrapper (runs first on request, last on response).

Complete Interceptor Stack #

// ── 1. Logging interceptor ─────────────────────────────────────────────────
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  const config = inject(APP_CONFIG);
  if (!config.enableDebugTools) return next(req);

  const start = Date.now();
  console.log(`→ ${req.method} ${req.url}`);

  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        const ms = Date.now() - start;
        console.log(`← ${event.status} ${req.url} (${ms}ms)`);
      }
    }),
    catchError(err => {
      const ms = Date.now() - start;
      console.error(`✖ ${err.status} ${req.url} (${ms}ms)`, err.error);
      return throwError(() => err);
    }),
  );
};

// ── 2. Loading interceptor ────────────────────────────────────────────────
// Skip for background requests (e.g., view count increment)
const SKIP_LOADING_HEADER = 'X-Skip-Loading';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  if (req.headers.has(SKIP_LOADING_HEADER)) {
    return next(req.clone({ headers: req.headers.delete(SKIP_LOADING_HEADER) }));
  }

  loading.start();
  return next(req).pipe(
    finalize(() => loading.stop()),
  );
};

// ── 3. Retry interceptor ──────────────────────────────────────────────────
export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  // Only retry network errors (status 0), not HTTP errors (4xx/5xx)
  return next(req).pipe(
    retry({
      count: 3,
      delay: (error, attempt) => {
        if (error.status !== 0) return throwError(() => error);  // don't retry HTTP errors
        return timer(Math.pow(2, attempt) * 1000);  // 2s, 4s, 8s
      },
    }),
  );
};

// ── 4. Cache interceptor ──────────────────────────────────────────────────
const cache = new Map<string, { data: any; timestamp: number }>();
const CACHE_TTL_MS = 30_000;  // 30 seconds

export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
  // Only cache GET requests without auth requirements
  if (req.method !== 'GET' || req.headers.has('Authorization')) return next(req);

  const cached = cache.get(req.urlWithParams);
  if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS)
    return of(new HttpResponse({ body: cached.data, status: 200 }));

  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse && event.status === 200)
        cache.set(req.urlWithParams, { data: event.body, timestamp: Date.now() });
    }),
  );
};

// ── Interceptor order in app.config.ts ────────────────────────────────────
// Outermost first (processes request first, response last)
provideHttpClient(withInterceptors([
  loggingInterceptor,    // 1. outer: logs first and last
  loadingInterceptor,    // 2. tracks all requests
  retryInterceptor,      // 3. retries before auth/error handling
  authInterceptor,       // 4. adds token, handles 401/refresh
  errorInterceptor,      // 5. inner: translates HTTP errors to ApiError
]))

Interceptor Execution Order #

Common Mistakes #

Mistake 1 — Retrying HTTP errors (4xx/5xx) instead of only network errors (429 hammering) #

❌ Wrong — retry on all errors; a 429 Too Many Requests is retried 3 times immediately; rate limit hit gets worse.

✅ Correct — only retry status 0 (network errors); use specific delay for 429 if needed.

Mistake 2 — Wrong interceptor order (auth interceptor outside retry — retried with wrong/missing token) #

❌ Wrong — authInterceptor before retryInterceptor; retry sends request without token if auth interceptor fails.

✅ Correct — retryInterceptor wraps authInterceptor; each retry attempt goes through auth to get fresh token.