HTTP & Communication
Error Handling
catchError, Retry Logic
💡 Error handling ek safety net hai trapeze artist ke neeche — agar HTTP request "gir jaaye" (fail ho jaaye), poora application crash NAHI hona chahiye, GRACEFULLY handle karके user ko meaningful feedback dena chahiye.
catchError (RxJS operator) HTTP errors ko GRACEFULLY handle karta hai — .pipe() mein use hota hai. retry() automatically FAILED requests ko dubara try karta hai (network glitches ke liye useful). Global error handling INTERCEPTOR mein bhi ho sakta hai (centralized).
import { catchError, retry } from 'rxjs/operators';
import { of, throwError } from 'rxjs';
this.http.get<User[]>('/api/users').pipe(
retry(2), // 2 baar retry karo fail hone par
catchError(error => {
console.error('API call failed:', error);
return of([]); // FALLBACK value — khaali array
// ya: return throwError(() => error); — error AAGE propagate karo
})
).subscribe(users => {
this.users = users; // agar sab fail ho, khaali array milega, crash NAHI hoga
});
// Global error interceptor:
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
return next(req).pipe(
catchError(error => {
if (error.status === 401) {
// redirect to login
}
return throwError(() => error);
})
);
};🚨
Error handling ek safety net hai trapeze artist ke neeche — agar HTTP request "gir jaaye" (fail ho jaaye), poora application crash NAHI hona chahiye, GRACEFULLY handle karके user ko meaningful feedback dena chahiye.
1 / 6
⚡ झट से Recap
- catchError = HTTP errors gracefully handle karo
- retry() = automatic retry, network glitches ke liye
- of(fallback) = error swallow karo; throwError() = error aage pass karo
इस page में (2 subtopics)
HttpErrorResponse mein error.status se pata chalta hai error KIS TYPE ka hai — client-side (network down, status 0) vs server-side (4xx client errors, 5xx server errors) — alag handling ki zaroorat ho sakti hai.
this.http.get('/api/users').pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 0) {
console.log('Network error — check internet connection');
} else if (error.status === 404) {
console.log('Resource not found');
} else if (error.status >= 500) {
console.log('Server error — try again later');
}
return throwError(() => error);
})
).subscribe();Tip: status === 0 ek COMMON pattern hai "network down/CORS issue" detect karne ke liye — server tak request pahunchi hi nahi, isliye koi meaningful HTTP status code nahi mila.
Raw error objects (jaise "HttpErrorResponse: 500 Internal Server Error") users ko DIRECTLY dikhाना BAD UX hai — ek CENTRALIZED error-message-mapping service se USER-FRIENDLY messages generate karна best practice hai.
@Injectable({ providedIn: 'root' })
export class ErrorMessageService {
getMessage(error: HttpErrorResponse): string {
switch (error.status) {
case 0: return 'Internet connection check karo';
case 404: return 'Ye data nahi mila';
case 500: return 'Kuch galat hua, thodi der baad try karo';
default: return 'Ek unexpected error hui';
}
}
}Tip: Production applications mein error messages ko CENTRALIZE karna maintainability ke liye zaroori hai — agar messages HAR component mein hardcoded hon, consistency maintain karna aur translations add karna bahut mushkil ho jaata hai.