catchError for error handling in Angular - Performance & Optimization

Performance: catchError for error handling

MEDIUM IMPACT

This affects how asynchronous errors are handled without blocking UI responsiveness or causing unnecessary re-renders.

Handling errors in an Angular Observable stream

Angular

this.dataService.getData().pipe(catchError(err => { this.error = err; return of([]); })).subscribe(data => this.data = data);

catchError handles errors inside the stream, preventing unhandled exceptions and allowing graceful fallback without blocking UI.

📈 Performance GainPrevents blocking rendering and reduces unnecessary change detection cycles

Handling errors in an Angular Observable stream

Angular

this.dataService.getData().subscribe({ next: data => this.data = data, error: err => { this.error = err; throw err; } });

Throwing errors inside subscribe causes unhandled exceptions and can block UI updates or crash the app.

📉 Performance CostBlocks rendering and triggers multiple change detection cycles on error

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Throw error inside subscribe	Multiple due to error propagation	Multiple reflows due to repeated change detection	High paint cost on error UI updates	[X] Bad
Use catchError with fallback	Minimal, only necessary updates	Single reflow for fallback UI	Low paint cost	[OK] Good

Rendering Pipeline

Errors caught by catchError prevent the stream from terminating abruptly, allowing Angular's change detection to update only necessary parts without re-rendering the whole component.

→JavaScript Execution

→Change Detection

→Render

⚠️ BottleneckChange Detection triggered by unhandled errors

Core Web Vital Affected

INP

This affects how asynchronous errors are handled without blocking UI responsiveness or causing unnecessary re-renders.

Optimization Tips

1Always use catchError to handle errors inside Observable streams.

2Return fallback values in catchError to keep the stream alive and UI responsive.

3Avoid throwing errors inside subscribe error handlers to prevent blocking rendering.

Performance Quiz - 3 Questions

What is the main performance benefit of using catchError in Angular Observable streams?

A It increases bundle size significantly

B It prevents unhandled errors from blocking UI updates

C It triggers multiple reflows to update the UI

D It delays the initial page load

DevTools: Performance

How to check: Record a session while triggering an error in the Observable stream. Look for long tasks or multiple change detection cycles.

What to look for: Check for repeated change detection events and long scripting times indicating blocking caused by unhandled errors.