Angular Academy · पाठ

त्रुटियों को वैश्विक रूप से संभालना

HTTP त्रुटियों को केंद्रीय रूप से पकड़कर बदलें

पाठ 3, कुल 4 में से13 चरण

त्रुटियों को वैश्विक रूप से संभालना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

केंद्रीय त्रुटि प्रबंधन

हर कॉम्पोनेंट में HTTP त्रुटियाँ पकड़ने के बजाय, एक इंटरसेप्टर उन्हें वैश्विक रूप से संभाल सकता है: उन्हें लॉग कर सकता है, टोस्ट दिखा सकता है, 401 पर रीडायरेक्ट कर सकता है या त्रुटि के रूप को एकसमान बना सकता है।

इंटरसेप्टर में catchError

विफलताओं को इंटरसेप्ट करने के लिए next(req) स्ट्रीम को catchError के माध्यम से पाइप करें।

import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

export const errorInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      console.error('HTTP error', err.status);
      return throwError(() => err);
    })
  );

HttpErrorResponse का निरीक्षण

HttpErrorResponse में status, message और सर्वर की error बॉडी होती है। अलग-अलग स्थितियों को संभालने के लिए स्थिति के आधार पर शाखा बनाएँ।

catchError((err: HttpErrorResponse) => {
  if (err.status === 0) console.error('network/CORS error');
  else console.error('server error', err.status);
  return throwError(() => err);
})

401 पर रीडायरेक्ट करना

401 का सामान्य अर्थ है कि सत्र समाप्त हो गया है। इंटरसेप्टर से लॉगिन पर रीडायरेक्ट करें।

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      if (err.status === 401) router.navigate(['/login']);
      return throwError(() => err);
    })
  );
};

सूचना दिखाना

उपयोगकर्ता को त्रुटियाँ एकसमान ढंग से दिखाने के लिए टोस्ट/सूचना सेवा को इंजेक्ट करें।

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const toast = inject(ToastService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      toast.error(err.error?.message ?? 'Something went wrong');
      return throwError(() => err);
    })
  );
};

दोबारा फेंकना या छिपा देना

आमतौर पर throwError(() => err) के साथ त्रुटि दोबारा फेंकें, ताकि कॉम्पोनेंट अब भी प्रतिक्रिया दे सकें। फ़ॉलबैक ऑब्ज़र्वेबल (जैसे of(null)) तभी लौटाएँ, जब आप सचमुच कॉल करने वालों से त्रुटि छिपाना चाहते हों।

त्रुटि को एकसमान बनाना

दोबारा फेंकने से पहले सर्वर की अलग-अलग त्रुटि बॉडी को एकसमान ऐप त्रुटि-रूप में मैप करें, जिससे आगे का प्रबंधन सरल हो जाता है।

catchError((err: HttpErrorResponse) => {
  const appError = {
    code: err.status,
    message: err.error?.message ?? err.message
  };
  return throwError(() => appError);
})

क्लाइंट और सर्वर त्रुटियों में अंतर करना

err.error instanceof ErrorEvent (या err.status === 0) क्लाइंट/नेटवर्क त्रुटि दर्शाता है; अन्यथा बैकएंड ने त्रुटि स्थिति लौटाई है। दोनों को अलग-अलग संभालें।

दोहरी प्रक्रिया से बचना

यदि इंटरसेप्टर पहले ही टोस्ट दिखा चुका है, तो कॉम्पोनेंट को उसी त्रुटि के लिए दूसरा टोस्ट नहीं दिखाना चाहिए। दोहराए गए संदेशों से बचने के लिए उपयोगकर्ता को दिखाए जाने वाले प्रबंधन की एक ही परत तय करें।

मॉनिटरिंग सेवा में लॉग करना

केंद्रीय इंटरसेप्टर त्रुटियों को अनुरोध के संदर्भ के साथ किसी मॉनिटरिंग टूल (Sentry आदि) तक भेजने के लिए आदर्श स्थान है।

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const monitor = inject(MonitoringService);
  return next(req).pipe(
    catchError((err: HttpErrorResponse) => {
      monitor.captureHttpError(req.url, err.status, err.message);
      return throwError(() => err);
    })
  );
};

त्रुटि इंटरसेप्टर का क्रम तय करना

त्रुटि इंटरसेप्टर को इस तरह रखें कि वह अन्य इंटरसेप्टर को घेर सके और पूरी श्रृंखला (दोबारा किए गए प्रयासों सहित) की त्रुटियाँ पकड़ सके।

provideHttpClient(
  withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)

त्वरित जाँच

वैश्विक त्रुटि प्रबंधन की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति: त्रुटियों को वैश्विक रूप से संभालना

त्रुटि इंटरसेप्टर HTTP विफलताओं के प्रबंधन को एक जगह केंद्रित करता है।

next(req) पर catchError का उपयोग करें।
HttpErrorResponse.status के आधार पर शाखा बनाएँ (जैसे 401 पर रीडायरेक्ट)।
कॉम्पोनेंट को प्रतिक्रिया देने देने के लिए त्रुटि दोबारा फेंकें; केवल जानबूझकर उसे छिपाना हो तभी निगलें।

अगला विषय: दोबारा प्रयास और लोडिंग संकेतक।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “त्रुटियों को वैश्विक रूप से संभालना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “त्रुटियों को वैश्विक रूप से संभालना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“त्रुटियों को वैश्विक रूप से संभालना” में मैं क्या सीखूँगा?

HTTP त्रुटियों को केंद्रीय रूप से पकड़कर बदलें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“त्रुटियों को वैश्विक रूप से संभालना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ