Error Boundary Component তৈরি করা

React-এ Error Boundaries হল এমন কম্পোনেন্ট, যা আপনার অ্যাপ্লিকেশনে কোনো রেন্ডারিং, লাইফসাইকেল মেথড বা হুকের মধ্যে কোনো এরর হলে সেগুলো ক্যাচ করতে সাহায্য করে। এরর বাউন্ডারি কম্পোনেন্টটি ত্রুটি (error) হওয়ার পর অ্যাপ্লিকেশনের অন্য অংশগুলোকে ক্র্যাশ হওয়া থেকে রক্ষা করে এবং ব্যবহারকারীদের একটি ফ্রেন্ডলি এরর মেসেজ প্রদর্শন করে। React-এ Error Boundaries ব্যবহার করা সাধারণত বড় অ্যাপ্লিকেশনগুলোর ক্ষেত্রে খুবই গুরুত্বপূর্ণ।

Error Boundary কম্পোনেন্টের কাজ

Error Boundaries সাধারণত রেন্ডারিং, লাইফসাইকেল মেথড এবং হুকসের মধ্যে ত্রুটি (error) হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়। React-এর Error Boundaries কেবল ক্লাস কম্পোনেন্টে কাজ করে, এবং তারা componentDidCatch() মেথড ব্যবহার করে ত্রুটিগুলি ক্যাচ করে।

Error Boundary তৈরি করার পদক্ষেপ

১. Error Boundary কম্পোনেন্ট তৈরি করা

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,  // ত্রুটি হয়েছে কিনা তা চেক করবে
      error: null,      // ত্রুটির বিবরণ
      errorInfo: null   // ত্রুটির আরও বিস্তারিত তথ্য
    };
  }

  // componentDidCatch() মেথডটি ত্রুটি ক্যাচ করার জন্য ব্যবহৃত হয়
  static getDerivedStateFromError(error) {
    // ত্রুটি হলে UI আপডেট করার জন্য
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // লগ বা ডিবাগ করার জন্য ত্রুটির বিস্তারিত তথ্য
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
  }

  render() {
    if (this.state.hasError) {
      // যখন ত্রুটি ঘটে, তখন এখানে fallback UI প্রদর্শন করা হবে
      return (
        <div>
          <h2>Something went wrong!</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    // কোনো ত্রুটি না হলে মূল কম্পোনেন্ট রেন্ডার হবে
    return this.props.children;
  }
}

export default ErrorBoundary;

ব্যাখ্যা:

• getDerivedStateFromError: এটি একটি স্ট্যাটিক মেথড যা React 16.6-এ যোগ করা হয়েছিল। যখন কোনো ত্রুটি ঘটে, এটি hasError স্টেটটি true সেট করে দেয়, যাতে অ্যাপ্লিকেশনটি fallback UI দেখাতে পারে।
• componentDidCatch: এই মেথডটি error এবং errorInfo প্যারামিটার হিসেবে ত্রুটির বিস্তারিত তথ্য গ্রহণ করে। আপনি এখানে ত্রুটির লগ রাখতে পারেন বা API-তে পাঠাতে পারেন।
• render: যখন hasError স্টেট true হয়, তখন আপনি একটি fallback UI রেন্ডার করবেন, যেমন "Something went wrong" মেসেজ অথবা ত্রুটির বিস্তারিত তথ্য। যদি কোনো ত্রুটি না ঘটে, তাহলে কম্পোনেন্টের সাধারণ UI (this.props.children) রেন্ডার হবে।

২. Error Boundary ব্যবহার করা

এখন আপনি ErrorBoundary কম্পোনেন্টটি আপনার অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করতে পারবেন। এটি যেকোনো কম্পোনেন্টের চারপাশে র্যাপ করা যায়, যাতে ওই কম্পোনেন্টে কোনো ত্রুটি ঘটলে Error Boundary সেটি ক্যাচ করে।

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

function BuggyComponent() {
  // ইচ্ছাকৃতভাবে ত্রুটি সৃষ্টি করা হচ্ছে
  throw new Error('I crashed!');
  return <h1>Hello World!</h1>;
}

function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

export default App;

ব্যাখ্যা:

• এখানে, BuggyComponent কম্পোনেন্টে একটি ইচ্ছাকৃত ত্রুটি তৈরি করা হয়েছে (throw new Error('I crashed!'))।
• ErrorBoundary কম্পোনেন্টের মধ্যে এই ত্রুটিটি ক্যাচ করা হবে এবং সেই অনুযায়ী fallback UI রেন্ডার হবে।

Error Boundary এর ব্যবহারিক গুরুত্ব

1. কোনো নির্দিষ্ট কম্পোনেন্টে ত্রুটি হলে পুরো অ্যাপ্লিকেশন ক্র্যাশ থেকে রক্ষা পায়। যখন ErrorBoundary একটি নির্দিষ্ট কম্পোনেন্টের চারপাশে র‍্যাপ করা হয়, তখন শুধুমাত্র সেই কম্পোনেন্টটির জন্য fallback UI দেখানো হয়, কিন্তু অ্যাপ্লিকেশনের বাকি অংশ ঠিকভাবে কাজ করে।
2. অ্যাপ্লিকেশনের ইউজার এক্সপেরিয়েন্স উন্নত করে। ব্যবহারকারী যখন একটি ত্রুটি দেখেন, তখন তাকে একটি ফ্রেন্ডলি মেসেজ দেখানো হয়, যা আরও ব্যবহারকারী-বান্ধব হয়।
3. ত্রুটি লগিং এবং ডিবাগিং। componentDidCatch মেথডের মাধ্যমে আপনি ত্রুটির বিস্তারিত লগ রাখতে পারবেন, যা ডিবাগিং প্রক্রিয়ায় সহায়তা করবে।

উপসংহার

ReactJS-এ Error Boundary কম্পোনেন্ট ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে যে কোনো ত্রুটিকে ক্যাচ করতে পারেন এবং ব্যবহারকারীদের একটি উপযুক্ত fallback UI প্রদান করতে পারেন। এটি অ্যাপ্লিকেশনের স্থিতিশীলতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।