Error Boundary — यह क्या है, React Native घटक और त्रुटि प्रबंधन

Error Boundary क्या है

Error Boundary रेंडरिंग त्रुटियों के दौरान सुचारू गिरावट के लिए एक React तंत्र है। React 16 (2017) में दो जीवनचक्र विधियों में से एक को लागू करने वाले रैपर घटक के रूप में पेश किया गया: static getDerivedStateFromError या componentDidCatch। Error Boundary उपयोगकर्ता को खाली सफेद स्क्रीन या पूर्ण एप्लिकेशन क्रैश के बजाय एक सार्थक संदेश दिखाने की अनुमति देता है।

Error Boundary कैसे अस्तित्व में आया

React 16 से पहले, render में कोई भी अनियंत्रित त्रुटि पूरे DOM ट्री के अनमाउंटिंग के साथ पूर्ण एप्लिकेशन क्रैश का कारण बनती थी। वेब एप्लिकेशन में, इसका मतलब खाली सफेद स्क्रीन था; React Native में, होम स्क्रीन पर वापसी के साथ पूर्ण क्रैश। React टीम ने घोषणात्मक UI के लिए कैच ब्लॉक के एनालॉग के रूप में Error Boundary पेश किया, एरलांग भाषा में “let it crash” दृष्टिकोण से अवधारणा उधार ली।

React Native के लिए महत्व

React Native में, Error Boundary की अनुपस्थिति का अर्थ किसी भी रेंडरिंग त्रुटि पर पूर्ण एप्लिकेशन क्रैश है। उपयोगकर्ता बिना पुनर्प्राप्ति विकल्पों के अपना पूरा वर्तमान सत्र खो देता है। React Native में Error Boundary अत्यंत महत्वपूर्ण है क्योंकि मोबाइल ऐप्स वेब पेजों की तरह पुनः लोड नहीं हो सकते — उपयोगकर्ता सत्र अपरिवर्तनीय रूप से खो जाता है, और उपयोगकर्ता को शुरू से फिर से शुरू करना पड़ता है।

React Native में Error Boundary कैसे काम करता है

Error Boundary React ट्री स्तर पर काम करता है। जब कोई चाइल्ड घटक render या जीवनचक्र में त्रुटि फेंकता है, React पूरे ट्री को अनमाउंट नहीं करता बल्कि नियंत्रण को पदानुक्रम में ऊपर निकटतम Error Boundary को स्थानांतरित करता है। Boundary getDerivedStateFromError को कॉल करता है, state.hasError = true सेट करता है, और टूटी हुई घटक शाखा के बजाय फ़ॉलबैक UI प्रस्तुत करता है।

import React, { Component, ErrorInfo, ReactNode } from "react"

interface Props {
    children: ReactNode
    fallback?: ReactNode
}

interface State {
    hasError: boolean
    error?: Error
}

class ErrorBoundary extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = { hasError: false }
    }

    static getDerivedStateFromError(error: Error): State {
        return { hasError: true, error }
    }

    componentDidCatch(error: Error, info: ErrorInfo) {
        console.error("Caught by boundary:", error)
        Crashlytics.recordException(error)
    }

    render() {
        if (this.state.hasError) {
            return this.props.fallback || <FallbackUI />
        }
        return this.props.children
    }
}

getDerivedStateFromError फ़ॉलबैक UI प्रस्तुत करने के लिए स्थिति सेट करता है — यह एक स्थैतिक विधि है जो परिवर्तनों को प्रतिबद्ध करने से पहले रेंडर चरण के दौरान बुलाई जाती है। componentDidCatch प्रतिबद्ध चरण के दौरान निष्पादित होता है और साइड इफेक्ट्स के लिए होता है: लॉगिंग, Crashlytics को क्रैश रिपोर्ट भेजना, एनालिटिक्स। दो विधियां UI स्थिति प्रबंधन और साइड इफेक्ट्स के बीच जिम्मेदारी को अलग करती हैं।

Error Boundary घटक बनाना

Error Boundary बनाने के लिए, आपको getDerivedStateFromError और/या componentDidCatch विधियों के साथ एक क्लास घटक लागू करना होगा। कार्यात्मक घटक Error Boundary नहीं हो सकते — React इस कार्यक्षमता को केवल क्लास घटकों के लिए समर्थन करता है क्योंकि जीवनचक्र विधियों तक पहुंच आवश्यक है। react-error-boundary लाइब्रेरी सुविधा के लिए हुक-आधारित API के साथ एक तैयार कार्यान्वयन प्रदान करती है।

// React Native में Error Boundary उपयोग उदाहरण
import { ErrorBoundary } from "react-error-boundary"

const FallbackComponent = ({ error, resetError }: FallbackProps) => (
    <View style={styles.container}>
        <Text>कुछ गलत हो गया</Text>
        <Text>{error.message}</Text>
        <Button title="पुनः प्रयास करें" onPress={resetError} />
    </View>
)

const App = () => (
    <SafeAreaView>
        <ErrorBoundary FallbackComponent={<FallbackComponent />}>
            <UserProfile userId={"123"} />
        </ErrorBoundary>
        <BottomNavigation />
    </SafeAreaView>
)

रैपर स्तर — Error Boundary को पदानुक्रम के विभिन्न स्तरों पर रखा जा सकता है। एप्लिकेशन रूट पर एक वैश्विक Boundary किसी भी त्रुटि पर फ़ॉलबैक UI दिखाएगा, लेकिन नेविगेशन अभी भी संरक्षित रहेगा। स्क्रीन स्तर पर कई Boundaries त्रुटियों को अलग करने की अनुमति देती हैं: यदि एक स्क्रीन टूट जाती है, तो बाकी स्वतंत्र रूप से काम करना जारी रखती हैं। react-error-boundary useErrorBoundary हुक के माध्यम से रीसेट तंत्र को सरल बनाता है, बिना पुनः लोड किए स्थिति रीसेट करने की अनुमति देता है। सामान्य परियोजनाओं के लिए, तीन-स्तरीय Boundary योजना React Native एप्लिकेशन के लिए इष्टतम मानी जाती है।

Error Boundary स्थिति रीसेट करना

त्रुटि होने के बाद, उपयोगकर्ता “पुनः प्रयास करें” बटन पर क्लिक कर सकता है, जो hasError को false पर रीसेट करता है और चाइल्ड ट्री को फिर से प्रस्तुत करता है। रीसेट तंत्र बिना पुनः लोड किए एप्लिकेशन कार्यक्षमता को बहाल करने के लिए महत्वपूर्ण है। react-error-boundary में, onReset कॉलबैक का उपयोग किया जाता है, जो कैश साफ़ कर सकता है, डेटा पुनः प्राप्त कर सकता है, या ट्री में ऊपर स्थिति अपडेट कर सकता है।

Error Boundary की सीमाएं

Error Boundary एसिंक्रोनस त्रुटियों को नहीं पकड़ता — setTimeout, setInterval, Promise, async/await में त्रुटियां। React रेंडर चक्र और जीवनचक्र हुक के बाहर त्रुटियों को इंटरसेप्ट नहीं कर सकता क्योंकि वे विभिन्न निष्पादन संदर्भों में निष्पादित होती हैं। एसिंक्रोनस त्रुटियों के लिए, हैंडलर में एक अलग try-catch या वैश्विक unhandledrejection ईवेंट हैंडलर की आवश्यकता होती है।

ईवेंट हैंडलर

onClick, onChange और अन्य ईवेंट हैंडलर में त्रुटियां Error Boundary द्वारा नहीं पकड़ी जातीं क्योंकि वे React रेंडरिंग के बाहर निष्पादित होती हैं। ईवेंट हैंडलर के लिए त्रुटि प्रबंधन हैंडलर के अंदर ही try-catch के माध्यम से होना चाहिए। react-error-boundary लाइब्रेरी ईवेंट हैंडलर से निकटतम Boundary में त्रुटियों को फेंकने के लिए useErrorHandler हुक प्रदान करती है।

सर्वर-साइड रेंडरिंग और Next.js

Error Boundary Next.js या Gatsby में सर्वर साइड पर काम नहीं करता। getDerivedStateFromError और componentDidCatch विधियां SSR के दौरान नहीं बुलाई जातीं क्योंकि जीवनचक्र विधियां केवल ब्राउज़र में उपलब्ध हैं। सर्वर त्रुटियों के लिए, एक अलग रणनीति की आवश्यकता होती है: getServerSideProps में try-catch, error.js फ़ॉलबैक पेज (Next.js 13+), या वैश्विक middleware।

React Native नेटिव लेयर

React Native में, Error Boundary नेटिव मॉड्यूल स्तर पर क्रैश को नहीं रोकता। एक नेटिव क्रैश (segfault, out-of-memory, नेटिव अपवाद) Objective-C या Java स्तर पर होता है और JavaScript लेयर तक नहीं पहुंचता। नेटिव क्रैश के लिए, Crashlytics NDK (Android) या KSCrash (iOS) की आवश्यकता होती है। Error Boundary केवल React Native एप्लिकेशन की JavaScript लेयर की रक्षा करता है।

Error Boundary की सर्वोत्तम प्रथाएं

Error Boundary को तार्किक मॉड्यूल की सीमाओं पर रखें: एक Boundary प्रति स्क्रीन, एक प्रति तृतीय-पक्ष विजेट, एक प्रति जटिल फॉर्म। यह त्रुटियों को अलग करता है और उपयोगकर्ता को एप्लिकेशन के अन्य भागों में काम करना जारी रखने की अनुमति देता है। एक रूट Boundary हमेशा मौजूद होना चाहिए — सामान्य नेविगेशन घटकों या प्रदाताओं में गंभीर त्रुटियों के लिए। प्रत्येक Boundary अपने स्वयं के इंटरफ़ेस खंड के लिए जिम्मेदार है और त्रुटि होने पर पड़ोसी घटकों को प्रभावित नहीं करता।

लॉगिंग और मॉनिटरिंग

हमेशा componentDidCatch के माध्यम से त्रुटि को Crashlytics या Sentry में पास करें। संदर्भ जोड़ें: स्क्रीन नाम, userId, एप्लिकेशन संस्करण, नेविगेशन पैरामीटर। Sentry में, breadcrumbs उपलब्ध हैं — त्रुटि तक ले जाने वाले उपयोगकर्ता क्रियाओं का अनुक्रम। गैर-घातक त्रुटियों की आवृत्ति का विश्लेषण करने के लिए, समस्या के अनुसार समूहीकरण के साथ Crashlytics डैशबोर्ड का उपयोग करें।

फ़ॉलबैक UI

नंगे फ़ॉलबैक का उपयोग न करें — एक सार्थक इंटरफ़ेस बनाएं। React Native के लिए अनुशंसित सेट: त्रुटि संदेश (उपयोगकर्ता-अनुकूल, तकनीकी नहीं), एक “पुनः प्रयास करें” बटन, समर्थन या चैट का लिंक। खाली View से बचें — उपयोगकर्ता सोचेगा कि ऐप पूरी तरह से क्रैश हो गया है और इसे बंद कर देगा। फ़ॉलबैक को एप्लिकेशन के समग्र डिज़ाइन में एकीकृत किया जाना चाहिए।

Error Boundary का परीक्षण

प्रत्येक Error Boundary का React Testing Library या React Native Testing Library का उपयोग करके परीक्षण करें। एक ट्रिगर घटक बनाएं जो रेंडर पर त्रुटि फेंकता है और सत्यापित करें कि फ़ॉलबैक UI प्रदर्शित होता है। एकीकरण परीक्षणों के लिए, विभिन्न Error Boundary अवस्थाओं के साथ storybook का उपयोग करें: सामान्य, त्रुटि, रीसेट के बाद की स्थिति। Boundary का स्वचालित परीक्षण सुनिश्चित करता है कि जब घटक बदलता है, तो फ़ॉलबैक UI उत्पादन में सही ढंग से काम करता रहे। प्रत्येक Boundary के लिए परीक्षण कवरेज React Native परियोजनाओं के लिए कोड समीक्षा की अनिवार्य आवश्यकता होनी चाहिए।