Loading...

React in Hindi – Error Boundaries

  • Introduction to react error boundaries in Hindi
  • Example of react error boundaries in Hindi

Introduction to React Error Boundaries

JavaScript errors एक component की internal state को corrupt कर सकती है। ये errors component को render किए जाने पर show होती है। Mostly इन errors का कारण application के code में कोई पहले की errors होती है।

React 16 से पहले React में javascript errors को handle करने का कोई तरीक़ा नहीं था। इसलिए React इन javascript errors से recover नहीं कर पाती थी और mostly सिर्फ़ एक component में error की वजह से पूरी application crash हो जाती थी।

लेकिन user interface के किसी एक part में आने वाली error द्वारा पूरी application नहीं crash होनी चाहिए। इसके बजाय उस error को component level पर ही handle किया जाना चाहिए।

इसलिए इसके solution के रूप में React 16 में javascript errors को handle करने के लिए error boundaries का concept introduce किया गया है।

Are React Components

React में error boundaries components होती है। एक error boundary component के child के रूप में वे components define किए जाते है जो errors generate कर सकते है।

<myErrorBoundary>
  <childComponent />
</myErrorBoundary>

Error boundaries उनके child component tree में कहीं पर भी generate होने वाली javascript errors को catch करती है।

Displays a Fallback UI

Error catch किए जाने पर error boundaries उस error का log create करती है और एक fallback UI display करती है।

Fallback UI कोई एक message या वह UI component हो सकता है जो आप error आने पर display करना चाहते है।

Errors Are Caught During Rendering

Error boundaries component के render होने के दौरान lifecycle methods में और सम्पूर्ण component tree के constructors में errors catch करती है।

कुछ ऐसे elements भी है जिनमें error boundaries errors handle नहीं करती है। जैसे की event handlers, asynchronous code, server side rendering और स्वयं error boundary में ही generate होने वाली errors इनके द्वारा handle नहीं की जाती है।

A Class Component Becomes An Error Boundary

यदि किसी class component में static getDerivedStateFromError() और componentDidCatch() दोनों lifecycle methods या दोनों में से कोई एक method available है तो वह component एक error boundary बन जाता है।

getDerivedStateFromError() method का प्रयोग error generate होने पर fallback UI display करने के लिए किया जाता है और componentDidCatch() method error information को log करने का कार्य करता है।

Example: A Simple Error Boundary

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

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

  componentDidCatch(error,info){
     logErrorToMyService(error,info);
  }

  render(){
     return(
         if(this.state.hasError){
            //Elements to render if getDerivedStateFromError method returns true. 
         }

         return this.props.children;
     );
  }
}

ऊपर दिए गए code में myErrorBoundary एक error boundary component है। इस component में सबसे पहले constructor define किया गया है। Constructor में super component को props pass की गयी है जैसा की हर normal class component में होता है।

इसके अलावा component में एक hasError state भी define की गयी है जिसे initially false value द्वारा set किया गया है। Error आने पर यह state true set कर दी जाती है और render method में इसी के अनुसार elements render होते है।

इसके बाद getDerivedStateFromError() method define किया गया है जो generate होने वाली error को argument के रूप में लेता है। क्योंकि error generate हुई है इसलिए इस method में hasError state को true set करके return करवाया गया है।

इसके componentDidCatch() method define किया गया है। ये method error और info objects को argument के रूप में receive करता है। इस method में error की information को log करने के लिए logErrorToMyService() method use किया गया है जिसमें error और info objects argument के रूप में pass किए गए है।

इसके बाद normally render method को define किया गया है। इस method में सबसे पूर्व hasError state को check किया गया है। यदि has error state true है यानी की यदि error generate हुई है तो if block के अंदर दिए गए elements को render किया जाएगा।

इसके बाद if block के बाहर children props define की गयी है जो error नहीं आने पर error boundary के child components को render करती है।

इस प्रकार एक error boundary define किए जाने के बाद आप उसे उन components के रूप में define करते है जो error generate कर सकते है।

<myErrorBoundary>
  <childComponent1 />
  <childComponent2 />
</myErrorBoundary>

If Error Boundary Itself Generates An Error

जैसा की पहले बताया गया है error boundaries स्वयं के द्वारा generate होने वाली errors को नहीं handle कर सकती है। ऐसा ज़्यादातर तब होता है जब error boundary की rendering fail हो जाती है।

ऐसी situation में एक error boundary द्वारा generate होने वाली errors को tree में उससे higher पर available कोई दूसरी error boundary handle करती है।

Error Boundaries Can Be Placed Anywhere

आप error boundaries को individual small widgets से लेकर route level components तक कहीं भी place कर सकते है। यह totally आप पर depend करता है।

Small widgets पर apply करके आप उनमें generate हुई error के द्वारा बाक़ी की पूरी application को protect कर लेते है और top level components में define करके आप एक बार में एक ही जगह पर application की सारी errors को handle कर लेते है।

Component Stack Trace

React 16 rendering के दौरान आने वाली सभी errors को console पर print करती है। Error message और javascript stack के अलावा React component stack trace भी print करती है।

React component stack trace के माध्यम से आप आसानी से पता कर सकते है की component tree में किसी component में error आयी है।

Component stack trace में filenames और line numbers भी display किया जाता है।

try/catch

React में javascript के try catch statements का प्रयोग किया जा सकता है। लेकिन try/catch blocks को सिर्फ़ imperative code जैसे की कोई method आदि की errors को ही handle किया जा सकता है।

Error boundaries की तरह आप try/catch blocks के द्वारा कोई DOM element की error को नहीं handle कर सकते है।

Event Handlers & Error Boundaries

Events rendering के दौरान generate नहीं होते है। पहले एक component render होता है। इसके बाद user उस component से interact करता है। User के component से interact किए जाने पर events generate होते है।

इसलिए React को events के generate होने से पूर्व ही पता होता है की क्या render करना है। इसलिए event handlers की errors error boundaries के द्वारा catch नहीं की जाती है।

Example: React Error Boundaries

class MyErrorBoundary extends React.Component{
  constructor(props){
    super(props);
    this.state = { errorName: null, errorInfo: null };
  }

 componentDidCatch(error,info){
   this.setState({
                  errorName: error,
                  errorInfo: info,
   })
 }


 render(){
   if (this.state.errorInfo) {
     
      return (
        <div>
          <h1>Error</h1> 
            {this.state.errorName.toString()}
          <h2>Description</h2>
            {this.state.errorInfo.componentStack}
          <h3>Note:</h3>
          <p>Error Boundaries only works with React version 16 or later.</p>
        </div>
      );
    }

    return this.props.children;
  }  
}


class ErrorGenerator extends React.Component{
 
  render(){    
     throw new Error("My Custom Error");   
  }
}


function App(){
  
     return(
             <MyErrorBoundary>
               <ErrorGenerator />
             </MyErrorBoundary>
     );
  
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);