mediumFrontend

How do you handle errors and retries globally with interceptors?

Q: How do you handle errors and retries globally with interceptors?

**Core concept.** Put cross-cutting HTTP resilience in an interceptor: pipe the response through retry (re-attempt **transient** failures) and catchError (handle/transform errors once, centrally) — e.g. retry network errors a couple of times, log, redirect to login on 401 , and surface a friendly message. This avoids repeating error handling in every service. request fails (5xx/network) <re

531 views

Understand the problem

Explain error interceptors.

interceptorretry

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Global retry + error interceptor

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError, retry, throwError } from 'rxjs';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    retry({ count: 2, delay: 1000 }),       // transient failures only
    catchError(err => {
      if (err.status === 401) location.href = '/login';
      console.error('HTTP error', err.status);
      return throwError(() => err);          // re-throw for the caller
    }),
  );

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are functional Route Guards, and how do they differ from class-based guards?

What is the difference between component styling using :host, :host-context, and ::ng-deep?