banti kevat

Posted on Jul 15 • Originally published at itinfohubs.blogspot.com

React Error Boundaries Kaise Banayein

#webdev #programming #javascript #react

React Error Boundaries kaise banayein? Is complete Hindi guide me seekhein components ko crash hone se bachana aur robust production apps banana.

सोचिए, आपने हफ़्तों की मेहनत के बाद एक बेहतरीन वेब एप्लीकेशन बनाई। यूजर बड़े चाव से आपकी ऐप का इस्तेमाल कर रहा है, तभी अचानक डेटाबेस से कोई अजीब रिस्पांस आता है, या फिर किसी छोटे से कंपोनेंट में कोई अनचाहा अनहैंडल्ड एरर आ जाता है। नतीजा? पूरी की पूरी स्क्रीन गायब, और यूजर के सामने आ जाता है एक सूना, सफेद पन्ना—जिसे हम डेवलपर की दुनिया में White Screen of Death कहते हैं।

यह किसी भी यूजर एक्सपीरियंस के लिए एक दुःस्वप्न (nightmare) जैसा है। एक प्रोफेशनल डेवलपर के रूप में, हमारी जिम्मेदारी सिर्फ कोड लिखना नहीं है, बल्कि उस कोड को सुरक्षित और सहनशील (fault-tolerant) बनाना भी है। यहीं पर एंट्री होती है React Error Boundaries की। तो मेरे भाई, आज इस इन-डेप्थ गाइड में हम और आप मिलकर सीखेंगे कि कैसे हम अपनी ऐप को इस भयंकर क्रैश से बचा सकते हैं और कैसे एक सुंदर Fallback UI दिखा सकते हैं।

⚡ Quick Answer: React Error Boundaries class components होते हैं जो अपने child component tree में आने वाले किसी भी runtime JavaScript error को कैच (catch) करते हैं। यह पूरी ऐप को क्रैश होने से बचाकर एक सुंदर Fallback UI दिखाते हैं और एरर को लॉग भी करते हैं।

React Error Boundaries क्या हैं और इनकी जरूरत क्यों है?

सरल शब्दों में कहें तो, React Error Boundary एक सुरक्षा कवच की तरह है। React 16 के बाद से, कोर टीम ने एक बड़ा बदलाव किया। यदि आपके किसी कंपोनेंट के अंदर रेंडरिंग के दौरान कोई JavaScript एरर आता है और आपने उसे हैंडल नहीं किया है, तो React पूरी की पूरी UI ट्री को अनमाउंट (unmount) कर देता है। यानी, एक छोटी सी गलती के कारण आपका पूरा MERN Stack प्रोजेक्ट या React App ठप हो जाता है।

इसी समस्या को हल करने के लिए React हमें एक स्पेशल क्लास कंपोनेंट बनाने की सुविधा देता है जो अपने नीचे के सभी React components में आने वाले एरर्स को सोख (absorb) लेता है। ध्यान देने वाली बात ये है कि यह सिर्फ अपने children components के एरर्स को पकड़ता है, खुद के एरर को नहीं।

🏗️ Error Boundary Flow Diagram

Component Error
→
Error Boundary
→
Fallback UI (Safe App)

Diagram: How React Error Boundary prevents app crash and shows safe UI.

React Error Boundaries vs Try-Catch Block: दोनों में क्या अंतर है?

अक्सर नए डेवलपर्स के मन में यह सवाल जरूर आता है कि "अरे भाई, जब हमारे पास पहले से ही जावास्क्रिप्ट का पुराना और भरोसेमंद try-catch ब्लॉक है, तो हमें इस नए कॉन्सेप्ट की क्या आवश्यकता है?"

यह बहुत ही जायज सवाल है। चलिए इसे एक साफ-सुथरी टेबल के जरिए समझते हैं ताकि आपके दिमाग में कोई भी कन्फ्यूजन न रहे:

Feature / Parameter	Try-Catch Block	React Error Boundary
Work Domain	यह Imperative Code (जैसे फंक्शन्स, इवेंट हैंडल्स) पर काम करता है।	यह Declarative Code (JSX, रेंडरिंग और लाइफसाइकिल मेथड्स) पर काम करता है।
Component Tree Scope	यह पूरे कंपोनेंट ट्री के रेंडरिंग एरर्स को कैच नहीं कर सकता।	यह अपने नीचे के पूरे सब-ट्री (Sub-tree) के किसी भी कंपोनेंट के एरर को कैच कर सकता है।
Fallback UI rendering	JSX के बीच में सीधे UI रेंडर करने में असमर्थ है।	कस्टम Fallback UI को बहुत ही आसानी से स्क्रीन पर रेंडर कर देता है।
Async Error Support	यह एसिंक्रोनस कोड (setTimeout, API call) में अच्छा काम करता है।	यह रेंडरिंग और लाइफसाइकिल मेथड्स के एरर्स पर ही काम करता है (एसिंक्रोनस पर नहीं)।

तो आसान शब्दों में, try-catch कोड के अंदर के लॉजिक को सुरक्षित रखने के लिए है, और Error Boundary आपकी यूजर इंटरफेस (UI) को सुरक्षित रखने के लिए है।

React Error Boundary के लाइफसाइकिल मेथड्स (Lifecycle Methods)

React में एरर बाउंड्री बनाने के लिए हमें क्लास कंपोनेंट का इस्तेमाल करना पड़ता है क्योंकि इसके दो खास लाइफसाइकिल मेथड्स केवल क्लास कंपोनेंट में ही उपलब्ध हैं। अभी तक functional components में इन मेथड्स का कोई सीधा हुक (Hook) विकल्प नहीं आया है।

static getDerivedStateFromError(error): यह एक static मेथड है। जब भी किसी चाइल्ड कंपोनेंट में कोई error थ्रो होता है, तो रेंडर फेज के दौरान यह मेथड सबसे पहले कॉल होता है। इसका मुख्य काम होता है स्टेट को अपडेट करना (जैसे hasError: true करना) ताकि हम स्क्रीन पर Fallback UI दिखा सकें।
componentDidCatch(error, errorInfo): यह मेथड कमिट फेज (Commit Phase) के दौरान कॉल होता है। इसका उपयोग एरर की पूरी जानकारी को किसी थर्ड-पार्टी लॉगिंग सर्विस (जैसे Sentry, LogRocket, या आपके खुद के कस्टम सर्वर) पर भेजने के लिए किया जाता है।

Step-by-Step: कस्टम React Error Boundary कंपोनेंट कैसे बनाएं?

चलिए, अब सीधे काम की बात पर आते हैं और अपना खुद का एक कस्टम, रीयूजेबल और बेहद मजबूत ErrorBoundary कंपोनेंट तैयार करते हैं। नीचे दिए गए कोड को ध्यान से देखें।

Step 1: ErrorBoundary.jsx फ़ाइल बनाना

सबसे पहले अपने प्रोजेक्ट के अंदर ErrorBoundary.jsx नाम की एक फ़ाइल बनाइए और उसमें नीचे दिया गया पूरा कोड लिख दीजिए:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    // इनिशियल स्टेट सेट करें जहाँ हैस-एरर फ़ॉल्स हो
    this.state = { hasError: false, error: null };
  }

  // एरर आने पर स्टेट को अपडेट करने के लिए इस मेथड का उपयोग करें
  static getDerivedStateFromError(error) {
    return { hasError: true, error: error };
  }

  // एरर रिपोर्टिंग सर्विस पर एरर भेजने के लिए इस मेथड का उपयोग करें
  componentDidCatch(error, errorInfo) {
    console.error("Error Boundary caught an error:", error, errorInfo);
    // यहाँ आप Sentry या किसी भी API पर एरर लॉग्स भेज सकते हैं
  }

  // यूजर को एरर से रिकवर करने के लिए रीसेट हैंडलर
  handleReset = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      // यदि props में कोई कस्टम Fallback UI दिया है, तो उसे दिखाएं, अन्यथा डिफ़ॉल्ट UI दिखाएं
      if (this.props.fallback) {
        return this.props.fallback;
      }

      return (

          ## ओह! कुछ गलत हो गया।



            चिंता न करें, हमारे डेवलपर्स को इसकी सूचना दे दी गई है।

        {this.state.error && this.state.error.toString()}



            फिर से कोशिश करें


      );
    }

    // अगर कोई एरर नहीं है, तो नॉर्मल चिल्ड्रेन रेंडर करें
    return this.props.children;
  }
}

export default ErrorBoundary;

Step 2: एक ऐसा कंपोनेंट बनाना जो जानबूझकर एरर उत्पन्न करे

अब हमें टेस्ट करने के लिए एक ऐसा कंपोनेंट चाहिए जो किसी गड़बड़ी के कारण क्रैश हो जाए। इसके लिए हम एक UserProfile.jsx कंपोनेंट बनाते हैं:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: "अमित कुमार" });

  const triggerError = () => {
    // जानबूझकर स्टेट को null कर रहे हैं ताकि रेंडरिंग के समय ऑब्जेक्ट प्रॉपर्टी एक्सेस एरर आये
    setUser(null);
  };

  if (!user) {
    throw new Error("User data is completely missing!");
  }

  return (

      ### यूजर प्रोफाइल कंपोनेंट


      नाम: {user.name}



        क्रैश कंपोनेंट (Throw Error)


  );
}

export default UserProfile;

Step 3: App.jsx में Error Boundary को लपेटना (Wrap Components)

अब हमारा मुख्य काम आता है। हमें अपने संदेहास्पद कंपोनेंट को इस एरर बाउंड्री से सुरक्षित करना है। इसके लिए हम अपने App.jsx में इस तरह रैप करेंगे:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import UserProfile from './UserProfile';

function App() {
  return (

      # React Error Boundary डेमो में आपका स्वागत है


      नीचे दी गई बाउंड्री हमारी ऐप को क्रैश होने से बचाएगी।



      {/* हमने UserProfile को ErrorBoundary के अंदर रैप कर दिया है */}





        ### सुरक्षित एरिया


        यह हिस्सा कभी भी क्रैश नहीं होगा क्योंकि एरर केवल ऊपर वाले कंपोनेंट के दायरे तक ही सीमित है।




  );
}

export default App;

जब आप "क्रैश कंपोनेंट" बटन पर क्लिक करेंगे, तो आप देखेंगे कि आपका "सुरक्षित एरिया" बिल्कुल वैसे ही काम कर रहा है, और केवल प्रोफाइल वाला कंपोनेंट सुंदर लाल रंग के एरर बॉक्स में बदल गया है। यही तो जादू है React Error Boundaries का!

React Error Boundaries किन Errors को कैच नहीं कर पाते?

मेरे प्यारे दोस्तों, यहाँ पर एक बहुत ही महत्वपूर्ण बात है जिसपर अक्सर इंटरव्यू में भी सवाल पूछे जाते हैं। Error Boundaries कोई जादू की छड़ी नहीं हैं जो हर प्रकार के error को पकड़ लें। आधिकारिक React Official Documentation के अनुसार, निम्नलिखित स्थितियों में ये काम नहीं करते हैं:

Event Handlers (इवेंट हैंडलर): अगर आपके बटन के onClick फंक्शन के अंदर कोई एरर आता है, तो Error Boundary उसे नहीं पकड़ेगी। इवेंट हैंडलर रेंडर फेज के बाहर चलते हैं।
Asynchronous Code (एसिंक्रोनस कोड): setTimeout, requestAnimationFrame, या API के लिए fetch रिक्वेस्ट के अंदर होने वाले एरर्स को ये कैच नहीं कर सकते।
Server Side Rendering (SSR): सर्वर पर रेंडर होते समय आने वाले एरर्स पर यह काम नहीं करता।
खुद के एरर (Self Errors): यदि एरर खुद एरर बाउंड्री कंपोनेंट के अंदर (उसके रेंडर मेथड में) आता है, तो वह उसे हैंडल नहीं कर पाएगा।

इवेंट हैंडलर्स और एसिंक्रोनस कोड के एरर्स को कैसे हैंडल करें?

इसके लिए आपको सामान्य try-catch ब्लॉक का ही उपयोग करना होगा। उदाहरण के तौर पर:

const handleClick = () => {
  try {
    // कोई ऐसा काम जिससे एरर आ सकता है
    performCriticalOperation();
  } catch (error) {
    // स्टेट सेट करके UI को सूचित करें
    setErrorState(error);
  }
};

प्रोजेक्ट्स के लिए 'react-error-boundary' लाइब्रेरी का उपयोग कैसे करें?

अगर आप खुद क्लास कंपोनेंट नहीं बनाना चाहते और बिल्कुल मॉडर्न, हुक-आधारित (Hook-based) और क्लीन कोड लिखना पसंद करते हैं, तो React कम्युनिटी की सबसे लोकप्रिय लाइब्रेरी react-error-boundary आपके लिए ही बनी है।

सबसे पहले इसे अपने प्रोजेक्ट में इनस्टॉल करें:

npm install react-error-boundary

इसके बाद, आप बहुत ही आसानी से फंक्शनल कंपोनेंट्स में इसका इस्तेमाल कर सकते हैं। चलिए इसका एक प्रोडक्शन-रेडी उदाहरण देखते हैं:

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

// 1. कस्टम फॉलबैक कंपोनेंट बनाएं
function ErrorFallback({ error, resetErrorBoundary }) {
  return (

      ### सिस्टम में कुछ गड़बड़ हुई है!

{error.message}



        फिर से प्रयास करें


  );
}

// 2. मुख्य कंपोनेंट जहाँ हम इसे रैप करेंगे
function AppWithLibrary() {
  return (
     {
        // यहाँ आप स्टेट रीसेट करने का लॉजिक लिख सकते हैं
        console.log("ErrorBoundary successfully reset!");
      }}
    >


  );
}

export default AppWithLibrary;

React Apps में Error Boundaries लगाने के Best Practices

एक अनुभवी डेवलपर की तरह सोचते हुए, अपनी एप्लीकेशन के आर्किटेक्चर को बेहतर बनाने के लिए इन बेस्ट प्रैक्टिसेज का ध्यान जरूर रखें:

सही जगह पर रैप करें (Granular Placement): पूरी की पूरी ऐप को केवल एक ही ग्लोबल एरर बाउंड्री में न लपेटें। ऐसा करने से अगर हेडर में छोटा सा एरर आएगा तो पूरी स्क्रीन गायब हो जाएगी। इसके बजाय, अलग-अलग सेक्शन्स जैसे कि Sidebar, Feed, और CommentSection को अलग-अलग एरर बाउंड्रीज में रैप करें।
एरर लॉगिंग (Error Logging): हमेशा अपने componentDidCatch का इस्तेमाल करके एरर को मॉनिटरिंग टूल्स (जैसे Sentry या LogRocket) पर भेजें। इससे आपको बिना यूजर के बताए ही पता चल जाएगा कि प्रोडक्शन पर क्या फट रहा है।
सार्थक फॉलबैक UI (Graceful Degradation): यूजर को डरावने कोडिंग शब्द दिखाने के बजाय एक दोस्ताना संदेश और 'Retry' बटन दें।

तो दोस्तों, आज हमने यह गहराई से सीखा कि कैसे React Error Boundaries का सही उपयोग करके हम अपनी React एप्लीकेशन को अत्यधिक मजबूत और यूजर-फ्रेंडली बना सकते हैं। अब व्हाइट स्क्रीन ऑफ डेथ को हमेशा के लिए बाय-बाय कहने का समय आ चुका है! अपने प्रोजेक्ट्स में इसे आज ही लागू करें और यूजर एक्सपीरियंस को नेक्स्ट लेवल पर ले जाएं। कोडिंग करते रहिए और मुस्कुराते रहिए!

Frequently Asked Questions (FAQs)

Q1: क्या हम Functional Components में Error Boundary बना सकते हैं?
नहीं, सीधे तौर पर नहीं। React में एरर कैच करने वाले लाइफसाइकिल मेथड्स (getDerivedStateFromError और componentDidCatch) केवल Class Components में ही उपलब्ध हैं। हालाँकि, आप 'react-error-boundary' जैसी थर्ड-पार्टी लाइब्रेरी का उपयोग करके फंक्शनल स्टाइल में काम कर सकते हैं।
Q2: क्या Error Boundary बच्चों के अलावा खुद के एरर को कैच कर सकती है?
नहीं, Error Boundary केवल अपने नीचे मौजूद चाइल्ड कंपोनेंट्स के एरर्स को ही कैच करती है। यदि खुद एरर बाउंड्री कंपोनेंट के अंदर रेंडरिंग में कोई गड़बड़ होती है, तो वह एरर ऊपर की तरफ ट्रांसफर हो जाता है।
Q3: क्या हमें पूरी ऐप को एक ही Error Boundary से रैप करना चाहिए?
नहीं, यह एक खराब प्रैक्टिस है। आपको अपनी ऐप के विभिन्न हिस्सों (जैसे साइडबार, चैट बॉक्स, डैशबोर्ड विजेट्स) को अलग-अलग एरर बाउंड्री से रैप करना चाहिए ताकि एक हिस्से का एरर पूरी ऐप को प्रभावित न करे।
Q4: क्या Error Boundary एपीआई कॉल (Fetch/Axios) के एरर को हैंडल करती है?
नहीं। एरर बाउंड्री रेंडरिंग फेज, लाइफसाइकिल मेथड्स और कंस्ट्रक्टर के एरर्स को कैच करती है। एपीआई कॉल जैसे एसिंक्रोनस एरर्स को आपको कंपोनेंट के अंदर सामान्य try-catch ब्लॉक से ही हैंडल करना पड़ेगा।
Q5: Error Boundary में componentDidCatch का मुख्य उद्देश्य क्या है?
componentDidCatch का मुख्य काम एरर रिपोर्टिंग है। जब भी कोई अनपेक्षित एरर आता है, तो हम इस मेथड के जरिए उस एरर के स्टैक ट्रेस को Sentry या अपने कस्टम लॉगिंग सर्वर पर एनालिसिस के लिए भेजते हैं।

DEV Community