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 চালু করে, Erlang ভাষায় “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 পরীক্ষা

React Testing Library বা React Native Testing Library ব্যবহার করে প্রতিটি Error Boundary পরীক্ষা করুন। একটি ট্রিগার উপাদান তৈরি করুন যা রেন্ডারে একটি ত্রুটি ছুড়ে দেয় এবং যাচাই করুন যে ফলব্যাক UI প্রদর্শিত হয়। ইন্টিগ্রেশন পরীক্ষার জন্য, বিভিন্ন Error Boundary অবস্থা সহ storybook ব্যবহার করুন: সাধারণ, ত্রুটি, রিসেট-পরবর্তী অবস্থা। Boundary এর আটোমেটেড পরীক্ষা নিশ্চিত করে যে উপাদান পরিবর্তন হলেও, ফলব্যাক UI প্রোডাক্শনে সঠিকভাবে কাজ করতে থাকে। প্রতিটি Boundary এর জন্য পরীক্ষা কভারেজ React Native প্রকল্পের জন্য কোড পরালোচনার একটি বাধ্যতামূলক আবশ্যকতা হতে হবে।