Apa itu error boundaries dan apa yang mereka tangkap?

Question

Accepted Answer

Sebuah **error boundary** adalah component yang menangkap JavaScript errors yang dilempar **selama rendering** dalam child tree-nya, menampilkan fallback UI alih-alih menghancurkan seluruh aplikasi, dan dapat mencatat error. ```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: ``` ## Mengapa ini penting ✅ Menangkap: errors dalam **render**, dalam **lifecycle methods**, dan dalam constructors dari components di bawahnya. ❌ **Tidak** menangkap: - Errors dalam **event handlers** (gunakan `try/catch` normal di sana). - Kode **async** (promises, `setTimeout`) — mereka berada di luar alur render. - Errors dalam boundary itu sendiri, atau selama **SSR**. ## Catatan praktis - Error boundaries harus saat ini menjadi **class components** (atau gunakan library `react-error-boundary` untuk API yang ramah-hook). - Tempatkan beberapa boundaries di sekitar bagian-bagian independen (widgets, routes) sehingga satu widget yang gagal tidak menghancurkan semuanya — sebuah boundary tingkat atas tunggal mengubah error apa pun menjadi halaman kosong sepenuhnya.