Handling HTTP errors in Angular - Performance & Optimization

Performance: Handling HTTP errors

MEDIUM IMPACT

This affects the responsiveness and smoothness of user interactions by managing how HTTP errors impact UI updates and loading states.

Handling HTTP errors in Angular services

Angular

this.http.get('/api/data').pipe(catchError(err => { this.errorMessage = 'Failed to load data'; return of([]); })).subscribe(data => { this.data = data; });

Using catchError with a fallback observable avoids blocking UI and allows graceful error display.

📈 Performance Gainnon-blocking error handling improves INP and user experience

Handling HTTP errors in Angular services

Angular

this.http.get('/api/data').subscribe(data => { this.data = data; }, error => { alert('Error occurred'); });

Using alert blocks the main thread and interrupts user interaction, causing poor responsiveness.

📉 Performance Costblocks rendering and user input for the alert duration

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking alert on error	Minimal	0	Blocks UI thread causing delayed paint	[X] Bad
Non-blocking catchError with fallback	Minimal	1 (UI update)	Efficient paint with minimal reflow	[OK] Good
Blind retry without delay	Minimal	0	Delays error feedback, increasing perceived latency	[!] OK
Retry with delay and limit	Minimal	1 (UI update)	Balanced paint cost with timely feedback	[OK] Good

Rendering Pipeline

HTTP error handling affects the interaction phase by controlling when and how UI updates occur after network responses, influencing layout and paint operations.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution when blocking UI or handling errors inefficiently

Core Web Vital Affected

INP

This affects the responsiveness and smoothness of user interactions by managing how HTTP errors impact UI updates and loading states.

Optimization Tips

1Avoid blocking UI calls like alert() in HTTP error handlers.

2Use RxJS operators like catchError and retryWhen with delays to handle errors gracefully.

3Update UI state asynchronously to minimize layout and paint costs.

Performance Quiz - 3 Questions

What is a performance drawback of using alert() inside an HTTP error handler in Angular?

A It causes layout thrashing.

B It blocks the main thread and delays user interaction.

C It increases network requests.

D It reduces bundle size.

DevTools: Performance

How to check: Record a session while triggering HTTP errors; look for long tasks or blocked frames during error handling.

What to look for: Check for main thread blocking and long JavaScript execution times that delay UI updates.