Advanced · Level 9: React AdvancedAdvanced55 menitBahasa Indonesia

Error Boundaries

Memahami batas area UI yang dapat menangkap render error lalu menggantinya dengan fallback yang aman.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan tujuan Error Boundary
Membedakan render error dari event handler error
Menentukan area feature yang layak dibungkus boundary

ReactError BoundaryResilienceDebugging

Isi lesson

5 blok

1.
Satu feature gagal tidak harus menjatuhkan seluruh halamanBelum selesaiWajib
2.
Boundary kecil untuk feature previewBelum selesaiWajib
3.
Tangkap error sesuai sumbernyaBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Satu feature gagal tidak harus menjatuhkan seluruh halaman

Wajib

Render error pada satu bagian React UI dapat membuat area di sekitarnya tidak lagi dapat dipakai. Error Boundary adalah component khusus yang menangkap render error dari child tree-nya lalu menampilkan fallback UI. Boundary membantu menjaga halaman tetap punya jalur yang jelas saat satu feature bermasalah.

Boundary bukan alat untuk menyembunyikan semua error. Ia tidak menangkap error di event handler, callback async, server rendering, atau error yang terjadi di dalam boundary itu sendiri. Error tersebut tetap perlu ditangani di tempat asalnya, misalnya di event handler atau flow request.

Bagian ini memengaruhi progres lesson.

Boundary kecil untuk feature preview

Wajib

tsx

import { Component, type ErrorInfo, type ReactNode } from "react";

type FeatureErrorBoundaryProps = {
  children: ReactNode;
  fallback: ReactNode;
};

type FeatureErrorBoundaryState = {
  hasError: boolean;
};

class FeatureErrorBoundary extends Component<
  FeatureErrorBoundaryProps,
  FeatureErrorBoundaryState
> {
  state: FeatureErrorBoundaryState = { hasError: false };

  static getDerivedStateFromError(): FeatureErrorBoundaryState {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error("Preview feature gagal dirender", error, info);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

Boundary menyimpan `hasError` untuk memilih fallback atau children. `getDerivedStateFromError` mengganti UI, sedangkan `componentDidCatch` adalah tempat yang wajar untuk logging. Di aplikasi production, logging dapat dikirim ke monitoring tool yang dipilih tim.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Tangkap error sesuai sumbernya

Jika `ProfilePreview` melempar error saat render, boundary di sekitar feature itu dapat menampilkan fallback. Jika user menekan button lalu request gagal, tangani error di event handler dan tampilkan error state biasa. Memasang Error Boundary di setiap component kecil tidak selalu membantu; pilih batas feature yang memang dapat pulih secara mandiri.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Error mana yang dapat ditangkap Error Boundary?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Error Boundary menangkap render error dari child tree.
Boundary mengganti area feature yang gagal dengan fallback UI.
Event handler dan async error tidak otomatis ditangkap boundary.
Batas boundary sebaiknya mengikuti feature yang dapat pulih sendiri.
Berikutnya, kamu akan merancang fallback UI yang tetap membantu user bergerak.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Satu feature gagal tidak harus menjatuhkan seluruh halaman.

Memuat progres Review module