Error Handling in Angular

Error Handling Overview

Robust error handling is essential for production Angular applications. Angular provides multiple layers of error handling — from HTTP interceptors that catch API errors, to global error handlers that catch unhandled exceptions, to template-level error states with @defer. A good error handling strategy ensures users always see meaningful feedback instead of a broken UI.

HTTP Error Handling

HTTP errors are the most common type in Angular apps. Use RxJS catchError operator to handle errors from HttpClient calls. Always handle errors in the service layer, not in components.

HTTP Error Handling in a Service

import { Injectable, inject, signal } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

export interface User { id: number; name: string; email: string; }

@Injectable({ providedIn: 'root' })
export class UserService {
    private http = inject(HttpClient);

    getUser(id: number) {
        return this.http.get<User>(`/api/users/${id}`).pipe(
            catchError((error: HttpErrorResponse) => {
                let message = 'An unexpected error occurred.';

                if (error.status === 0) {
                    message = 'Network error — check your connection.';
                } else if (error.status === 401) {
                    message = 'Unauthorized — please log in.';
                } else if (error.status === 403) {
                    message = 'Forbidden — you do not have permission.';
                } else if (error.status === 404) {
                    message = 'User not found.';
                } else if (error.status >= 500) {
                    message = 'Server error — please try again later.';
                }

                console.error('HTTP Error:', error);
                return throwError(() => new Error(message));
            })
        );
    }
}

import { Component, inject, signal } from '@angular/core';
import { UserService, User } from './user.service';

@Component({
    selector: 'app-user',
    standalone: true,
    template: `
        @if (loading()) {
            <p>Loading...</p>
        } @else if (error()) {
            <div class="alert alert-danger">{{ error() }}</div>
            <button (click)="load()">Retry</button>
        } @else if (user()) {
            <h2>{{ user()!.name }}</h2>
            <p>{{ user()!.email }}</p>
        }
    `
})
export class UserComponent {
    private userService = inject(UserService);

    user    = signal<User | null>(null);
    loading = signal(false);
    error   = signal<string | null>(null);

    ngOnInit() { this.load(); }

    load() {
        this.loading.set(true);
        this.error.set(null);

        this.userService.getUser(1).subscribe({
            next:  (u) => { this.user.set(u); this.loading.set(false); },
            error: (e) => { this.error.set(e.message); this.loading.set(false); }
        });
    }
}

HTTP Interceptor for Global Error Handling

An HTTP interceptor can catch errors globally across all HTTP requests. This is ideal for handling authentication errors (401 redirect to login) or showing a global error notification.

Global HTTP Error Interceptor

import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { catchError, throwError } from 'rxjs';

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
    const router = inject(Router);

    return next(req).pipe(
        catchError((error: HttpErrorResponse) => {
            if (error.status === 401) {
                // Redirect to login on unauthorized
                router.navigate(['/login']);
            }

            if (error.status === 403) {
                router.navigate(['/forbidden']);
            }

            if (error.status >= 500) {
                console.error('Server error:', error.message);
                // Could show a toast notification here
            }

            return throwError(() => error);
        })
    );
};

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { errorInterceptor } from './error.interceptor';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideHttpClient(
            withInterceptors([errorInterceptor])
        )
    ]
};

Global Error Handler

Angular's ErrorHandler class catches all unhandled JavaScript errors in the application. Override it to log errors to a monitoring service (like Sentry) or show a global error page.

Global ErrorHandler

import { ErrorHandler, Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
    private router = inject(Router);

    handleError(error: unknown): void {
        console.error('Unhandled error:', error);

        // Log to monitoring service (e.g. Sentry)
        // Sentry.captureException(error);

        // Navigate to error page for critical errors
        if (error instanceof Error && error.message.includes('ChunkLoadError')) {
            // Lazy-loaded chunk failed — reload the page
            window.location.reload();
        }
    }
}

import { ApplicationConfig, ErrorHandler } from '@angular/core';
import { provideRouter } from '@angular/router';
import { GlobalErrorHandler } from './global-error-handler';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        // Override the default ErrorHandler
        { provide: ErrorHandler, useClass: GlobalErrorHandler }
    ]
};

Error States in Templates

Use Angular's built-in control flow and Signals to show error states cleanly in templates. The @defer block has a built-in @error state for lazy-loaded components.

Approach	Best for
Signal `error` state + `@if`	Component-level HTTP errors
HTTP Interceptor	Global auth errors (401, 403)
`ErrorHandler`	Unhandled JS exceptions, crash reporting
`@defer @error`	Lazy-loaded component failures
Route-level error pages	404, 500 pages

Previous Next