জাভাস্ক্রিপ্ট এরর বাউন্ডারি: একটি রিয়্যাক্ট এরর হ্যান্ডলিং ইমপ্লিমেন্টেশন গাইড

রিয়্যাক্ট ডেভেলপমেন্টের জগতে, অপ্রত্যাশিত এরর ব্যবহারকারীর জন্য হতাশাজনক অভিজ্ঞতা এবং অ্যাপ্লিকেশনের अस्थिरতার কারণ হতে পারে। একটি শক্তিশালী এবং নির্ভরযোগ্য অ্যাপ্লিকেশন তৈরির জন্য একটি সুস্পষ্ট এরর হ্যান্ডলিং কৌশল অত্যন্ত গুরুত্বপূর্ণ। রিয়্যাক্টের এরর বাউন্ডারি আপনার কম্পোনেন্ট ট্রির মধ্যে ঘটা এররগুলো সুন্দরভাবে পরিচালনা করার জন্য একটি শক্তিশালী মেকানিজম প্রদান করে, যা পুরো অ্যাপ্লিকেশনকে ক্র্যাশ করা থেকে রক্ষা করে এবং আপনাকে একটি ফলব্যাক UI দেখানোর সুযোগ দেয়।

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

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

একটি এরর বাউন্ডারিকে রিয়্যাক্ট কম্পোনেন্টের জন্য একটি try...catch ব্লক হিসেবে ভাবুন। ঠিক যেমন একটি try...catch ব্লক আপনাকে সিঙ্ক্রোনাস জাভাস্ক্রিপ্ট কোডে এক্সেপশন হ্যান্ডেল করতে দেয়, তেমনি একটি এরর বাউন্ডারি আপনাকে আপনার রিয়্যাক্ট কম্পোনেন্ট রেন্ডার করার সময় ঘটা এরর হ্যান্ডেল করতে দেয়।

গুরুত্বপূর্ণ দ্রষ্টব্য: এরর বাউন্ডারি এই ধরনের এরর ধরে না:

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

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

এরর বাউন্ডারি ব্যবহার করার বেশ কিছু গুরুত্বপূর্ণ সুবিধা রয়েছে:

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

রিয়্যাক্টে এরর বাউন্ডারি ইমপ্লিমেন্ট করা

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

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

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

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null, errorInfo: null }; } static getDerivedStateFromError(error) { // স্টেট আপডেট করুন যাতে পরবর্তী রেন্ডারে ফলব্যাক UI দেখা যায়। return { hasError: true, error: error }; } componentDidCatch(error, info) { // উদাহরণ "componentStack": // in ComponentThatThrows (created by App) // in MyErrorBoundary (created by App) // in div (created by App) // in App console.error("Caught an error:", error, info); this.setState({ errorInfo: info.componentStack }); // আপনি কোনো এরর রিপোর্টিং সার্ভিসে এররটি লগও করতে পারেন //logErrorToMyService(error, info.componentStack); } render() { if (this.state.hasError) { // আপনি যেকোনো কাস্টম ফলব্যাক UI রেন্ডার করতে পারেন return ( <div> <h2>Something went wrong.</h2> <p>Error: {this.state.error ? this.state.error.message : "An unknown error occurred."}</p> <details style={{ whiteSpace: 'pre-wrap' }}> {this.state.errorInfo && this.state.errorInfo} </details> </div> ); } return this.props.children; } }

এরর বাউন্ডারি ব্যবহার করতে, আপনি যে কম্পোনেন্ট ট্রিটিকে রক্ষা করতে চান সেটিকে শুধু র‍্যাপ করুন:

<ErrorBoundary> <MyComponentThatMightThrow/> </ErrorBoundary>

এরর বাউন্ডারি ব্যবহারের বাস্তব উদাহরণ

চলুন কিছু বাস্তব পরিস্থিতি দেখি যেখানে এরর বাউন্ডারি বিশেষভাবে কার্যকর হতে পারে:

১. এপিআই (API) এরর হ্যান্ডলিং

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

function UserProfile() { const [user, setUser] = React.useState(null); const [isLoading, setIsLoading] = React.useState(true); React.useEffect(() => { async function fetchData() { try { const response = await fetch('/api/user'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { // এররটি ErrorBoundary দ্বারা ধরা হবে throw error; } finally { setIsLoading(false); } } fetchData(); }, []); if (isLoading) { return <p>Loading user profile...</p>; } if (!user) { return <p>No user data available.</p>; } return ( <div> <h2>{user.name}</h2> <p>Email: {user.email}</p> </div> ); } function App() { return ( <ErrorBoundary> <UserProfile /> <ErrorBoundary> ); }

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

২. থার্ড-পার্টি লাইব্রেরি এরর হ্যান্ডলিং

থার্ড-পার্টি লাইব্রেরি ব্যবহার করার সময়, এটি সম্ভব যে তারা অপ্রত্যাশিত এরর থ্রো করতে পারে। এই লাইব্রেরিগুলি ব্যবহার করে এমন কম্পোনেন্টগুলিকে এরর বাউন্ডারি দিয়ে র‍্যাপ করা আপনাকে এই এররগুলি সুন্দরভাবে পরিচালনা করতে সাহায্য করতে পারে।

একটি কাল্পনিক চার্টিং লাইব্রেরির কথা ভাবুন যা মাঝে মাঝে ডেটার অসামঞ্জস্য বা অন্যান্য সমস্যার কারণে এরর থ্রো করে। আপনি চার্টিং কম্পোনেন্টটিকে এভাবে র‍্যাপ করতে পারেন:

function MyChartComponent() { try { // থার্ড-পার্টি লাইব্রেরি ব্যবহার করে চার্ট রেন্ডার করুন return <Chart data={data} />; } catch (error) { // এই catch ব্লকটি রিয়্যাক্ট কম্পোনেন্ট লাইফসাইকেল এররের জন্য কার্যকর হবে না // এটি মূলত এই নির্দিষ্ট ফাংশনের মধ্যে সিঙ্ক্রোনাস এররের জন্য। console.error("Error rendering chart:", error); // ErrorBoundary দ্বারা ধরার জন্য এররটি থ্রো করার কথা বিবেচনা করুন throw error; // এররটি পুনরায় থ্রো করা হচ্ছে } } function App() { return ( <ErrorBoundary> <MyChartComponent /> <ErrorBoundary> ); }

যদি Chart কম্পোনেন্ট একটি এরর থ্রো করে, তবে এরর বাউন্ডারি এটি ধরে ফেলবে এবং একটি ফলব্যাক UI প্রদর্শন করবে। মনে রাখবেন যে MyChartComponent এর মধ্যে try/catch শুধুমাত্র সিঙ্ক্রোনাস ফাংশনের মধ্যে এরর ধরবে, কম্পোনেন্টের লাইফসাইকেলের নয়। অতএব, ErrorBoundary এখানে অত্যন্ত গুরুত্বপূর্ণ।

৩. রেন্ডারিং এরর হ্যান্ডলিং

অবৈধ ডেটা, ভুল প্রপ টাইপ বা অন্যান্য সমস্যার কারণে রেন্ডারিং প্রক্রিয়া চলাকালীন এরর ঘটতে পারে। এরর বাউন্ডারি এই এররগুলি ধরতে পারে এবং অ্যাপ্লিকেশনটিকে ক্র্যাশ করা থেকে বিরত রাখতে পারে।

function DisplayName({ name }) { if (typeof name !== 'string') { throw new Error('Name must be a string'); } return <h2>Hello, {name}!</h2>; } function App() { return ( <ErrorBoundary> <DisplayName name={123} /> <!-- ভুল প্রপ টাইপ --> <ErrorBoundary> ); }

এই উদাহরণে, DisplayName কম্পোনেন্টটি আশা করে যে name প্রপটি একটি স্ট্রিং হবে। যদি এর পরিবর্তে একটি নম্বর পাস করা হয়, একটি এরর থ্রো করা হবে, এবং এরর বাউন্ডারি এটি ধরে ফেলবে এবং একটি ফলব্যাক UI প্রদর্শন করবে।

এরর বাউন্ডারি এবং ইভেন্ট হ্যান্ডলার

যেমনটি আগে উল্লেখ করা হয়েছে, এরর বাউন্ডারি ইভেন্ট হ্যান্ডলারের মধ্যে ঘটা এরর ধরে না। এর কারণ হলো ইভেন্ট হ্যান্ডলারগুলি সাধারণত অ্যাসিঙ্ক্রোনাস হয়, এবং এরর বাউন্ডারি শুধুমাত্র রেন্ডারিংয়ের সময়, লাইফসাইকেল মেথডে এবং কনস্ট্রাক্টরে ঘটা এরর ধরে।

ইভেন্ট হ্যান্ডলারে এরর হ্যান্ডেল করতে, আপনাকে ইভেন্ট হ্যান্ডলার ফাংশনের মধ্যে একটি প্রথাগত try...catch ব্লক ব্যবহার করতে হবে।

function MyComponent() { const handleClick = () => { try { // কিছু কোড যা একটি এরর থ্রো করতে পারে throw new Error('An error occurred in the event handler'); } catch (error) { console.error('Caught an error in the event handler:', error); // এররটি হ্যান্ডেল করুন (যেমন, ব্যবহারকারীকে একটি এরর বার্তা প্রদর্শন করুন) } }; return <button onClick={handleClick}>Click Me</button>; }

গ্লোবাল এরর হ্যান্ডলিং

যদিও এরর বাউন্ডারি রিয়্যাক্ট কম্পোনেন্ট ট্রির মধ্যে এরর হ্যান্ডেল করার জন্য চমৎকার, তারা সমস্ত সম্ভাব্য এরর পরিস্থিতি কভার করে না। উদাহরণস্বরূপ, তারা রিয়্যাক্ট কম্পোনেন্টের বাইরে ঘটা এরর ধরে না, যেমন গ্লোবাল ইভেন্ট লিসেনারে এরর বা রিয়্যাক্ট শুরু হওয়ার আগে চালিত কোডে এরর।

এই ধরনের এরর হ্যান্ডেল করতে, আপনি window.onerror ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন।

window.onerror = function(message, source, lineno, colno, error) { console.error('Global error handler:', message, source, lineno, colno, error); // সেন্ট্রি বা বাগসন্যাগের মতো কোনো সার্ভিসে এররটি লগ করুন // ব্যবহারকারীকে একটি গ্লোবাল এরর বার্তা প্রদর্শন করুন (ঐচ্ছিক) return true; // ডিফল্ট এরর হ্যান্ডলিং আচরণ প্রতিরোধ করুন };

window.onerror ইভেন্ট হ্যান্ডলারটি যখনই কোনো আনকॉट জাভাস্ক্রিপ্ট এরর ঘটে তখন কল করা হয়। আপনি এটি এরর লগ করতে, ব্যবহারকারীকে একটি গ্লোবাল এরর বার্তা প্রদর্শন করতে, বা এরর হ্যান্ডেল করার জন্য অন্যান্য পদক্ষেপ নিতে ব্যবহার করতে পারেন।

গুরুত্বপূর্ণ: window.onerror ইভেন্ট হ্যান্ডলার থেকে true রিটার্ন করা ব্রাউজারকে ডিফল্ট এরর বার্তা প্রদর্শন করা থেকে বিরত রাখে। তবে, ব্যবহারকারীর অভিজ্ঞতার কথা মাথায় রাখবেন; যদি আপনি ডিফল্ট বার্তাটি দমন করেন, তবে নিশ্চিত করুন যে আপনি একটি স্পষ্ট এবং তথ্যপূর্ণ বিকল্প প্রদান করছেন।

এরর বাউন্ডারি ব্যবহারের সেরা অনুশীলন

এরর বাউন্ডারি ব্যবহার করার সময় মনে রাখার জন্য এখানে কিছু সেরা অনুশীলন দেওয়া হলো:

• কৌশলগতভাবে এরর বাউন্ডারি স্থাপন করুন: আপনার অ্যাপ্লিকেশনের বিভিন্ন অংশকে এরর বাউন্ডারি দিয়ে র‍্যাপ করুন যাতে এররগুলি বিচ্ছিন্ন থাকে এবং ছড়িয়ে পড়া থেকে বিরত থাকে। পুরো রুট বা আপনার UI-এর প্রধান বিভাগগুলিকে র‍্যাপ করার কথা বিবেচনা করুন।
• তথ্যপূর্ণ ফলব্যাক UI প্রদান করুন: ফলব্যাক UI-টি ব্যবহারকারীকে জানানো উচিত যে একটি এরর ঘটেছে এবং সম্ভাব্য পুনরুদ্ধারের একটি উপায়ও দিতে পারে। "Something went wrong" এর মতো জেনেরিক এরর বার্তা প্রদর্শন করা এড়িয়ে চলুন।
• এরর লগ করুন: সেন্ট্রি বা বাগসন্যাগের মতো কোনো সার্ভিসে এরর লগ করতে componentDidCatch লাইফসাইকেল মেথড ব্যবহার করুন। এটি আপনাকে সমস্যার মূল কারণ খুঁজে বের করতে এবং আপনার অ্যাপ্লিকেশনের স্থিতিশীলতা উন্নত করতে সাহায্য করবে।
• প্রত্যাশিত এররের জন্য এরর বাউন্ডারি ব্যবহার করবেন না: এরর বাউন্ডারি অপ্রত্যাশিত এরর হ্যান্ডেল করার জন্য ডিজাইন করা হয়েছে। প্রত্যাশিত এররের জন্য (যেমন, ভ্যালিডেশন এরর, API এরর), আরও নির্দিষ্ট এরর হ্যান্ডলিং মেকানিজম ব্যবহার করুন, যেমন try...catch ব্লক বা কাস্টম এরর হ্যান্ডলিং কম্পোনেন্ট।
• একাধিক স্তরের এরর বাউন্ডারি বিবেচনা করুন: আপনি বিভিন্ন স্তরের এরর হ্যান্ডলিং প্রদান করতে এরর বাউন্ডারি নেস্ট করতে পারেন। উদাহরণস্বরূপ, আপনার একটি গ্লোবাল এরর বাউন্ডারি থাকতে পারে যা যেকোনো আনহ্যান্ডেলড এরর ধরে এবং একটি জেনেরিক এরর বার্তা প্রদর্শন করে, এবং আরও নির্দিষ্ট এরর বাউন্ডারি যা নির্দিষ্ট কম্পোনেন্টে এরর ধরে এবং আরও বিস্তারিত এরর বার্তা প্রদর্শন করে।
• সার্ভার-সাইড রেন্ডারিংয়ের কথা ভুলবেন না: যদি আপনি সার্ভার-সাইড রেন্ডারিং ব্যবহার করেন, তবে আপনাকে সার্ভারেও এরর হ্যান্ডেল করতে হবে। এরর বাউন্ডারি সার্ভারে কাজ করে, তবে প্রাথমিক রেন্ডারের সময় ঘটা এরর ধরার জন্য আপনাকে অতিরিক্ত এরর হ্যান্ডলিং মেকানিজম ব্যবহার করতে হতে পারে।

অ্যাডভান্সড এরর বাউন্ডারি কৌশল

১. রেন্ডার প্রপ (Render Prop) ব্যবহার করা

একটি স্ট্যাটিক ফলব্যাক UI রেন্ডার করার পরিবর্তে, আপনি এরর কীভাবে হ্যান্ডেল করা হয় তাতে আরও নমনীয়তা প্রদান করতে একটি রেন্ডার প্রপ ব্যবহার করতে পারেন। একটি রেন্ডার প্রপ হলো একটি ফাংশন প্রপ যা একটি কম্পোনেন্ট কিছু রেন্ডার করতে ব্যবহার করে।

class ErrorBoundary extends React.Component { // ... (আগের মতোই) render() { if (this.state.hasError) { // ফলব্যাক UI রেন্ডার করতে রেন্ডার প্রপ ব্যবহার করুন return this.props.fallbackRender(this.state.error, this.state.errorInfo); } return this.props.children; } } function App() { return ( <ErrorBoundary fallbackRender={(error, errorInfo) => ( <div> <h2>Something went wrong!</h2> <p>Error: {error.message}</p> <details style={{ whiteSpace: 'pre-wrap' }}> {errorInfo.componentStack} </details> </div> )}> <MyComponentThatMightThrow/> <ErrorBoundary> ); }

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

২. এরর বাউন্ডারিকে একটি হায়ার-অর্ডার কম্পোনেন্ট (HOC) হিসেবে ব্যবহার

আপনি একটি হায়ার-অর্ডার কম্পোনেন্ট (HOC) তৈরি করতে পারেন যা অন্য একটি কম্পোনেন্টকে একটি এরর বাউন্ডারি দিয়ে র‍্যাপ করে। এটি একই কোড পুনরাবৃত্তি না করে একাধিক কম্পোনেন্টে এরর বাউন্ডারি প্রয়োগ করার জন্য উপযোগী হতে পারে।

function withErrorBoundary(WrappedComponent) { return class WithErrorBoundary extends React.Component { render() { return ( <ErrorBoundary> <WrappedComponent {...this.props} /> <ErrorBoundary> ); } }; } // ব্যবহার: const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

withErrorBoundary ফাংশনটি একটি কম্পোনেন্টকে আর্গুমেন্ট হিসেবে নেয় এবং একটি নতুন কম্পোনেন্ট রিটার্ন করে যা মূল কম্পোনেন্টটিকে একটি এরর বাউন্ডারি দিয়ে র‍্যাপ করে। এটি আপনাকে আপনার অ্যাপ্লিকেশনের যেকোনো কম্পোনেন্টে সহজেই এরর হ্যান্ডলিং যোগ করতে দেয়।

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

আপনার এরর বাউন্ডারিগুলি সঠিকভাবে কাজ করছে কিনা তা নিশ্চিত করার জন্য সেগুলি পরীক্ষা করা গুরুত্বপূর্ণ। আপনি আপনার এরর বাউন্ডারি পরীক্ষা করতে Jest এবং React Testing Library-এর মতো টেস্টিং লাইব্রেরি ব্যবহার করতে পারেন।

এখানে React Testing Library ব্যবহার করে একটি এরর বাউন্ডারি পরীক্ষা করার একটি উদাহরণ দেওয়া হলো:

import { render, screen, fireEvent } from '@testing-library/react'; import ErrorBoundary from './ErrorBoundary'; function ComponentThatThrows() { throw new Error('This component throws an error'); } test('renders fallback UI when an error is thrown', () => { render( <ErrorBoundary> <ComponentThatThrows /> <ErrorBoundary> ); expect(screen.getByText('Something went wrong.')).toBeInTheDocument(); });

এই পরীক্ষাটি ComponentThatThrows কম্পোনেন্টটি রেন্ডার করে, যা একটি এরর থ্রো করে। পরীক্ষাটি তারপর নিশ্চিত করে যে এরর বাউন্ডারি দ্বারা রেন্ডার করা ফলব্যাক UI প্রদর্শিত হচ্ছে।

এরর বাউন্ডারি এবং সার্ভার কম্পোনেন্টস (রিয়্যাক্ট ১৮+)

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

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

সার্ভার কম্পোনেন্টসে এরর হ্যান্ডলিং একটি বিকশিত ক্ষেত্র, তাই সর্বশেষ সেরা অনুশীলন এবং সুপারিশগুলির সাথে আপ-টু-ডেট থাকা গুরুত্বপূর্ণ।

সাধারণ যে ভুলগুলো এড়িয়ে চলতে হবে

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

উপসংহার

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

এই গাইডে বর্ণিত নির্দেশিকা এবং সেরা অনুশীলনগুলি অনুসরণ করে, আপনি নিশ্চিত করতে পারেন যে আপনার রিয়্যাক্ট অ্যাপ্লিকেশনগুলি এররের প্রতি সহনশীল এবং আপনার ব্যবহারকারীদের জন্য একটি ইতিবাচক অভিজ্ঞতা প্রদান করে।