Error Boundary — یہ کیا ہے، React Native جزو اور خرابیوں کا انتظام

Error Boundary کیا ہے

Error Boundary رینڈرنگ خرابیوں کے دوران نرم تنزلی کے لیے ایک React میکانزم ہے۔ React 16 (2017) میں دو لائف سائیکل طریقوں میں سے ایک کو نافذ کرنے والے ریپر جزو کے طور پر متعارف کرایا گیا: static getDerivedStateFromError یا componentDidCatch۔ Error Boundary صارف کو خالی سفید اسکرین یا مکمل ایپلی کیشن کریش کے بجائے ایک بامعنی پیغام دکھانے کی اجازت دیتا ہے۔

Error Boundary کیسے وجود میں آیا

React 16 سے پہلے، رینڈر میں کوئی بھی غیر ہینڈل شدہ خرابی پورے DOM درخت کے ان ماؤنٹ ہونے کے ساتھ مکمل ایپلی کیشن کریش کا سبب بنتی تھی۔ ویب ایپلی کیشنز میں، اس کا مطلب خالی سفید اسکرین تھا؛ React Native میں، ہوم اسکرین پر واپسی کے ساتھ مکمل کریش۔ React ٹیم نے اعلانیہ UI کے لیے کیچ بلاک کے مشابہ کے طور پر Error Boundary متعارف کرایا، Erlang زبان میں “let it crash” نقطہ نظر سے تصور مستعار لیا۔

React Native کے لیے اہمیت

React Native میں، Error Boundary کی عدم موجودگی کا مطلب کسی بھی رینڈرنگ خرابی پر مکمل ایپلی کیشن کریش ہے۔ صارف بحالی کے اختیارات کے بغیر اپنا پورا موجودہ سیشن کھو دیتا ہے۔ React Native میں Error Boundary انتہائی اہم ہے کیونکہ موبائل ایپس ویب پیجز کی طرح دوبارہ لوڈ نہیں ہو سکتیں — صارف کا سیشن ناقابل واپسی طور پر کھو جاتا ہے، اور صارف کو شروع سے دوبارہ شروع کرنا پڑتا ہے۔

React Native میں Error Boundary کیسے کام کرتا ہے

Error Boundary React درخت کی سطح پر کام کرتا ہے۔ جب کوئی ذیلی جزو رینڈر یا لائف سائیکل میں خرابی پھینکتا ہے، 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 ہک کے ذریعے ری سیٹ میکانزم کو آسان بناتا ہے، بغیر دوبارہ لوڈ کیے حالت ری سیٹ کرنے کی اجازت دیتا ہے۔ عام منصوبوں کے لیے، React Native ایپلی کیشنز کے لیے تین سطحی Boundary سکیم بہترین سمجھی جاتی ہے۔

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، میموری کی کمی، مقامی استثنا) 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 کی جانچ

React Testing Library یا React Native Testing Library استعمال کرتے ہوئے ہر Error Boundary کی جانچ کریں۔ ایک ٹریگر جزو بنائیں جو رینڈر پر خرابی پھینکتا ہے اور تصدیق کریں کہ فال بیک UI ظاہر ہوتا ہے۔ انٹیگریشن ٹیسٹ کے لیے، مختلف Error Boundary حالتوں (عام، خرابی، ری سیٹ کے بعد) کے ساتھ storybook استعمال کریں۔ Boundary کا خودکار جانچ اس بات کو یقینی بناتا ہے کہ جب جزو تبدیل ہوتا ہے، فال بیک UI پروڈکشن میں صحیح طریقے سے کام کرتا رہے۔ ہر Boundary کے لیے ٹیسٹ کوریج React Native منصوبوں کے لیے کوڈ جائزے کی ایک لازمی ضرورت ہونی چاہیے۔