रिएक्ट एरर बाउंड्रीज़: मजबूत एरर हैंडलिंग के लिए एक व्यापक गाइड

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

रिएक्ट एरर बाउंड्रीज़ क्या हैं?

एरर बाउंड्रीज़ रिएक्ट कंपोनेंट्स हैं जो अपने चाइल्ड कंपोनेंट ट्री में कहीं भी जावास्क्रिप्ट एरर्स को पकड़ते हैं, उन एरर्स को लॉग करते हैं, और क्रैश हुए कंपोनेंट ट्री के बजाय एक फॉलबैक UI प्रदर्शित करते हैं। वे एक सुरक्षा जाल के रूप में कार्य करते हैं, जो एप्लिकेशन के एक हिस्से में एरर्स को पूरे UI को डाउन करने से रोकते हैं। रिएक्ट 16 में पेश किए गए, एरर बाउंड्रीज़ ने पिछले, कम मजबूत एरर हैंडलिंग तंत्रों की जगह ले ली।

एरर बाउंड्रीज़ को रिएक्ट कंपोनेंट्स के लिए `try...catch` ब्लॉक की तरह समझें। हालांकि, `try...catch` के विपरीत, वे कंपोनेंट्स के लिए काम करते हैं, जो आपके एप्लिकेशन में एरर्स को संभालने का एक घोषणात्मक और पुन: प्रयोज्य तरीका प्रदान करते हैं।

एरर बाउंड्रीज़ का उपयोग क्यों करें?

एरर बाउंड्रीज़ कई महत्वपूर्ण लाभ प्रदान करते हैं:

• एप्लिकेशन क्रैश को रोकें: सबसे महत्वपूर्ण लाभ यह है कि यह एक कंपोनेंट की एरर को पूरे एप्लिकेशन को क्रैश करने से रोकता है। एक खाली स्क्रीन या एक अनुपयोगी एरर संदेश के बजाय, उपयोगकर्ताओं को एक सुंदर फॉलबैक UI दिखाई देता है।
• उपयोगकर्ता अनुभव में सुधार करें: एक फॉलबैक UI प्रदर्शित करके, एरर बाउंड्रीज़ उपयोगकर्ताओं को एप्लिकेशन के उन हिस्सों का उपयोग जारी रखने की अनुमति देते हैं जो अभी भी सही ढंग से काम कर रहे हैं। यह एक परेशान करने वाले और निराशाजनक अनुभव से बचाता है।
• एरर्स को अलग करें: एरर बाउंड्रीज़ एप्लिकेशन के विशिष्ट हिस्सों में एरर्स को अलग करने में मदद करते हैं, जिससे समस्या के मूल कारण की पहचान करना और उसे डीबग करना आसान हो जाता है।
• उन्नत लॉगिंग और मॉनिटरिंग: एरर बाउंड्रीज़ आपके एप्लिकेशन में होने वाली एरर्स को लॉग करने के लिए एक केंद्रीय स्थान प्रदान करते हैं। यह जानकारी समस्याओं की पहचान करने और उन्हें सक्रिय रूप से ठीक करने के लिए अमूल्य हो सकती है। इसे सेंट्री, रोलबार या बगस्नैग जैसी मॉनिटरिंग सेवा से जोड़ा जा सकता है, इन सभी की वैश्विक कवरेज है।
• एप्लिकेशन स्टेट बनाए रखें: क्रैश के कारण सभी एप्लिकेशन स्टेट खोने के बजाय, एरर बाउंड्रीज़ एप्लिकेशन के बाकी हिस्सों को कार्य करना जारी रखने की अनुमति देते हैं, जिससे उपयोगकर्ता की प्रगति और डेटा संरक्षित रहता है।

एक एरर बाउंड्री कंपोनेंट बनाना

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

• static getDerivedStateFromError(error): यह स्टैटिक मेथड एक डिसेंडेंट कंपोनेंट द्वारा एरर फेंके जाने के बाद लागू होती है। यह फेंके गए एरर को एक आर्गुमेंट के रूप में प्राप्त करता है और एक फॉलबैक UI रेंडर करने के लिए स्टेट को अपडेट करने के लिए एक मान लौटाना चाहिए।
• componentDidCatch(error, info): यह मेथड एक डिसेंडेंट कंपोनेंट द्वारा एरर फेंके जाने के बाद लागू होती है। यह फेंके गए एरर को प्राप्त करता है, साथ ही एक info ऑब्जेक्ट जिसमें इस बारे में जानकारी होती है कि किस कंपोनेंट ने एरर फेंका है। आप इस मेथड का उपयोग एरर को लॉग करने या अन्य साइड इफेक्ट्स करने के लिए कर सकते हैं।

यहाँ एक एरर बाउंड्री कंपोनेंट का एक मूल उदाहरण है:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Caught an error: ", error, info.componentStack);
    // You can also log the error to an error reporting service
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
कुछ गलत हो गया।
;
    }

    return this.props.children; 
  }
}

स्पष्टीकरण:

• ErrorBoundary कंपोनेंट एक क्लास कंपोनेंट है जो React.Component को एक्सटेंड करता है।
• कंस्ट्रक्टर स्टेट को hasError: false के साथ इनिशियलाइज़ करता है। इस फ़्लैग का उपयोग यह निर्धारित करने के लिए किया जाएगा कि फॉलबैक UI को रेंडर करना है या नहीं।
• static getDerivedStateFromError(error) एक स्टैटिक मेथड है जो फेंके गए एरर को प्राप्त करती है। यह स्टेट को hasError: true में अपडेट करती है, जो फॉलबैक UI के रेंडरिंग को ट्रिगर करेगा।
• componentDidCatch(error, info) एक जीवनचक्र मेथड है जो एरर और एक info ऑब्जेक्ट प्राप्त करती है जिसमें कंपोनेंट स्टैक के बारे में जानकारी होती है। इसका उपयोग कंसोल में एरर को लॉग करने के लिए किया जाता है। एक प्रोडक्शन एप्लिकेशन में, आप आमतौर पर एरर को एक एरर रिपोर्टिंग सेवा में लॉग करेंगे।
• render() मेथड hasError स्टेट की जाँच करती है। यदि यह सत्य है, तो यह एक फॉलबैक UI (इस मामले में, एक साधारण

  टैग) रेंडर करती है। अन्यथा, यह कंपोनेंट के चिल्ड्रन को रेंडर करती है।

एरर बाउंड्रीज़ का उपयोग करना

एक एरर बाउंड्री का उपयोग करने के लिए, बस उस कंपोनेंट या कंपोनेंट्स को जिन्हें आप सुरक्षित रखना चाहते हैं, ErrorBoundary कंपोनेंट से रैप करें:

यदि ComponentThatMightThrow एक एरर फेंकता है, तो ErrorBoundary एरर को पकड़ लेगा, अपनी स्टेट को अपडेट करेगा, और अपना फॉलबैक UI रेंडर करेगा। एप्लिकेशन का बाकी हिस्सा सामान्य रूप से काम करता रहेगा।

एरर बाउंड्री प्लेसमेंट

प्रभावी एरर हैंडलिंग के लिए एरर बाउंड्रीज़ का प्लेसमेंट महत्वपूर्ण है। इन रणनीतियों पर विचार करें:

• टॉप-लेवल एरर बाउंड्रीज़: किसी भी अनहैंडल्ड एरर को पकड़ने और पूरे एप्लिकेशन क्रैश को रोकने के लिए पूरे एप्लिकेशन को एक एरर बाउंड्री के साथ रैप करें। यह सुरक्षा का एक बुनियादी स्तर प्रदान करता है।
• ग्रेन्युलर एरर बाउंड्रीज़: एरर्स को अलग करने और अधिक लक्षित फॉलबैक UI प्रदान करने के लिए विशिष्ट कंपोनेंट्स या एप्लिकेशन के अनुभागों को एरर बाउंड्रीज़ के साथ रैप करें। उदाहरण के लिए, आप एक ऐसे कंपोनेंट को रैप कर सकते हैं जो बाहरी API से डेटा फ़ेच करता है।
• पेज-लेवल एरर बाउंड्रीज़: अपने एप्लिकेशन में पूरे पेजों या रूट्स के चारों ओर एरर बाउंड्रीज़ रखने पर विचार करें। यह एक पेज पर एक एरर को दूसरे पेजों को प्रभावित करने से रोकेगा।

उदाहरण:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

इस उदाहरण में, एप्लिकेशन के प्रत्येक प्रमुख खंड (हेडर, साइडबार, कंटेंटएरिया, फुटर) को एक एरर बाउंड्री के साथ लपेटा गया है। यह प्रत्येक खंड को स्वतंत्र रूप से एरर्स को संभालने की अनुमति देता है, जिससे एक ही एरर को पूरे एप्लिकेशन को प्रभावित करने से रोका जा सकता है।

फॉलबैक UI को कस्टमाइज़ करना

एक एरर बाउंड्री द्वारा प्रदर्शित फॉलबैक UI जानकारीपूर्ण और उपयोगकर्ता-अनुकूल होना चाहिए। इन दिशानिर्देशों पर विचार करें:

• एक स्पष्ट एरर संदेश प्रदान करें: एक संक्षिप्त और जानकारीपूर्ण एरर संदेश प्रदर्शित करें जो बताता है कि क्या गलत हुआ। तकनीकी शब्दजाल से बचें और ऐसी भाषा का उपयोग करें जिसे उपयोगकर्ता आसानी से समझ सकें।
• समाधान प्रस्तुत करें: उपयोगकर्ता को संभावित समाधान सुझाएं, जैसे पेज को रीफ्रेश करना, बाद में फिर से प्रयास करना, या समर्थन से संपर्क करना।
• ब्रांड की संगति बनाए रखें: सुनिश्चित करें कि फॉलबैक UI आपके एप्लिकेशन के समग्र डिजाइन और ब्रांडिंग से मेल खाता है। यह एक सुसंगत उपयोगकर्ता अनुभव बनाए रखने में मदद करता है।
• एरर की रिपोर्ट करने का एक तरीका प्रदान करें: एक बटन या लिंक शामिल करें जो उपयोगकर्ताओं को आपकी टीम को एरर की रिपोर्ट करने की अनुमति देता है। यह डीबगिंग और समस्याओं को ठीक करने के लिए मूल्यवान जानकारी प्रदान कर सकता है।

उदाहरण:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    console.error("Caught an error: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        

          
ओह! कुछ गलत हो गया।
          
हमें खेद है, लेकिन इस सामग्री को प्रदर्शित करने का प्रयास करते समय एक त्रुटि हुई।
          
कृपया पृष्ठ को रीफ्रेश करने का प्रयास करें या यदि समस्या बनी रहती है तो समर्थन से संपर्क करें।
           window.location.reload()}>पेज रीफ्रेश करें
          समर्थन से संपर्क करें
        
      );
    }

    return this.props.children; 
  }
}

यह उदाहरण एक अधिक जानकारीपूर्ण फॉलबैक UI प्रदर्शित करता है जिसमें एक स्पष्ट एरर संदेश, सुझाए गए समाधान, और पेज को रीफ्रेश करने और समर्थन से संपर्क करने के लिए लिंक शामिल हैं।

विभिन्न प्रकार के एरर्स को संभालना

एरर बाउंड्रीज़ रेंडरिंग के दौरान, जीवनचक्र विधियों में, और उनके नीचे पूरे ट्री के कंस्ट्रक्टर में होने वाली एरर्स को पकड़ते हैं। वे इनके लिए एरर्स *नहीं* पकड़ते हैं:

• इवेंट हैंडलर्स
• एसिंक्रोनस कोड (उदा., setTimeout, requestAnimationFrame)
• सर्वर-साइड रेंडरिंग
• एरर बाउंड्री में ही फेंकी गई एरर्स (बजाय उसके चिल्ड्रन के)

इन प्रकार के एरर्स को संभालने के लिए, आपको विभिन्न तकनीकों का उपयोग करने की आवश्यकता है।

इवेंट हैंडलर्स

इवेंट हैंडलर्स में होने वाली एरर्स के लिए, एक मानक try...catch ब्लॉक का उपयोग करें:

function MyComponent() {
  const handleClick = () => {
    try {
      // Code that might throw an error
      throw new Error("Something went wrong in the event handler");
    } catch (error) {
      console.error("Error in event handler: ", error);
      // Handle the error (e.g., display an error message)
      alert("एक त्रुटि हुई। कृपया पुनः प्रयास करें।");
    }
  };

  return मुझे क्लिक करें;
}

एसिंक्रोनस कोड

एसिंक्रोनस कोड में होने वाली एरर्स के लिए, एसिंक्रोनस फ़ंक्शन के भीतर try...catch ब्लॉक का उपयोग करें:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // Process the data
        console.log(data);
      } catch (error) {
        console.error("Error fetching data: ", error);
        // Handle the error (e.g., display an error message)
        alert("डेटा लाने में विफल। कृपया बाद में पुनः प्रयास करें।");
      }
    }

    fetchData();
  }, []);

  return 
डेटा लोड हो रहा है...
;
}

वैकल्पिक रूप से, आप अनहैंडल्ड प्रॉमिस रिजेक्शन के लिए एक वैश्विक एरर हैंडलिंग तंत्र का उपयोग कर सकते हैं:

window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ');');
  // Optionally display a global error message or log the error to a service
  alert("एक अप्रत्याशित त्रुटि हुई। कृपया बाद में पुनः प्रयास करें।");
});

उन्नत एरर बाउंड्री तकनीकें

एरर बाउंड्री को रीसेट करना

कुछ मामलों में, आप उपयोगकर्ताओं को एरर बाउंड्री को रीसेट करने और उस ऑपरेशन को फिर से प्रयास करने का एक तरीका प्रदान करना चाह सकते हैं जिसने एरर का कारण बना। यह तब उपयोगी हो सकता है जब एरर एक अस्थायी समस्या, जैसे कि नेटवर्क समस्या, के कारण हुई हो।

एक एरर बाउंड्री को रीसेट करने के लिए, आप एरर स्टेट को प्रबंधित करने और एक रीसेट फ़ंक्शन प्रदान करने के लिए Redux या Context जैसी स्टेट मैनेजमेंट लाइब्रेरी का उपयोग कर सकते हैं। वैकल्पिक रूप से, आप एरर बाउंड्री को फिर से माउंट करने के लिए मजबूर करके एक सरल दृष्टिकोण का उपयोग कर सकते हैं।

उदाहरण (रीमाउंट करने के लिए मजबूर करना):

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorCount: 0, key: 0 };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    console.error("Caught an error: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        

          
ओह! कुछ गलत हो गया।
          
हमें खेद है, लेकिन इस सामग्री को प्रदर्शित करने का प्रयास करते समय एक त्रुटि हुई।
          पुनः प्रयास करें
        
      );
    }

    return 
{this.props.children}
;
  }
}

इस उदाहरण में, रैपिंग डिव में एक 'key' जोड़ा जाता है। की बदलने से कंपोनेंट को फिर से माउंट करने के लिए मजबूर किया जाता है, जिससे एरर स्टेट प्रभावी रूप से साफ़ हो जाती है। `resetError` मेथड कंपोनेंट की `key` स्टेट को अपडेट करती है, जिससे कंपोनेंट फिर से माउंट होता है और अपने बच्चों को फिर से रेंडर करता है।

सस्पेंस के साथ एरर बाउंड्रीज़ का उपयोग करना

रिएक्ट सस्पेंस आपको किसी कंपोनेंट के रेंडरिंग को तब तक "सस्पेंड" करने की अनुमति देता है जब तक कि कोई शर्त पूरी न हो जाए (उदाहरण के लिए, डेटा फ़ेच हो जाए)। आप एसिंक्रोनस संचालन के लिए एक अधिक मजबूत एरर हैंडलिंग अनुभव प्रदान करने के लिए एरर बाउंड्रीज़ को सस्पेंस के साथ जोड़ सकते हैं।

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      लोड हो रहा है...