त्रुटि सीमा क्या है?

एप्लिकेशन बनाते समय त्रुटियां अपरिहार्य हैं। वे एपीआई, यूआई या कई अन्य स्थानों से आ सकते हैं।

इन त्रुटियों को शालीनता से संभालना और इन त्रुटियों के बावजूद अच्छा UX बनाए रखना बहुत महत्वपूर्ण है।

त्रुटि सीमा प्रतिक्रिया में त्रुटि प्रबंधन का एक ऐसा तरीका है।

त्रुटि सीमा कैसे मदद करती है?

इसे समझने के लिए, आइए त्रुटि सीमा की शुरुआत से पहले की स्थिति को समझें।

त्रुटि सीमाओं से पहले, घटकों के अंदर होने वाली त्रुटियां अंततः फैल गईं और यूआई को तोड़ दिया या सफेद स्क्रीन प्रदान की।

इससे वास्तव में खराब UX उत्पन्न हुआ।

त्रुटि सीमा हमें ऐसी त्रुटियों को संभालने और यूआई या प्रदर्शित सफेद स्क्रीन को तोड़ने के बजाय फ़ॉलबैक यूआई प्रदर्शित करने में मदद करती है।

त्रुटि सीमा का उपयोग कैसे करें?

रिएक्ट v16 ने आधिकारिक तौर पर त्रुटि सीमा पेश की।

यह एक क्लास-आधारित घटक है जिसका उपयोग आपके एप्लिकेशन को लपेटने के लिए किया जा सकता है।

यदि आपके एप्लिकेशन में त्रुटियां हैं या अन्यथा यह प्रदर्शित होने के लिए एक फ़ॉलबैक यूआई स्वीकार करता है, तो यह आपके एप्लिकेशन के सामान्य प्रवाह को फिर से शुरू करने के लिए बच्चों के घटक को प्रस्तुत करता है।

इस प्रकार रिएक्ट डॉक्यूमेंटेशन इसका उपयोग करने की अनुशंसा करता है,

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 ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

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

    return this.props.children;
  }
}

रिएक्ट की त्रुटि सीमा में क्या समस्या है?

यह होने वाली त्रुटियों को नहीं पकड़ सकता,

• इवेंट हैंडलर (इन त्रुटियों को ट्राई-कैच ब्लॉक के साथ नियंत्रित करने की आवश्यकता है)
• एसिंक्रोनस कोड (एपीआई, सेटटाइमआउट, रिक्वेस्टएनीमेशनफ्रेम आदि)
• सर्वर-साइड रेंडरिंग
• त्रुटि जो त्रुटि सीमा में ही होती है
• यह कार्यात्मक घटकों के साथ काम नहीं करता है। हालाँकि हम इसे कुछ कोड परिवर्तनों के साथ काम कर सकते हैं।
• इसके अंदर हुक का उपयोग नहीं किया जा सकता है।

समाधान क्या है?

एक एनपीएम पैकेज है जिसे प्रतिक्रिया-त्रुटि-सीमा कहा जाता है जो पारंपरिक त्रुटि सीमा घटक के शीर्ष पर एक आवरण है।

इस पैकेज का उपयोग करके, हम पारंपरिक त्रुटि सीमा घटक में आने वाली सभी समस्याओं को दूर करने में सक्षम हैं।

इसका उपयोग कैसे करना है?

आप अपने संपूर्ण एप्लिकेशन को इसके साथ लपेट सकते हैं या आप अलग-अलग घटकों को इसके साथ लपेट सकते हैं।

कार्यान्वयन की गंभीरता आप पर निर्भर है।

आइए समझें कि इसका उपयोग कैसे करें।

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

const App = () => {
return Something went wrong}>
/* rest of your component */

}

यह ErrorBoundary का उपयोग करने का सबसे सरल उदाहरण है। इस लाइब्रेरी में और भी बहुत कुछ है।

प्रतिक्रिया-त्रुटि-सीमा एपीआई को समझना

आइए विभिन्न परिदृश्यों के साथ एपीआई को समझने का प्रयास करें।

1. मैं एप्लिकेशन में त्रुटियों के लिए एक सामान्य फ़ॉलबैक यूआई दिखाना चाहता हूं

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

 const App = () => {
 return Something went wrong}>
 /* rest of your component */
 
 }

2. मैं अपने फ़ॉलबैक घटक में विशिष्ट त्रुटि विवरण दिखाना चाहता हूं

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

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

फ़ॉलबैक या फ़ॉलबैकरेंडर के बजाय, आप एक रिएक्ट घटक का भी उपयोग कर सकते हैं।

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

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }

 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

3. मैं अपनी त्रुटियां लॉग करना चाहता हूं

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

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     

       
Something went wrong:
       
{error.message}
     
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return  {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 
 }

4. मैं इवेंट हैंडलर और एसिंक कोड में त्रुटियां पकड़ना चाहता हूं

 import { useErrorBoundary } from "react-error-boundary";

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return 
 }

कुछ गठजोड़

ErrorBoundary एक क्लाइंट घटक है। आप इसमें केवल वही प्रॉप्स पास कर सकते हैं जो क्रमबद्ध हैं या उन फ़ाइलों में इसका उपयोग कर सकते हैं जिनमें "क्लाइंट का उपयोग करें" है; निर्देश.

1. क्रमबद्ध प्रोप क्या है?

सेरिलज़ेबल प्रोप का मतलब है कि इसे बाइट स्ट्रीम में इस तरह से परिवर्तित किया जा सकता है कि बाइट स्ट्रीम को वापस ओरिजिनल प्रोप में परिवर्तित किया जा सके।

जावास्क्रिप्ट में ऐसा करने का एक सामान्य तरीका JSON.stringify() और JSON.parse() है।

2. "क्लाइंट का उपयोग करें" का उपयोग कैसे करें; निर्देश?

बस फ़ाइल के शीर्ष पर इसका उल्लेख करें

"use client";

कुछ और विविधताएं हैं जिनका आप उपयोग कर सकते हैं। लेकिन यह लेख आपको आरंभ करने के लिए काफी अच्छा है।

उनका पूरा दस्तावेज़ यहां देखें।

यदि आपको यह उपयोगी लगा तो कृपया मुझे टिप्पणियों में बताएं।

हैप्पी कोडिंग!