Batas Error
Terapkan Batas Error berbasis class dengan componentDidCatch dan getDerivedStateFromError untuk mencegah error render yang tidak tertangkap merusak seluruh aplikasi.
Batas Error adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa Error Boundary?
Error yang tidak tertangani saat rendering, dalam metode siklus hidup, atau dalam konstruktor secara bawaan akan merusak seluruh pohon React. Error Boundary menangkap error tersebut dalam sebuah subtree dan memungkinkan Anda merender fallback sebagai gantinya.
Hanya Komponen Class
Error Boundary harus berupa komponen class (masih demikian pada 2026 — belum ada padanan hook). Hook useErrorBoundary tersedia dalam pustaka seperti react-error-boundary.
getDerivedStateFromError
Metode statis yang dipanggil ketika komponen turunan menghasilkan error. Kembalikan pembaruan state yang memicu rendering fallback.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch untuk Logging
Gunakan componentDidCatch untuk mencatat error ke layanan (Sentry, Datadog) — metode ini menerima error dan tumpukan komponen React.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Membungkus Akar Aplikasi
Bungkus App tingkat teratas Anda dalam Error Boundary untuk mencegah layar putih kematian.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Boundary Terperinci per Rute atau Widget
Satu boundary global adalah batas minimum. Tambahkan boundary per rute agar kerusakan di satu bagian tidak mengosongkan seluruh aplikasi.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>Hal yang Tidak Ditangkap Batas Kesalahan
Batas kesalahan TIDAK menangkap: kesalahan dalam penangan event, kode asinkron (setTimeout, promise), kesalahan yang dilempar selama SSR, dan kesalahan dalam batas itu sendiri. Gunakan try/catch di tempat-tempat tersebut.
Kesalahan Penangan Event
Bungkus penangan event dengan try/catch dan panggil fungsi reportError secara manual.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}Pustaka react-error-boundary
Paket komunitas react-error-boundary menyediakan API yang ramah untuk komponen fungsi, lengkap dengan dukungan pengaturan ulang.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Mengatur Ulang Saat Pemulihan
Sediakan cara untuk pulih, seperti tombol coba lagi atau perubahan rute. Batas tersebut harus mengatur ulang statusnya agar berhenti menampilkan tampilan cadangan.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Pengembangan vs Produksi
Dalam mode pengembangan, React tetap merender lapisan kesalahan merah meskipun ada batas kesalahan—ini memang disengaja. Dalam produksi, hanya tampilan cadangan dari batas tersebut yang ditampilkan.
Praktik Terbaik
1) Batas global di akar app. 2) Batas per rute. 3) Batas terperinci di sekitar widget yang independen. 4) Selalu catat ke layanan pelacakan. 5) Tampilkan tindakan pemulihan, seperti coba lagi atau kembali ke beranda. 6) Jangan menelan kesalahan secara diam-diam.
Pemeriksaan Singkat
Jenis kesalahan apa yang TIDAK ditangkap oleh Batas Kesalahan React?
Ringkasan: Batas Kesalahan
Komponen kelas dengan getDerivedStateFromError statis + componentDidCatch. Membungkus subtree untuk menangkap kesalahan saat rendering. Tidak menangkap penangan event, kode asinkron, atau SSR. Tempatkan batas global di akar app, ditambah batas per rute dan per widget. Catat ke Sentry. Tawarkan tindakan pemulihan. Pustaka react-error-boundary menyediakan pengalaman penggunaan yang lebih sederhana.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Batas Error” gratis?
Ya — teks lengkap “Batas Error” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Batas Error”?
Terapkan Batas Error berbasis class dengan componentDidCatch dan getDerivedStateFromError untuk mencegah error render yang tidak tertangkap merusak seluruh aplikasi. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Batas Error” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.