ReactIntermediate
Error Boundaries
Rendering-এ error হলে crash আটকানো — class component error boundary — বাংলায়।
6টি অংশবাংলা ভাষায়
Error boundary কী?
Child-এ rendering-এর সময় error হলে পুরো app crash করে। Error boundary হলো wrapper যা সেই error ধরার পরে fallback UI দেখায়। React-এ এখনো শুধু class component দিয়ে সম্ভব।
Error boundary classjsx
jsx
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() {
return { hasError: true }; // error হলে fallback
}
componentDidCatch(error, info) {
console.error(error, info.componentStack);
}
render() {
if (this.state.hasError) {
return <h1>কিছু একটা ভুল হয়েছে</h1>;
}
return this.props.children;
}
}
// ব্যবহার
<ErrorBoundary>
<UserProfile />
</ErrorBoundary>যেখানে কাজ করে না
- Event handler-এর error — boundary ধরে না
- Async code (fetch promise)
- Server-side rendering
- Error boundary নিজের ভেতরের error
Event error
Event handler-এ throw করা error error boundary ধরে না। সেখানে নিজে try/catch ও error reporting service-এ লগ করুন।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।