Advanced · Level 9: React AdvancedAdvanced55 menitBahasa Indonesia

Fallback UI

Membuat layar fallback yang menjelaskan feature mana yang bermasalah dan memberi user pilihan untuk pulih.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan fallback UI dari pesan error generik
Menulis copy fallback yang tenang dan spesifik
Menambahkan reset action yang dapat dicoba user

ReactFallback UIError RecoveryUX

Isi lesson

5 blok

1.
Fallback adalah UI pengganti, bukan pesan panikBelum selesaiWajib
2.
Fallback feature dengan reset actionBelum selesaiWajib
3.
Checklist fallback yang sehatBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Fallback adalah UI pengganti, bukan pesan panik

Wajib

Saat boundary menangkap render error, fallback UI mengambil tempat feature yang gagal. Fallback yang baik menjelaskan bagian mana yang belum dapat ditampilkan, menjaga sisa halaman tetap berguna, dan memberi action recovery bila recovery memang tersedia.

Hindari fallback yang menakutkan atau terlalu samar. “Ada masalah” tidak memberi cukup konteks. Sebaliknya, “Preview profil belum dapat ditampilkan. Coba muat ulang preview.” membantu user memahami dampak dan langkah berikutnya.

Bagian ini memengaruhi progres lesson.

Fallback feature dengan reset action

Wajib

tsx

function FeatureFallback({ onReset }: { onReset: () => void }) {
  return (
    <section role="alert">
      <h2>Preview profil belum dapat ditampilkan</h2>
      <p>Perubahan lain di halaman tetap aman. Coba muat ulang preview ini.</p>
      <button type="button" onClick={onReset}>
        Muat ulang preview
      </button>
    </section>
  );
}

Heading menyebut feature yang gagal. Paragraf memberi batas dampak supaya user tidak mengira seluruh halaman hilang. Button memanggil action reset yang dimiliki parent atau boundary wrapper.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Checklist fallback yang sehat

Sebutkan feature yang bermasalah. Jangan menyalahkan user. Jelaskan apakah bagian lain masih aman. Beri satu action yang sesuai, misalnya muat ulang feature atau kembali ke daftar. Jangan janji bahwa retry akan selalu berhasil bila penyebab error belum diketahui.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Buat fallback UI yang membantu

Latihan membuat fallback untuk preview profil dengan pesan spesifik dan action reset yang dapat dicoba user.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis4 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Fallback UI menggantikan feature yang gagal tanpa harus menghapus seluruh halaman.
Copy fallback perlu menyebut feature, dampak, dan action recovery.
Reset action dimiliki parent atau boundary wrapper yang tahu cara memulai ulang feature.
Fallback yang baik tenang, spesifik, dan tidak menampilkan detail debugging mentah.
Berikutnya, kamu akan melihat Suspense saat component belum siap dimuat.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Fallback adalah UI pengganti, bukan pesan panik.

Memuat progres Review module