👩‍👦‍👦 🤚🏻 🆓 हम प्रतिक्रिया में त्रुटियों के साथ काम करने के लिए एक रणनीति तैयार करते हैं 🎞️ 🕵🏽 🤴🏽

पतन को नरम कैसे करें?

मुझे प्रतिक्रिया अनुप्रयोगों में त्रुटि से निपटने के लिए एक व्यापक मार्गदर्शिका नहीं मिली, इसलिए मैंने इस लेख में प्राप्त अनुभव को साझा करने का निर्णय लिया। लेख शुरुआती डेवलपर्स के लिए अभिप्रेत है और आवेदन में त्रुटि हैंडलिंग को व्यवस्थित करने के लिए कुछ शुरुआती बिंदु हो सकता है।

मुद्दे और लक्ष्य निर्धारण

सोमवार की सुबह, आप शांति से कॉफी पीते हैं और दावा करते हैं कि आपने पिछले सप्ताह की तुलना में अधिक कीड़े तय किए हैं और फिर प्रबंधक दौड़ता हुआ आता है और अपने हाथों को हिलाता है - "हम गिर गए हैं, सब कुछ बहुत दुख की बात है, हम पैसे खो रहे हैं"। आप अपना मैक चलाते हैं और खोलते हैं, अपने एसपीए के प्रोडक्शन वर्जन में जाते हैं, बग खेलने के लिए कुछ क्लिक करते हैं, व्हाइट स्क्रीन देखते हैं और केवल सर्वशक्तिमान जानता है कि वहां क्या हुआ, कंसोल में चढ़ें, खुदाई शुरू करें, घटक के अंदर टी नाम बोलने के साथ एक घटक होता है, जिसमें त्रुटि को अपरिभाषित की संपत्ति getId नहीं पढ़ सकते हैं। एन घंटे के अनुसंधान और आप एक विजयी रो के साथ हॉटफ़िक्स रोल करने के लिए दौड़ते हैं। इस तरह के छापे कुछ आवृत्ति के साथ होते हैं और आदर्श बन गए हैं, लेकिन क्या होगा अगर मैं कहता हूं कि सब कुछ अलग हो सकता है? डिबगिंग त्रुटियों के लिए समय कैसे कम करें और प्रक्रिया का निर्माण करें ताकि ग्राहक व्यावहारिक रूप से विकास के दौरान गलतफहमी को नोटिस न करें जो अपरिहार्य हैं?

आइए हम उन समस्याओं की जाँच करें जिन्हें हमने सामना किया है:

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

यह सब सॉफ्टवेयर उत्पाद के विकास और उपयोगकर्ता की वफादारी की गति को कम कर देता है, इसलिए मैंने अपने लिए 3 सबसे महत्वपूर्ण लक्ष्य निर्धारित किए हैं:

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

किन कार्यों को हल करने की आवश्यकता है?

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

गंभीर त्रुटि से निपटने

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

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

हमारे दृष्टिकोण से, एक महत्वपूर्ण त्रुटि एक अपवाद है जो UI कोड के अंदर हुई है और यदि इसे संसाधित नहीं किया जाता है, तो संपूर्ण रिएक्ट ट्री अनमाउंट हो जाएगा। शेष त्रुटियां महत्वपूर्ण नहीं हैं और आवेदन तर्क के अनुसार संसाधित की जा सकती हैं, उदाहरण के लिए, सूचनाओं का उपयोग करके।

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

सामान्य तौर पर, गैर-महत्वपूर्ण त्रुटियां बहुत महत्वपूर्ण (ऐसी सजा) हो सकती हैं, इसलिए उनके बारे में जानकारी उसी तरह से लॉग की जानी चाहिए जैसे कि महत्वपूर्ण लोगों के लिए।

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

हमारे पास 3 लिंक का एक नेविगेशन पैनल है, जिनमें से प्रत्येक एक दूसरे से स्वतंत्र घटकों की ओर जाता है, इसलिए हम इस तरह के व्यवहार को प्राप्त करना चाहते हैं कि भले ही घटकों में से कोई भी काम न करे, हम बाकी के साथ काम करना जारी रख सकते हैं।

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

एक संपूर्ण अनुप्रयोग को सूचीबद्ध करने पर विचार करें जो ErrorBoundary में लिपटा हुआ है

const AppWithBoundary = () => (   <ErrorBoundary errorMessage="Application has crashed">     <App/>   </ErrorBoundary> )

 function App() {  return (    <Router>      <Layout>        <Sider width={200}>          <SideNavigation />        </Sider>        <Layout>          <Header>            <ActionPanel />          </Header>          <Content>            <Switch>              <Route path="/link1">                <Page1                  title="Link 1 content page"                  errorMessage="Page for link 1 crashed"                />              </Route>              <Route path="/link2">                <Page2                  title="Link 2 content page"                  errorMessage="Page for link 2 crashed"                />              </Route>              <Route path="/link3">                <Page3                  title="Link 3 content page"                  errorMessage="Page for link 3 crashed"                />              </Route>              <Route path="/">                <MainPage                  title="Main page"                  errorMessage="Only main page crashed"                />              </Route>            </Switch>          </Content>        </Layout>      </Layout>    </Router>  ); }

एररबाउंडरी में कोई जादू नहीं है, यह सिर्फ एक क्लास कंपोनेंट है जिसमें कंपोनेंटडिचैच विधि को परिभाषित किया गया है, अर्थात किसी भी कंपोनेंट को एररबाउंडरी बनाया जा सकता है, यदि आप इस मेथड को परिभाषित करते हैं।

 class ErrorBoundary extends React.Component {  state = {    hasError: false,  }  componentDidCatch(error) {    //            this.setState({ hasError: true });  }  render() {    if (this.state.hasError) {      return (        <Result          status="warning"          title={this.props.errorMessage}          extra={            <Button type="primary" key="console">              Some action to recover            </Button>          }  />      );    }    return this.props.children;  } };

यह वह त्रुटि है जो पृष्ठ घटक के लिए ErrorBoundary की तरह दिखता है, जिसे सामग्री ब्लॉक में प्रस्तुत किया जाएगा:

 const PageBody = ({ title }) => (  <Content title={title}>    <Empty className="content-empty" />  </Content> ); const MainPage = ({ errorMessage, title }) => (  <ErrorBoundary errorMessage={errorMessage}>    <PageBody title={title} />  </ErrorBoundary>

चूँकि ErrorBoundary एक नियमित प्रतिक्रिया घटक है, हम एक ही ErrorBoundary घटक का उपयोग अपने हैंडलर में प्रत्येक पृष्ठ को लपेटने के लिए कर सकते हैं, बस ErrorBoundary के लिए अलग-अलग पैरामीटर पास कर रहे हैं, क्योंकि ये वर्ग के विभिन्न उदाहरण हैं, उनका राज्य एक दूसरे पर निर्भर नहीं होगा ।

महत्वपूर्ण: ErrorBoundary केवल उन घटकों में त्रुटियों को पकड़ सकता है जो पेड़ में नीचे हैं।

नीचे दी गई सूची में, त्रुटि स्थानीय ErrorBoundary द्वारा इंटरसेप्ट नहीं की जाएगी, लेकिन ट्री के ऊपर हैंडलर द्वारा फेंकी और इंटरसेप्ट की जाएगी:

 const Page = ({ errorMessage }) => (  <ErrorBoundary errorMessage={errorMessage}>    {null.toString()}  </ErrorBoundary> );

और यहाँ त्रुटि स्थानीय ErrorBoundary द्वारा पकड़ा गया है:

 const ErrorProneComponent = () => null.toString(); const Page = ({ errorMessage }) => (  <ErrorBoundary errorMessage={errorMessage}>    <ErrorProneComponent />  </ErrorBoundary> );

हमारे ErrorBoundary में प्रत्येक अलग घटक को लपेटने के बाद, हमने आवश्यक व्यवहार हासिल किया, लिंक 3 का उपयोग करके जानबूझकर गलत कोड को घटक में डालें और देखें कि क्या होता है। हम जानबूझकर कदम पैरामीटर पास करना भूल जाते हैं:

 const PageBody = ({ title, steps }) => (  <Content title={title}>    <Steps current={2} direction="vertical">      {steps.map(({ title, description }) => (<Step title={title} description={description} />))}    </Steps>  </Content> ); const Page = ({ errorMessage, title }) => (  <ErrorBoundary errorMessage={errorMessage}>    <PageBody title={title} />  </ErrorBoundary> );

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

इस तरह का एक सरल विन्यास हमें आसानी से अपने लक्ष्य को प्राप्त करने की अनुमति देता है, लेकिन व्यवहार में, कुछ लोग त्रुटि से निपटने पर बहुत ध्यान देते हैं, केवल आवेदन के नियमित निष्पादन की योजना बनाते हैं।

बचत त्रुटि सूचना

अब जब हमने अपने आवेदन में पर्याप्त ErrorBoundary रखी है, तो त्रुटियों का पता लगाने और उन्हें जल्द से जल्द ठीक करने के लिए जानकारी को सहेजना आवश्यक है। सबसे आसान तरीका सास सेवाओं का उपयोग करना है, जैसे संतरी या रोलबार। उनके पास बहुत समान कार्यक्षमता है, इसलिए आप किसी भी त्रुटि निगरानी सेवा का उपयोग कर सकते हैं।

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

कनेक्ट करने के लिए, आपको उनकी आधिकारिक वेबसाइट पर पंजीकरण करना होगा और त्वरित शुरुआत गाइड के माध्यम से जाना होगा, जो पंजीकरण के तुरंत बाद आपको निर्देशित करेगा।

हमारे आवेदन में, हम केवल कुछ पंक्तियों को जोड़ते हैं और सब कुछ बंद हो जाता है।

 import * as Sentry from '@sentry/browser'; Sentry.init({dsn: “https://12345f@sentry.io/12345”});

फिर से, हमारे आवेदन में लिंक / लिंक 3 पर क्लिक करें और त्रुटि स्क्रीन प्राप्त करें, जिसके बाद हम संतरी इंटरफ़ेस में जाते हैं, जाहिर है कि एक घटना हुई है और अंदर विफल हो गई है।

त्रुटियों को स्वचालित रूप से प्रकार, आवृत्ति और घटना के समय के आधार पर वर्गीकृत किया जाता है; विभिन्न फ़िल्टर लागू किए जा सकते हैं। हमारे पास एक घटना है - हम इसमें आते हैं और अगली स्क्रीन पर हम उपयोगी जानकारी का एक गुच्छा देखते हैं, उदाहरण के लिए, स्टैक ट्रेस

और त्रुटि (ब्रेडक्रंब) से पहले अंतिम उपयोगकर्ता कार्रवाई।

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

परिणाम:

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

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

PS आप विभिन्न ErrorBoundary कॉन्फ़िगरेशन विकल्पों को आज़मा सकते हैं या साइट पर पंजीकरण के दौरान प्राप्त की गई चाबियों को बदलकर फ़ीचर_सेंट्री ब्रांच में अपने आप को एप्लिकेशन से कनेक्ट कर सकते हैं।

Git- हब डेमो एप्लिकेशन
प्रतिक्रिया की आधिकारिक त्रुटि सीमा प्रलेखन

हम प्रतिक्रिया में त्रुटियों के साथ काम करने के लिए एक रणनीति तैयार करते हैं

पतन को नरम कैसे करें?

मुद्दे और लक्ष्य निर्धारण

More articles: