Error State
Menampilkan kegagalan dengan pesan yang dapat dipahami, recovery hint, dan status accessibility dasar.
Tujuan belajar
- Membedakan error state dari loading state
- Membuat ErrorMessage dengan pesan dan tindakan recovery
- Memakai role alert secara tepat untuk error penting
Isi lesson
5 blok- 1.Error yang baik tidak membuat user buntuBelum selesaiWajib
- 2.ErrorMessage dengan recovery hintBelum selesaiWajib
- 3.Jangan lempar detail teknis mentah ke userBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Error yang baik tidak membuat user buntu
WajibError state memberi tahu bahwa proses selesai tetapi tidak berhasil. UI yang baik tidak hanya menulis “Terjadi kesalahan”. Ia menjelaskan area yang gagal, menjaga pesan tetap tenang, dan memberi tindakan yang masuk akal seperti mencoba lagi atau memeriksa koneksi.
Jangan menyamakan error dengan empty state. Empty berarti proses berhasil tetapi tidak menemukan data. Error berarti aplikasi belum bisa memastikan atau menampilkan hasil yang diminta.
Bagian ini memengaruhi progres lesson.
ErrorMessage dengan recovery hint
Wajibfunction ErrorMessage({ onRetry }: { onRetry: () => void }) {
return (
<section role="alert">
<h2>Daftar lesson belum dapat dimuat</h2>
<p>Periksa koneksi kamu, lalu coba lagi.</p>
<button type="button" onClick={onRetry}>
Coba lagi
</button>
</section>
);
}`role="alert"` cocok untuk error penting yang perlu segera diketahui. Headline menjelaskan area yang gagal, sementara paragraf dan button memberi jalur recovery yang konkret.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan lempar detail teknis mentah ke user
User tidak perlu membaca stack trace, status object panjang, atau pesan internal server untuk mengambil tindakan. Simpan detail teknis untuk logging atau debugging. Di UI, jelaskan dampak, langkah yang bisa dicoba, dan kapan user perlu kembali lagi nanti.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususRender ErrorMessage dengan recovery hint
Latihan membuat error UI yang menjelaskan kegagalan dan memberi button recovery yang jelas.
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.
Ringkasan
Wajib- Error state berarti proses tidak berhasil, bukan data kosong.
- Pesan error perlu menyebut apa yang gagal dan tindakan yang bisa dilakukan.
- role alert membantu error penting disampaikan ke teknologi bantu.
- Jangan menampilkan detail debugging mentah sebagai copy user-facing.
- Berikutnya, kamu akan menangani empty state saat proses berhasil tetapi tidak ada data.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Error yang baik tidak membuat user buntu.