Apakah error boundaries dan apa yang mereka tangkap?

Question

Accepted Answer

**Error boundary** adalah komponen yang menangkap kesalahan JavaScript yang dilempar **semasa rendering** di pohon anaknya, menampilkan UI fallback daripada menghancurkan seluruh aplikasi, dan dapat mencatat kesalahan. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Apa yang ditangkap — dan apa yang tidak ✅ Menangkap: kesalahan di **render**, di **lifecycle methods**, dan di konstruktor komponen di bawahnya. ❌ Tidak menangkap: - Kesalahan di **event handlers** (gunakan `try/catch` normal di sana). - Kode **async** (promises, `setTimeout`) — mereka berada di luar aliran render. - Kesalahan di boundary itu sendiri, atau selama **SSR**. ## Catatan praktis - Error boundaries saat ini harus berupa **class components** (atau gunakan library `react-error-boundary` untuk API yang ramah-hook). - Tempatkan beberapa boundaries di sekitar bagian-bagian independen (widgets, routes) jadi satu widget yang gagal tidak membawa segalanya — satu boundary top-level mengubah kesalahan apa pun menjadi halaman kosong sepenuhnya.