componentDidCatch এবং static getDerivedStateFromError ব্যবহার

React 16 এর পর থেকে, অ্যাপ্লিকেশনে ত্রুটি (error) ঘটলে তার হ্যান্ডলিং এর জন্য দুটি গুরুত্বপূর্ণ ফিচার যোগ করা হয়েছে: componentDidCatch এবং getDerivedStateFromError। এগুলো Error Boundaries এর অংশ এবং এগুলোর মাধ্যমে আপনি আপনার React অ্যাপ্লিকেশনে ত্রুটির প্রভাব সীমিত করতে পারেন এবং ব্যবহারকারীর জন্য একটি পরিষ্কার, ভালো অভিজ্ঞতা তৈরি করতে পারেন।

Error Boundaries React-এর এমন একটি ফিচার যা অ্যাপ্লিকেশনের মধ্যে কোন কম্পোনেন্টে ত্রুটি ঘটলে, পুরো অ্যাপ্লিকেশন ক্র্যাশ হওয়ার পরিবর্তে ত্রুটির অবস্থায় একটি ফিলব্যাক UI (যেমন, "Something went wrong" মেসেজ) প্রদর্শন করে।

componentDidCatch এবং getDerivedStateFromError এর মধ্যে পার্থক্য

• componentDidCatch: এটি একটি লাইফসাইকেল মেথড যা ক্লাস কম্পোনেন্টে ব্যবহৃত হয়। এটি কোনো কম্পোনেন্টে ত্রুটি ঘটলে সেই ত্রুটির তথ্য গ্রহণ করে এবং আপনি কোনো ফিলব্যাক UI বা লগিং মেকানিজম প্রদর্শন করতে পারেন।
• getDerivedStateFromError: এটি একটি স্ট্যাটিক মেথড যা নতুন React এর ভার্সনে ব্যবহার করা হয়। এটি ফাংশনাল কম্পোনেন্টে Error Boundaries তৈরি করতে সহায়তা করে এবং state আপডেট করার জন্য ব্যবহৃত হয়। এটি ত্রুটি ঘটলে আপনাকে error state প্রদান করে এবং সেই অনুযায়ী UI আপডেট করতে পারে।

componentDidCatch ব্যবহার

componentDidCatch হল একটি ক্লাস কম্পোনেন্টের লাইফসাইকেল মেথড যা আপনাকে অ্যাপ্লিকেশনের কোন ত্রুটি ধরা এবং তার পরবর্তী কার্যক্রম নির্ধারণ করতে সহায়তা করে। এটি ত্রুটির তথ্য এবং একটি fallback UI রেন্ডার করতে ব্যবহৃত হয়।

উদাহরণ:

import React, { Component } from 'react';

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

  componentDidCatch(error, info) {
    // ত্রুটির তথ্য ক্যাপচার করা
    this.setState({ hasError: true, errorMessage: error.message });
    // এখানে আপনি error log করতে পারেন, অথবা একটি সার্ভারে পাঠাতে পারেন
    console.log('Error logged:', error, info);
  }

  render() {
    if (this.state.hasError) {
      // fallback UI প্রদর্শন
      return <h1>Something went wrong: {this.state.errorMessage}</h1>;
    }
    return this.props.children;
  }
}

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

class ChildComponent extends React.Component {
  render() {
    // এখানে একটি ইচ্ছাকৃত ত্রুটি
    throw new Error('I crashed!');
  }
}

export default App;

এখানে, ErrorBoundary কম্পোনেন্টটি componentDidCatch মেথডের মাধ্যমে ত্রুটি ক্যাচ করে এবং একটি fallback UI প্রদর্শন করছে। যখন ChildComponent ত্রুটি ছুড়ে দেয়, তখন ErrorBoundary এর componentDidCatch মেথডটি চালু হয় এবং ত্রুটির বিস্তারিত দেখায়।

getDerivedStateFromError ব্যবহার

React 16.3 থেকে নতুন লাইফসাইকেল মেথড হিসেবে getDerivedStateFromError যোগ করা হয়েছে। এটি একটি স্ট্যাটিক মেথড, যার মাধ্যমে আপনি Error Boundaries তৈরি করতে পারেন ফাংশনাল কম্পোনেন্টে। এটি componentDidCatch এর মতোই কাজ করে, তবে এটি স্ট্যাটিক মেথড হওয়ায় এতে this কিওয়ার্ড ব্যবহার করা হয় না এবং শুধুমাত্র state আপডেট করা হয়।

উদাহরণ:

import React, { useState } from 'react';

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  static getDerivedStateFromError(error) {
    // ত্রুটি ঘটলে state আপডেট
    return { hasError: true };
  }

  if (hasError) {
    return <h1>Something went wrong.</h1>;
  }

  return children;
}

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

function ChildComponent() {
  // ইচ্ছাকৃত ত্রুটি
  throw new Error('I crashed!');
}

export default App;

এখানে, getDerivedStateFromError ব্যবহার করে, আমরা hasError state আপডেট করছি যখন কোনো ত্রুটি ঘটে এবং সেই অনুযায়ী fallback UI রেন্ডার করছি।

componentDidCatch বনাম getDerivedStateFromError

Error Boundaries এর পরবর্তী ব্যবহার

• Error Logging: আপনি componentDidCatch বা getDerivedStateFromError মেথডের মধ্যে ত্রুটি লগ করতে পারেন যাতে আপনি সার্ভারে পাঠাতে পারেন বা পরবর্তী বিশ্লেষণের জন্য সংরক্ষণ করতে পারেন।
• Fallback UI: Error Boundaries সাধারণত ত্রুটি ঘটলে একটি fallback UI যেমন "Something went wrong" বা একটি নির্দিষ্ট error page প্রদর্শন করে।
• Specific Error Boundaries: আপনি Error Boundaries ব্যবহার করে অ্যাপ্লিকেশনের নির্দিষ্ট অংশে ত্রুটি হ্যান্ডলিং করতে পারেন, যেমন একটি নির্দিষ্ট কম্পোনেন্ট, ইত্যাদি।

সারাংশ

ReactJS-এ componentDidCatch এবং getDerivedStateFromError হল দুটি গুরুত্বপূর্ণ Error Handling মেথড, যা আপনার অ্যাপ্লিকেশনের ত্রুটি সঠিকভাবে ধরা এবং তার প্রভাব সীমিত করতে সহায়তা করে। componentDidCatch মূলত ক্লাস কম্পোনেন্টে ব্যবহৃত হয়, এবং getDerivedStateFromError স্ট্যাটিক মেথড হিসেবে ফাংশনাল কম্পোনেন্টে ব্যবহৃত হয়।