M

MLOG

हिन्दी

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

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

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

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

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

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

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

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

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

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

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


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 कंपोनेंट से रैप करें:

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

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

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

उदाहरण:


function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        

      
    

  );
}

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

फॉलबैक 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 (
        

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

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

          
कृपया पृष्ठ को रीफ्रेश करने का प्रयास करें या यदि समस्या बनी रहती है तो समर्थन से संपर्क करें।

          
          समर्थन से संपर्क करें
        

      );
    }

    return this.props.children; 
  }
}

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

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

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

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

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

इवेंट हैंडलर्स में होने वाली एरर्स के लिए, एक मानक 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 (
    
      लोड हो रहा है...
}> ); } function DataFetchingComponent() { const data = useData(); // Custom hook that fetches data asynchronously return
{data.value}
; }

इस उदाहरण में, DataFetchingComponent एक कस्टम हुक का उपयोग करके एसिंक्रोनस रूप से डेटा फ़ेच करता है। Suspense कंपोनेंट डेटा फ़ेच होने के दौरान एक लोडिंग इंडिकेटर प्रदर्शित करता है। यदि डेटा फ़ेचिंग प्रक्रिया के दौरान कोई एरर होती है, तो ErrorBoundary एरर को पकड़ लेगा और एक फॉलबैक UI प्रदर्शित करेगा।

रिएक्ट एरर बाउंड्रीज़ के लिए सर्वोत्तम प्रथाएं

वास्तविक-दुनिया के उदाहरण

यहाँ कुछ वास्तविक-दुनिया के उदाहरण दिए गए हैं कि एरर बाउंड्रीज़ का उपयोग कैसे किया जा सकता है:

एरर बाउंड्रीज़ के विकल्प

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

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

निष्कर्ष

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

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