রিঅ্যাক্ট এরর বাউন্ডারি: শক্তিশালী এরর হ্যান্ডলিং এর একটি বিস্তারিত গাইড

আধুনিক ওয়েব ডেভেলপমেন্টের জগতে একটি মসৃণ এবং নির্ভরযোগ্য ব্যবহারকারীর অভিজ্ঞতা অত্যন্ত গুরুত্বপূর্ণ। একটি মাত্র আনহ্যান্ডেলড এরর পুরো রিঅ্যাক্ট অ্যাপ্লিকেশনকে ক্র্যাশ করতে পারে, যা ব্যবহারকারীদের হতাশ করে এবং মূল্যবান ডেটা হারানোর সম্ভাবনা তৈরি করে। রিঅ্যাক্ট এরর বাউন্ডারি এই ধরনের এরর সুন্দরভাবে হ্যান্ডেল করার জন্য একটি শক্তিশালী ব্যবস্থা প্রদান করে, যা মারাত্মক ক্র্যাশ প্রতিরোধ করে এবং একটি আরও স্থিতিশীল ও ব্যবহারকারী-বান্ধব অভিজ্ঞতা দেয়। এই গাইডটি রিঅ্যাক্ট এরর বাউন্ডারির একটি বিস্তারিত বিবরণ প্রদান করে, যার মধ্যে রয়েছে এর উদ্দেশ্য, বাস্তবায়ন, সেরা অনুশীলন এবং উন্নত কৌশল।

রিঅ্যাক্ট এরর বাউন্ডারি কী?

এরর বাউন্ডারি হলো রিঅ্যাক্ট কম্পোনেন্ট যা তাদের চাইল্ড কম্পোনেন্ট ট্রি-এর যেকোনো জায়গায় জাভাস্ক্রিপ্ট এরর ধরতে পারে, সেই এররগুলো লগ করে এবং ক্র্যাশ হওয়া কম্পোনেন্ট ট্রি-এর পরিবর্তে একটি ফলব্যাক UI প্রদর্শন করে। এটি একটি সেফটি নেট হিসেবে কাজ করে, যা অ্যাপ্লিকেশনের একটি অংশের এররকে পুরো UI নষ্ট করা থেকে বিরত রাখে। রিঅ্যাক্ট 16-এ এটি চালু করা হয়েছিল এবং এরর বাউন্ডারি পূর্ববর্তী কম শক্তিশালী এরর হ্যান্ডলিং পদ্ধতিগুলোকে প্রতিস্থাপন করেছে।

এরর বাউন্ডারিকে রিঅ্যাক্ট কম্পোনেন্টের জন্য `try...catch` ব্লক হিসেবে ভাবতে পারেন। তবে, `try...catch`-এর মতো নয়, এটি কম্পোনেন্টের জন্য কাজ করে এবং আপনার অ্যাপ্লিকেশন জুড়ে এরর হ্যান্ডেল করার জন্য একটি ডিক্লেয়ারেটিভ এবং পুনঃব্যবহারযোগ্য উপায় প্রদান করে।

কেন এরর বাউন্ডারি ব্যবহার করবেন?

এরর বাউন্ডারি বিভিন্ন গুরুত্বপূর্ণ সুবিধা প্রদান করে:

• অ্যাপ্লিকেশন ক্র্যাশ প্রতিরোধ: সবচেয়ে বড় সুবিধা হলো একটি একক কম্পোনেন্ট এররকে পুরো অ্যাপ্লিকেশন ক্র্যাশ করা থেকে বিরত রাখা। একটি সাদা স্ক্রিন বা অদরকারী এরর মেসেজের পরিবর্তে, ব্যবহারকারীরা একটি সুন্দর ফলব্যাক UI দেখতে পায়।
• ব্যবহারকারীর অভিজ্ঞতা উন্নত করা: একটি ফলব্যাক UI প্রদর্শনের মাধ্যমে, এরর বাউন্ডারি ব্যবহারকারীদের অ্যাপ্লিকেশনের সেই অংশগুলো ব্যবহার চালিয়ে যেতে দেয় যা সঠিকভাবে কাজ করছে। এটি একটি বিরক্তিকর এবং হতাশাজনক অভিজ্ঞতা এড়িয়ে যায়।
• এরর বিচ্ছিন্ন করা: এরর বাউন্ডারি অ্যাপ্লিকেশনের নির্দিষ্ট অংশে এরর বিচ্ছিন্ন করতে সাহায্য করে, যার ফলে সমস্যার মূল কারণ শনাক্ত করা এবং ডিবাগ করা সহজ হয়।
• উন্নত লগিং এবং মনিটরিং: এরর বাউন্ডারি আপনার অ্যাপ্লিকেশনে ঘটা এরর লগ করার জন্য একটি কেন্দ্রীয় স্থান প্রদান করে। এই তথ্য সক্রিয়ভাবে সমস্যা শনাক্ত এবং সমাধান করার জন্য অমূল্য হতে পারে। এটি Sentry, Rollbar বা Bugsnag-এর মতো মনিটরিং সার্ভিসের সাথে যুক্ত করা যেতে পারে, যার সবগুলোরই বিশ্বব্যাপী কভারেজ রয়েছে।
• অ্যাপ্লিকেশন স্টেট বজায় রাখা: একটি ক্র্যাশের কারণে সমস্ত অ্যাপ্লিকেশন স্টেট হারানোর পরিবর্তে, এরর বাউন্ডারি অ্যাপ্লিকেশনের বাকি অংশকে কাজ চালিয়ে যেতে দেয়, যা ব্যবহারকারীর অগ্রগতি এবং ডেটা সংরক্ষণ করে।

একটি এরর বাউন্ডারি কম্পোনেন্ট তৈরি করা

একটি এরর বাউন্ডারি কম্পোনেন্ট তৈরি করতে, আপনাকে একটি ক্লাস কম্পোনেন্ট ডিফাইন করতে হবে যা নিম্নলিখিত লাইফসাইকেল মেথডগুলোর একটি বা উভয়ই ইমপ্লিমেন্ট করে:

• static getDerivedStateFromError(error): এই স্ট্যাটিক মেথডটি একটি ডিসেন্ড্যান্ট কম্পোনেন্ট দ্বারা এরর থ্রো করার পরে কল করা হয়। এটি থ্রো করা এররটি আর্গুমেন্ট হিসেবে গ্রহণ করে এবং ফলব্যাক UI রেন্ডার করার জন্য স্টেট আপডেট করার জন্য একটি ভ্যালু রিটার্ন করে।
• componentDidCatch(error, info): এই মেথডটি একটি ডিসেন্ড্যান্ট কম্পোনেন্ট দ্বারা এরর থ্রো করার পরে কল করা হয়। এটি থ্রো করা এরর এবং একটি info অবজেক্ট গ্রহণ করে, যেখানে কোন কম্পোনেন্ট এররটি থ্রো করেছে তার তথ্য থাকে। আপনি এই মেথডটি এরর লগ করতে বা অন্যান্য সাইড এফেক্ট সম্পাদন করতে ব্যবহার করতে পারেন।

এখানে একটি এরর বাউন্ডারি কম্পোনেন্টের একটি বেসিক উদাহরণ দেওয়া হল:

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

  static getDerivedStateFromError(error) {
    // স্টেট আপডেট করুন যাতে পরবর্তী রেন্ডারে ফলব্যাক UI দেখানো হয়।
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // উদাহরণ "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in App
    console.error("Caught an error: ", error, info.componentStack);
    // আপনি একটি এরর রিপোর্টিং সার্ভিসে এররটি লগ করতে পারেন
    // logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // আপনি যেকোনো কাস্টম ফলব্যাক UI রেন্ডার করতে পারেন
      return 
কিছু একটা ভুল হয়েছে।
;
    }

    return this.props.children; 
  }
}

ব্যাখ্যা:

• ErrorBoundary কম্পোনেন্টটি একটি ক্লাস কম্পোনেন্ট যা React.Component-কে এক্সটেন্ড করে।
• কনস্ট্রাক্টরটি hasError: false দিয়ে স্টেট ইনিশিয়ালাইজ করে। এই ফ্ল্যাগটি ফলব্যাক UI রেন্ডার করা হবে কিনা তা নির্ধারণ করতে ব্যবহৃত হবে।
• static getDerivedStateFromError(error) একটি স্ট্যাটিক মেথড যা থ্রো করা এররটি গ্রহণ করে। এটি স্টেটকে hasError: true তে আপডেট করে, যা ফলব্যাক UI রেন্ডার ট্রিগার করবে।
• componentDidCatch(error, info) একটি লাইফসাইকেল মেথড যা এরর এবং কম্পোনেন্ট স্ট্যাক সম্পর্কে তথ্য ধারণকারী একটি info অবজেক্ট গ্রহণ করে। এটি কনসোলে এরর লগ করতে ব্যবহৃত হয়। একটি প্রোডাকশন অ্যাপ্লিকেশনে, আপনি সাধারণত একটি এরর রিপোর্টিং সার্ভিসে এররটি লগ করবেন।
• render() মেথডটি hasError স্টেট পরীক্ষা করে। যদি এটি সত্য হয়, তবে এটি একটি ফলব্যাক UI রেন্ডার করে ( данном случае, একটি সাধারণ

  ট্যাগ)। অন্যথায়, এটি কম্পোনেন্টের চিলড্রেন রেন্ডার করে।

এরর বাউন্ডারি ব্যবহার করা

একটি এরর বাউন্ডারি ব্যবহার করতে, আপনি যে কম্পোনেন্ট বা কম্পোনেন্টগুলো রক্ষা করতে চান সেগুলোকে ErrorBoundary কম্পোনেন্ট দিয়ে র‍্যাপ করুন:

যদি ComponentThatMightThrow একটি এরর থ্রো করে, তাহলে ErrorBoundary এররটি ধরবে, তার স্টেট আপডেট করবে এবং তার ফলব্যাক UI রেন্ডার করবে। অ্যাপ্লিকেশনের বাকি অংশ স্বাভাবিকভাবে কাজ করতে থাকবে।

এরর বাউন্ডারির স্থান নির্ধারণ

কার্যকর এরর হ্যান্ডলিংয়ের জন্য এরর বাউন্ডারির স্থান নির্ধারণ অত্যন্ত গুরুত্বপূর্ণ। এই কৌশলগুলো বিবেচনা করুন:

• টপ-লেভেল এরর বাউন্ডারি: যেকোনো আনহ্যান্ডেলড এরর ধরতে এবং সম্পূর্ণ অ্যাপ্লিকেশন ক্র্যাশ প্রতিরোধ করতে পুরো অ্যাপ্লিকেশনটিকে একটি এরর বাউন্ডারি দিয়ে র‍্যাপ করুন। এটি একটি বেসিক স্তরের সুরক্ষা প্রদান করে।
• গ্র্যানুলার এরর বাউন্ডারি: এরর বিচ্ছিন্ন করতে এবং আরও নির্দিষ্ট ফলব্যাক UI প্রদান করতে অ্যাপ্লিকেশনের নির্দিষ্ট কম্পোনেন্ট বা বিভাগগুলোকে এরর বাউন্ডারি দিয়ে র‍্যাপ করুন। উদাহরণস্বরূপ, আপনি একটি এক্সটার্নাল API থেকে ডেটা আনা কম্পোনেন্টকে একটি এরর বাউন্ডারি দিয়ে র‍্যাপ করতে পারেন।
• পেজ-লেভেল এরর বাউন্ডারি: আপনার অ্যাপ্লিকেশনের সম্পূর্ণ পেজ বা রাউটের চারপাশে এরর বাউন্ডারি স্থাপনের কথা বিবেচনা করুন। এটি এক পেজের এররকে অন্য পেজে প্রভাব ফেলতে বাধা দেবে।

উদাহরণ:

function App() {
  return (
    

      
        

      
      
        
      
      
        
          
        
      
      
        
  );
}

এই উদাহরণে, অ্যাপ্লিকেশনের প্রতিটি প্রধান অংশ (হেডার, সাইডবার, কন্টেন্টএরিয়া, ফুটার) একটি এরর বাউন্ডারি দিয়ে র‍্যাপ করা হয়েছে। এটি প্রতিটি অংশকে স্বাধীনভাবে এরর হ্যান্ডেল করতে দেয়, যার ফলে একটি একক এরর পুরো অ্যাপ্লিকেশনকে প্রভাবিত করতে পারে না।

ফলব্যাক UI কাস্টমাইজ করা

একটি এরর বাউন্ডারি দ্বারা প্রদর্শিত ফলব্যাক UI তথ্যপূর্ণ এবং ব্যবহারকারী-বান্ধব হওয়া উচিত। এই নির্দেশিকাগুলো বিবেচনা করুন:

• একটি স্পষ্ট এরর মেসেজ দিন: একটি সংক্ষিপ্ত এবং তথ্যপূর্ণ এরর মেসেজ প্রদর্শন করুন যা ব্যাখ্যা করে যে কী ভুল হয়েছে। প্রযুক্তিগত শব্দ পরিহার করুন এবং এমন ভাষা ব্যবহার করুন যা ব্যবহারকারীদের জন্য বোঝা সহজ।
• সমাধান অফার করুন: ব্যবহারকারীকে সম্ভাব্য সমাধানের পরামর্শ দিন, যেমন পেজ রিফ্রেশ করা, পরে আবার চেষ্টা করা, বা সাপোর্টের সাথে যোগাযোগ করা।
• ব্র্যান্ডের সামঞ্জস্য বজায় রাখুন: নিশ্চিত করুন যে ফলব্যাক UI আপনার অ্যাপ্লিকেশনের সামগ্রিক ডিজাইন এবং ব্র্যান্ডিংয়ের সাথে মেলে। এটি একটি সামঞ্জস্যপূর্ণ ব্যবহারকারীর অভিজ্ঞতা বজায় রাখতে সাহায্য করে।
• এরর রিপোর্ট করার একটি উপায় দিন: একটি বোতাম বা লিঙ্ক অন্তর্ভুক্ত করুন যা ব্যবহারকারীদের আপনার টিমের কাছে এরর রিপোর্ট করতে দেয়। এটি ডিবাগিং এবং সমস্যা সমাধানের জন্য মূল্যবান তথ্য সরবরাহ করতে পারে।

উদাহরণ:

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

  static getDerivedStateFromError(error) {
    // স্টেট আপডেট করুন যাতে পরবর্তী রেন্ডারে ফলব্যাক UI দেখানো হয়।
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // আপনি একটি এরর রিপোর্টিং সার্ভিসে এররটি লগ করতে পারেন
    console.error("Caught an error: ", error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // আপনি যেকোনো কাস্টম ফলব্যাক UI রেন্ডার করতে পারেন
      return (
        

          
উফ! কিছু একটা ভুল হয়েছে।
          
আমরা দুঃখিত, কিন্তু এই কন্টেন্টটি প্রদর্শন করার সময় একটি এরর ঘটেছে।
          
দয়া করে পেজটি রিফ্রেশ করুন অথবা সমস্যাটি চলতে থাকলে সাপোর্টের সাথে যোগাযোগ করুন।
           window.location.reload()}>পেজ রিফ্রেশ করুন
          সাপোর্টের সাথে যোগাযোগ করুন
        
      );
    }

    return this.props.children; 
  }
}

এই উদাহরণটি একটি আরও তথ্যপূর্ণ ফলব্যাক UI প্রদর্শন করে যাতে একটি স্পষ্ট এরর মেসেজ, প্রস্তাবিত সমাধান এবং পেজ রিফ্রেশ ও সাপোর্টের সাথে যোগাযোগের লিঙ্ক অন্তর্ভুক্ত রয়েছে।

বিভিন্ন ধরনের এরর হ্যান্ডলিং

এরর বাউন্ডারি রেন্ডারিংয়ের সময়, লাইফসাইকেল মেথডে এবং তাদের নীচের পুরো ট্রি-এর কনস্ট্রাকটরে ঘটে যাওয়া এররগুলো ধরে। তারা নিম্নলিখিত ক্ষেত্রে এরর ধরে না:

• ইভেন্ট হ্যান্ডলার
• অ্যাসিঙ্ক্রোনাস কোড (যেমন, setTimeout, requestAnimationFrame)
• সার্ভার-সাইড রেন্ডারিং
• এরর বাউন্ডারির নিজের মধ্যে থ্রো করা এরর (তার চিলড্রেনের পরিবর্তে)

এই ধরনের এরর হ্যান্ডেল করার জন্য, আপনাকে বিভিন্ন কৌশল ব্যবহার করতে হবে।

ইভেন্ট হ্যান্ডলার

ইভেন্ট হ্যান্ডলারে ঘটে যাওয়া এররের জন্য, একটি স্ট্যান্ডার্ড try...catch ব্লক ব্যবহার করুন:

function MyComponent() {
  const handleClick = () => {
    try {
      // কোড যা এরর থ্রো করতে পারে
      throw new Error("Something went wrong in the event handler");
    } catch (error) {
      console.error("Error in event handler: ", error);
      // এররটি হ্যান্ডেল করুন (যেমন, একটি এরর মেসেজ প্রদর্শন করুন)
      alert("একটি এরর ঘটেছে। দয়া করে আবার চেষ্টা করুন।");
    }
  };

  return আমাকে ক্লিক করুন;
}

অ্যাসিঙ্ক্রোনাস কোড

অ্যাসিঙ্ক্রোনাস কোডে ঘটে যাওয়া এররের জন্য, অ্যাসিঙ্ক্রোনাস ফাংশনের মধ্যে try...catch ব্লক ব্যবহার করুন:

function MyComponent() {
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        // ডেটা প্রসেস করুন
        console.log(data);
      } catch (error) {
        console.error("Error fetching data: ", error);
        // এররটি হ্যান্ডেল করুন (যেমন, একটি এরর মেসেজ প্রদর্শন করুন)
        alert("ডেটা আনতে ব্যর্থ। দয়া করে পরে আবার চেষ্টা করুন।");
      }
    }

    fetchData();
  }, []);

  return 
ডেটা লোড হচ্ছে...
;
}

বিকল্পভাবে, আপনি আনহ্যান্ডেলড প্রমিস রিজেকশনের জন্য একটি গ্লোবাল এরর হ্যান্ডলিং মেকানিজম ব্যবহার করতে পারেন:

window.addEventListener('unhandledrejection', function(event) {
  console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ');');
  // ঐচ্ছিকভাবে একটি গ্লোবাল এরর মেসেজ প্রদর্শন করুন বা একটি সার্ভিসে এররটি লগ করুন
  alert("একটি অপ্রত্যাশিত এরর ঘটেছে। দয়া করে পরে আবার চেষ্টা করুন।");
});

উন্নত এরর বাউন্ডারি কৌশল

এরর বাউন্ডারি রিসেট করা

কিছু ক্ষেত্রে, আপনি ব্যবহারকারীদের এরর বাউন্ডারি রিসেট করার এবং যে অপারেশনটি এররের কারণ হয়েছিল তা পুনরায় চেষ্টা করার একটি উপায় সরবরাহ করতে চাইতে পারেন। এটি উপযোগী হতে পারে যদি এররটি একটি অস্থায়ী সমস্যার কারণে হয়, যেমন নেটওয়ার্ক সমস্যা।

একটি এরর বাউন্ডারি রিসেট করতে, আপনি এরর স্টেট পরিচালনা করতে এবং একটি রিসেট ফাংশন সরবরাহ করতে Redux বা Context-এর মতো একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি ব্যবহার করতে পারেন। বিকল্পভাবে, আপনি এরর বাউন্ডারিকে রিমount করতে বাধ্য করে একটি সহজ পদ্ধতি ব্যবহার করতে পারেন।

উদাহরণ (রিমount করতে বাধ্য করা):

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

  static getDerivedStateFromError(error) {
    // স্টেট আপডেট করুন যাতে পরবর্তী রেন্ডারে ফলব্যাক UI দেখানো হয়।
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // আপনি একটি এরর রিপোর্টিং সার্ভিসে এররটি লগ করতে পারেন
    console.error("Caught an error: ", error, info.componentStack);
    this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
  }

  resetError = () => {
      this.setState({hasError: false, key: this.state.key + 1})
  }

  render() {
    if (this.state.hasError) {
      // আপনি যেকোনো কাস্টম ফলব্যাক UI রেন্ডার করতে পারেন
      return (
        

          
উফ! কিছু একটা ভুল হয়েছে।
          
আমরা দুঃখিত, কিন্তু এই কন্টেন্টটি প্রদর্শন করার সময় একটি এরর ঘটেছে।
          আবার চেষ্টা করুন
        
      );
    }

    return 
{this.props.children}
;
  }
}

এই উদাহরণে, র‍্যাপিং ডিভ-এ একটি 'key' যোগ করা হয়েছে। কী পরিবর্তন করলে কম্পোনেন্টটি রিমount হতে বাধ্য হয়, যা কার্যকরভাবে এরর স্টেট পরিষ্কার করে। resetError মেথডটি কম্পোনেন্টের key স্টেট আপডেট করে, যার ফলে কম্পোনেন্টটি রিমount হয় এবং তার চিলড্রেন পুনরায় রেন্ডার করে।

সাসপেন্সের সাথে এরর বাউন্ডারি ব্যবহার

রিঅ্যাক্ট সাসপেন্স আপনাকে একটি কম্পোনেন্টের রেন্ডারিং "স্থগিত" করার অনুমতি দেয় যতক্ষণ না কোনো শর্ত পূরণ হয় (যেমন, ডেটা আনা হয়)। আপনি অ্যাসিঙ্ক্রোনাস অপারেশনের জন্য আরও শক্তিশালী এরর হ্যান্ডলিং অভিজ্ঞতা প্রদান করতে এরর বাউন্ডারিকে সাসপেন্সের সাথে একত্রিত করতে পারেন।

import React, { Suspense } from 'react';

function MyComponent() {
  return (
    
      লোড হচ্ছে...