Angular HTTP Error Handling

What is HTTP Error Handling in Angular?

HttpClient reports failures as an HttpErrorResponse. The catchError operator lets a service turn that into a friendly message or a fallback value, and retry can re-attempt transient failures.

HTTP Error Handling example

getJobs(): Observable<Job[]> {
  return this.http.get<Job[]>('/api/jobs').pipe(
    retry(2),
    catchError((err: HttpErrorResponse) => {
      const message =
        err.status === 0      ? 'Network error — check your connection.'
      : err.status === 404    ? 'No internships found.'
      : err.status >= 500     ? 'Server error. Please try again shortly.'
      : err.error?.message ?? 'Something went wrong.';

      this.logger.error(err);
      return throwError(() => new Error(message));
    })
  );
}

Key points to remember

• status 0 means the request never reached the server — offline, DNS or CORS.
• err.error holds the parsed response body from the API.
• Return of([]) instead of rethrowing when an empty result is an acceptable fallback.
• An interceptor centralises handling for every request at once.

Common mistakes with HTTP Error Handling

• Retrying a POST that is not idempotent, creating duplicate records.
• Swallowing the error and leaving the UI stuck on a spinner.