How to Handle Exceptions in Angular — A Practical Guide

Introduction

Robust error handling makes the difference between a fragile application that crashes frequently and a resilient app that delivers a smooth user experience. In Angular, exceptions can arise from synchronous code, asynchronous operations, HTTP requests, or runtime framework issues. This article walks you through a practical, layered approach to exception handling in Angular — from small try/catch blocks to a global ErrorHandler, HTTP interceptors, RxJS strategies, and logging/reporting.

Whether you're building a small dashboard or a large enterprise application, these techniques will help you catch errors, present helpful messages to users, and gather enough telemetry to fix issues quickly.

---

Table of Contents

1. Why structured error handling matters

2. Error types in Angular

3. Local handling: try/catch and async/await

4. Observables & RxJS: catchError and retry

5. HTTP errors: HttpInterceptor

6. Global handling: ErrorHandler and improved reporting

7. User-friendly UI & UX patterns

8. Logging and third-party error tracking (Sentry, LogRocket)

9. Example project structure & code samples

10. SEO meta tags & blog publishing checklist

---

1. Why structured error handling matters

• User experience: Graceful fallbacks and helpful messages keep users engaged.

• Stability: Prevent unhandled exceptions from crashing the entire app.

• Observability: Collecting error telemetry speeds up debugging and root-cause analysis.

• Security: Avoid leaking internal stack traces to end users.

---

2. Error types in Angular

• Synchronous errors — thrown in normal code paths.

• Asynchronous errors — from Promise rejections, async/await or setTimeout.

• Observable errors — errors emitted by RxJS streams.

• HTTP errors — network or server errors returned from HttpClient.

• Framework/runtime errors — Angular runtime exceptions, template binding errors.

---

3. Local handling: try/catch and async/await

Use try/catch for synchronous code and async/await when dealing with promises.

// component.ts

async function saveProfile() {

try {

await this.profileService.update(this.form.value);

this.toastr.success('Profile saved');

} catch (err) {

// show friendly UI message

this.toastr.error('Save failed — please try again');

// optionally log

this.loggingService.log(err);

}

}

Local handling is ideal when the component can recover or give a targeted message to the user.

---

4. Observables & RxJS: catchError and retry

Angular's HttpClient returns Observables — use RxJS operators for error handling.

// user.service.ts

import { catchError, retry } from 'rxjs/operators';

import { throwError } from 'rxjs';

getUser(id: string) {

return this.http.get<User>(`/api/users/${id}`).pipe(

retry(2), // retry twice before failing

catchError((err) => {

// map or wrap error

this.loggingService.log(err);

return throwError(() => new Error('Failed to load user'));

})

);

}

Use retry sparingly: safe for idempotent GETs, not for POST/PUT.

---

5. HTTP errors: HttpInterceptor

Centralize HTTP error handling with an interceptor. Interceptors are ideal for global behavior: token refresh, generic error mapping, and transforming server errors into app-friendly messages.

// error.interceptor.ts

import { Injectable } from '@angular/core';

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';

import { catchError } from 'rxjs/operators';

@Injectable()

export class ErrorInterceptor implements HttpInterceptor {

constructor(private logging: LoggingService) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

return next.handle(req).pipe(

catchError((err: HttpErrorResponse) => {

// Map status codes to messages

if (err.status === 0) {

// Network error

this.logging.log('Network error', err);

} else if (err.status >= 500) {

this.logging.log('Server error', err);

} else if (err.status === 401) {

// optionally redirect to login

}

// Show user-friendly message or rethrow transformed error

return throwError(() => new Error(err.message || 'HTTP error'));

})

);

}

}

// Provide in AppModule

providers: [

{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }

]

---

6. Global handling: ErrorHandler and improved reporting

Angular exposes a global ErrorHandler class which you can extend to catch uncaught exceptions (template errors, runtime errors). Use it to send errors to a logging backend.

// app-error-handler.ts

import { ErrorHandler, Injectable, Injector } from '@angular/core';

@Injectable()

export class AppErrorHandler implements ErrorHandler {

constructor(private injector: Injector) {}

handleError(error: any): void {

const logging = this.injector.get(LoggingService);

// normalize error

const normalized = this.normalizeError(error);

// send to server

logging.sendError(normalized).catch(() => null);

// optionally show a toast / fallback UI

// e.g., this.toastr.show('An unexpected error occurred')

// rethrow if you want default behavior (console)

console.error('Global error caught:', error);

}

private normalizeError(error: any) {

// Convert ErrorEvent, HttpErrorResponse, plain objects into consistent payloads

return {

message: error?.message ?? String(error),

stack: error?.stack ?? null,

url: window.location.href,

time: new Date().toISOString(),

};

}

}

// Provide in AppModule

providers: [ { provide: ErrorHandler, useClass: AppErrorHandler } ]

Note: ErrorHandler doesn't catch every single error (e.g., some async unhandled promise rejections may need window.addEventListener('unhandledrejection', ...)) — but Angular's ErrorHandler covers most runtime/template exceptions.

---

7. User-friendly UI & UX patterns

• Toasts / Snackbars: Show short non-blocking messages for recoverable errors.

• Inline errors: For form fields, show specific validation messages.

• Retry UX: Provide a button to retry failed actions (especially GETs).

• Fallback screens: For critical failures (failed bootstrapping), show a friendly error page with a simple refresh button.

• Don't expose stack traces to end users. Keep developer-only diagnostics behind a debug toggle or protected route.

---

8. Logging and third-party error tracking

Centralized logging is essential. Simple approaches include sending normalized error payloads to your server. For richer telemetry, consider third-party services like Sentry, Rollbar, or LogRocket. They capture stack traces, user context, breadcrumbs, and release tagging to speed up debugging.

Example: loggingService.sendError(normalizedPayload) — attach user ID, environment (dev/prod), app version, and breadcrumbs (recent navigation/actions).

---

9. Example folder & files structure

src/

├─ app/

│ ├─ core/

│ │ ├─ interceptors/

│ │ │ └─ error.interceptor.ts

│ │ ├─ services/

│ │ │ └─ logging.service.ts

│ │ └─ app-error-handler.ts

│ ├─ features/

│ └─ app.module.ts

---

TL;DR

Handle errors at the right level: local try/catch when you can recover, RxJS catchError for streams, HttpInterceptor for HTTP concerns, and a global ErrorHandler to catch unhandled runtime exceptions. Log errors centrally and show friendly messages to users.

---