Reactjs Error Boundary Class Vs Hook Useerrorboundary Library

Definisi

Error Boundary resmi React masih berupa class component (componentDidCatch / getDerivedStateFromError) — hook belum ada untuk menangkap render error. Library seperti react-error-boundary menyediakan ErrorBoundary (wrapper) + useErrorBoundary() hook untuk reset/retry dari dalam child.

Kapan dipakai

Pasang boundary di level yang masuk akal (route, widget) agar satu error tidak menjatuhkan seluruh app. Untuk error async/event handler, boundary tidak menangkap — tangani manual di try/catch.

Cara kerja

Class boundary

jsx

class EB extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(err) { log(err); }
  render() {
    if (this.state.hasError) return <p>Terjadi kesalahan.</p>;
    return this.props.children;
  }
}

Library hook reset

jsx

import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';
 
function Retry() {
  const { resetBoundary } = useErrorBoundary();
  return <button onClick={resetBoundary}>Coba lagi</button>;
}
 
<ErrorBoundary FallbackComponent={({ resetErrorBoundary }) => <Retry/>}>
  <Widget />
</ErrorBoundary>

Struktur alur

Catatan implementasi

• Boundary hanya menangkap error saat rendering descendants, bukan event handler/async.
• Untuk reset, library useErrorBoundary().resetBoundary lebih bersih dari class state manual.
• Suspense & Error Boundary sering dipasang berdampingan (loading + error).
• Letakkan boundary dekat fitur berisiko, bukan cuma di root.

Kesalahan umum

• Ngira hook ada: useState tidak bisa catch render error; butuh class/boundary lib.
• Satu boundary di root saja: seluruh UI mati saat satu widget error.
• Harap boundary tangkap async: setTimeout/await error butuh try/catch.
• Fallback tanpa reset: user terjebak di error permanen.

Referensi terkait

• React Error Boundaries, Suspense, Portals, Fallback Patterns
• Suspense for Data Libraries dan Error Recovery
• JavaScript Async Error Handling Patterns: AbortController, Retry