JavaScript Error Handling পাঠ-এর try/catch একটি কম্পোনেন্টের ভেতরে render-এর সময় তোলা এরর ধরে না — ডিফল্টভাবে, সেখানে একটি এরর পুরো React অ্যাপকে ক্র্যাশ করে দেয়, একটি খালি পাতা দেখায়। একটি এরর বাউন্ডারি সেই ক্ষতিকে এর বদলে ট্রির একটি অংশে সীমাবদ্ধ রাখার React-এর টুল।
একটি এরর বাউন্ডারি হলো একটি কম্পোনেন্ট যা render-এর সময় এর children-এর তোলা JavaScript এরর ধরে, সেগুলো লগ করে, আর ভেঙে পড়া ট্রির বদলে একটি fallback UI দেখায়। React-এর বর্তমান ভার্সন অনুযায়ী, এর জন্য নির্দিষ্টভাবে একটি ক্লাস কম্পোনেন্ট দরকার — আধুনিক React-এ একমাত্র জায়গা যেখানে আপনি এখনও একটি লিখবেন, কারণ এখনও কোনো হুক-ভিত্তিক সমতুল্য নেই:
import { Component } from 'react';
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error('Caught by ErrorBoundary:', error, info);
}
render() {
if (this.state.hasError) {
return <h2>Something went wrong.</h2>;
}
return this.props.children;
}
}ট্রির যে অংশটি স্বাধীনভাবে ব্যর্থ হওয়া উচিত তার চারপাশে এটা মুড়িয়ে দিন — children-এর সাথে কম্পোজ করা, ঠিক Component Composition পাঠের মতো:
function App() {
return (
<div>
<Header /> {/* stays up even if the widget below crashes */}
<ErrorBoundary>
<UnstableWidget />
</ErrorBoundary>
<Footer />
</div>
);
}| ধরে না | যা দিয়ে হ্যান্ডেল করবেন |
|---|---|
| ইভেন্ট হ্যান্ডলারের ভেতরের এরর | হ্যান্ডলারের ভেতরে নিজে একটি সাধারণ try/catch |
| একটি fetch() কলের ভেতরের এরর | Fetching Data পাঠের .catch() / try-catch প্যাটার্ন |
| সার্ভার-সাইড রেন্ডারিংয়ের সময়ের এরর | ফ্রেমওয়ার্ক-নির্দিষ্ট এরর হ্যান্ডলিং (এই অংশের সুযোগের বাইরে) |
একটি এরর বাউন্ডারি নির্দিষ্টভাবে সেই ক্ষেত্রের জন্য যা অন্য টুলগুলো কভার করে না: একটি কম্পোনেন্ট আসলে render হওয়ার সময় কিছু ভুল হওয়া।
কয়েকটি বাউন্ডারি, ইচ্ছাকৃতভাবে রাখা
একটি পাতার প্রধান স্বাধীন সেকশনের চারপাশে কয়েকটি ভালোভাবে-রাখা এরর বাউন্ডারি সাধারণত প্রতিটি ছোট কম্পোনেন্ট আলাদাভাবে মোড়ানোর চেয়ে ভালো। লক্ষ্য হলো একটি ক্র্যাশকে যে সেকশন ভেঙেছে তাতে সীমাবদ্ধ রাখা, প্রতিটি সম্ভাব্য ব্যর্থতা দূর করা নয়।