Frontend Academy · पाठ

त्रुटि सीमाएँ

componentDidCatch और getDerivedStateFromError के साथ क्लास-आधारित त्रुटि सीमाएँ लागू करें, ताकि पकड़ी न गई रेंडर त्रुटियाँ पूरे ऐप को क्रैश न करें।

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

त्रुटि सीमाएँ, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Error Boundary क्यों

रेंडरिंग के दौरान, लाइफ़साइकल मेथड में या कन्स्ट्रक्टर में पकड़ी न गई त्रुटि डिफ़ॉल्ट रूप से पूरे React ट्री को क्रैश कर देती है। Error Boundary सबट्री में इन त्रुटियों को पकड़ते हैं और उनकी जगह फ़ॉलबैक रेंडर करने देते हैं।

केवल क्लास कंपोनेंट्स

Error Boundary क्लास कंपोनेंट्स होने चाहिए (2026 में भी — अभी तक इसका कोई हुक समकक्ष नहीं है)। react-error-boundary जैसी लाइब्रेरीज़ में useErrorBoundary हुक मौजूद है।

getDerivedStateFromError

किसी वंशज कंपोनेंट के त्रुटि उत्पन्न करने पर स्थिर मेथड को कॉल किया जाता है। ऐसी स्थिति अपडेट लौटाएँ, जो फ़ॉलबैक रेंडर को सक्रिय करे।

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

लॉगिंग के लिए componentDidCatch

त्रुटि को किसी सेवा (Sentry, Datadog) में लॉग करने के लिए componentDidCatch का उपयोग करें — इसमें त्रुटि और React कंपोनेंट स्टैक दोनों मिलते हैं।

componentDidCatch(error, errorInfo) {
  Sentry.captureException(error, {
    contexts: { react: { componentStack: errorInfo.componentStack } }
  });
}

ऐप रूट को रैप करना

सफ़ेद स्क्रीन ऑफ़ डेथ से बचने के लिए अपने शीर्ष-स्तरीय App को Error Boundary में रैप करें।

<ErrorBoundary fallback={<GlobalErrorPage />}>
  <App />
</ErrorBoundary>

हर रूट या विजेट के लिए सूक्ष्म सीमाएँ

एक वैश्विक सीमा न्यूनतम आवश्यकता है। हर रूट के लिए अलग सीमाएँ जोड़ें, ताकि एक सेक्शन में होने वाली क्रैश से पूरा ऐप खाली न हो जाए।

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={
    <ErrorBoundary fallback={<DashboardError />}>
      <Dashboard />
    </ErrorBoundary>
  } />
</Routes>

त्रुटि सीमाएँ क्या नहीं पकड़तीं

सीमाएँ इन त्रुटियों को नहीं पकड़तीं: इवेंट हैंडलर में होने वाली त्रुटियाँ, असिंक्रोनस कोड में होने वाली त्रुटियाँ (setTimeout, प्रॉमिस), SSR के दौरान उठने वाली त्रुटियाँ और स्वयं सीमा में होने वाली त्रुटियाँ। इन स्थानों पर try/catch का उपयोग करें।

इवेंट हैंडलर की त्रुटियाँ

इवेंट हैंडलर को try/catch में लपेटें और मैन्युअल reportError फ़ंक्शन को कॉल करें।

function Button() {
  function onClick() {
    try {
      riskyOperation();
    } catch (err) {
      reportError(err);
      toast.error('Something went wrong');
    }
  }
  return <button onClick={onClick}>Click</button>;
}

react-error-boundary लाइब्रेरी

कम्युनिटी पैकेज react-error-boundary फ़ंक्शन-कंपोनेंट के लिए सुविधाजनक API और रीसेट समर्थन उपलब्ध कराता है।

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>Error: {error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onReset={() => refetch()}
>
  <DataView />
</ErrorBoundary>

सुधार के बाद रीसेट करना

सुधार का कोई तरीका उपलब्ध कराएँ, जैसे पुनः प्रयास करने वाला बटन या रूट बदलना। सीमा को अपनी स्थिति रीसेट करनी चाहिए, ताकि वह वैकल्पिक दृश्य दिखाना बंद कर दे।

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  reset = () => this.setState({ hasError: false });
  render() {
    if (this.state.hasError) {
      return <button onClick={this.reset}>Retry</button>;
    }
    return this.props.children;
  }
}

डेवलपमेंट और प्रोडक्शन

डेवलपमेंट में, सीमा मौजूद होने पर भी React लाल त्रुटि ओवरले दिखाता है — यह जानबूझकर ऐसा किया गया है। प्रोडक्शन में केवल सीमा का वैकल्पिक दृश्य दिखाई देता है।

सर्वोत्तम अभ्यास

1) app के रूट पर वैश्विक सीमा रखें। 2) हर रूट के लिए अलग सीमा रखें। 3) स्वतंत्र विजेट्स के आसपास छोटे स्तर की सीमाएँ रखें। 4) हमेशा किसी ट्रैकिंग सेवा में लॉग करें। 5) सुधार की कार्रवाइयाँ दिखाएँ, जैसे पुनः प्रयास करना या होम पर जाना। 6) त्रुटियों को चुपचाप न छिपाएँ।

त्वरित जाँच

React की त्रुटि सीमाएँ किस प्रकार की त्रुटियों को नहीं पकड़तीं?

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

पुनरावलोकन: त्रुटि सीमाएँ

static getDerivedStateFromError और componentDidCatch वाली क्लास component। यह एक उपवृक्ष को लपेटकर रेंडर के समय होने वाली त्रुटियों को पकड़ती है। यह इवेंट हैंडलर, असिंक्रोनस कोड या SSR की त्रुटियों को नहीं पकड़ती। app के रूट पर वैश्विक सीमा रखें और इसके अलावा हर रूट तथा विजेट के लिए भी सीमाएँ रखें। Sentry में लॉग करें। सुधार की कोई कार्रवाई उपलब्ध कराएँ। अधिक सुविधाजनक उपयोग के लिए react-error-boundary लाइब्रेरी का उपयोग करें।

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

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

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

पाठ्यक्रम: 41
पाठ: 163

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

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

क्या “त्रुटि सीमाएँ” पाठ निःशुल्क है?

हाँ—“त्रुटि सीमाएँ” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“त्रुटि सीमाएँ” में मैं क्या सीखूँगा?

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

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

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

“त्रुटि सीमाएँ” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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