Error Boundaries Explained in React.js

React-এ যখন কোনো কম্পোনেন্টে অপ্রত্যাশিত JavaScript error ঘটে, তখন পুরো UI ভেঙে যেতে পারে। এই সমস্যা সমাধানের জন্য React নিয়ে এসেছে Error Boundaries — যা UI-এর নির্দিষ্ট অংশে error ধরতে পারে এবং fallback UI দেখাতে পারে।

🚀 Error Boundary কী?

Error Boundary হলো একটি React class component, যা তার child component tree-তে যেকোনো runtime error ধরতে পারে এবং React অ্যাপ্লিকেশনকে ক্র্যাশ হওয়া থেকে রক্ষা করে।

একটি Error Boundary মূলত দুইটি লাইফসাইকেল মেথড ব্যবহার করে:

• static getDerivedStateFromError(error) – error ঘটলে state আপডেট করে
• componentDidCatch(error, info) – error লগ বা ট্র্যাকিং করে

🎯 কেন Error Boundary প্রয়োজন?

React অ্যাপে error হলে সাধারণত পুরো UI ভেঙে যায়। কিন্তু Error Boundary থাকলে:

• error শুধুমাত্র নির্দিষ্ট অংশেই সীমাবদ্ধ থাকে
• অ্যাপ ক্র্যাশ হয় না
• beautiful fallback UI দেখানো যায়
• error log করে future debugging সহজ হয়

📌 Error Boundary কোন ধরনের error ধরতে পারে?

• Rendering error
• Lifecycle method error
• Child component tree-র ভিতরের error

However, error boundaries ধরতে পারে না:

• Event handler এর error
• Async code (setTimeout, promises) error
• Server-side rendering এর error
• Error thrown inside Error Boundary itself

🛠️ কিভাবে Error Boundary তৈরি করবেন?

React-এ একটি simple Error Boundary class component এর উদাহরণ:

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

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

    componentDidCatch(error, info) {
        console.log("Error Logged:", error, info);
    }

    render() {
        if (this.state.hasError) {
            return <h2>Something went wrong!</h2>;
        }
        return this.props.children;
    }
}
    

📌 কিভাবে Error Boundary ব্যবহার করবেন?

যে component এর ভিতরে error হওয়ার সম্ভাবনা বেশি, শুধু তাকে ErrorBoundary দিয়ে wrap করুন:

<ErrorBoundary>
    <MyComponent />
</ErrorBoundary>
    

এইভাবে MyComponent-এ কোনো error হলে পুরো app crash হবে না। বরং ErrorBoundary fallback UI দেখাবে।

🔥 Real-Life Example

একটি বাটনে ক্লিক করলে error intentionally throw করার উদাহরণ:

function BuggyComponent() {
    const handleClick = () => {
        throw new Error("App crashed!");
    };

    return (
        <button onClick={handleClick}>Crash App</button>
    );
}
    

এখন BuggyComponent-কে ErrorBoundary দিয়ে wrap করুন:

<ErrorBoundary>
    <BuggyComponent />
</ErrorBoundary>
    

🎨 Custom Fallback UI উদাহরণ

render() {
    if (this.state.hasError) {
        return (
            <div style={{ padding: "20px", background: "#ffe6e6" }}>
                <h2>Oops! Something went wrong. 😥</h2>
                <p>Please try again later.</p>
            </div>
        );
    }
    return this.props.children;
}
    

এই fallback UI আপনার অ্যাপকে আরও professional, user-friendly এবং stable করে তোলে।

🧠 গুরুত্বপূর্ণ পরামর্শ

• High-risk components-এ Error Boundary ব্যবহার করুন
• Logging system integrate করুন (Sentry, LogRocket)
• Multiple Error Boundary ব্যবহার করলে debugging আরও সহজ হয়

📌 Summary

Error Boundaries React অ্যাপকে নিরাপদ রাখে এবং কোনো component-এ error হলেও পুরো UI crash হতে দেয় না। শুধুমাত্র class component দিয়ে বানানো যায় এবং real-world অ্যাপে এটি অপরিহার্য।

• Error Boundary UI ভেঙে যাওয়া রোধ করে
• Fallback UI প্রদর্শন করে
• Error logging করতে সাহায্য করে
• UX এবং debugging উন্নত করে