Kegagalan

Tiga skala, tiga penanganan

Yang menentukan bentuk pesannya bukan jenis errornya, tetapi seberapa banyak yang masih berguna di layar. Salah menilai itu menghasilkan dua kesalahan yang sama-sama sering: seluruh halaman diganti pesan padahal hanya satu grafik yang gagal, atau kegagalan simpan cuma muncul sebagai toast yang lewat sebelum dibaca.

• Seluruh halaman tidak ada isinya — 404, 500, atau akses ditolak. Ganti isi halamannya, tapi pertahankan header dan footernya: pembaca butuh navigasi dan pencarian justru saat tersesat.
• Satu bagian gagal sementara sisanya baik-baik saja. Kegagalannya tinggal di dalam kartunya sendiri, dengan tombol coba ulang di situ juga — jangan menghukum seluruh halaman karena satu permintaan.
• Satu aksi gagal. Yang gagal bukan halamannya, melainkan apa yang baru saja orang lakukan. Pesannya di dekat form yang bersangkutan dan tidak menggantikannya, supaya apa yang sudah diisi tidak hilang.

Aturannya

• Kosong bukan gagal. "Belum ada pickup bulan ini" adalah keadaan normal dan jawabannya sebuah ajakan bertindak; "Data gagal dimuat" adalah kerusakan dan jawabannya sebuah percobaan ulang. Keduanya memakai EmptyState, tetapi tidak boleh berbunyi sama. Warna merah hanya untuk yang benar-benar rusak.
• Sebutkan langkah berikutnya, bukan kode. "Armada untuk tanggal itu sudah penuh" bisa ditindaklanjuti; "Error 422" tidak. Kode teknis boleh ada untuk dikutip ke tim, tetapi bukan sebagai judulnya.
• Jangan menyalahkan pembacanya untuk kesalahan kita. Kalau permintaannya gagal di server, katakan itu — bukan "coba periksa kembali tautanmu".
• Satu jalan keluar yang jelas. Tombol utamanya memulihkan keadaan (coba lagi, muat ulang bagian ini); tombol keduanya membawa keluar (ke beranda). Lebih dari dua pilihan pada halaman yang sedang rusak justru menambah beban.
• Kegagalan aksi memakai Alert, bukan Toast. Toast menghilang sendiri, dan pesan yang harus ditindaklanjuti tidak boleh menghilang sendiri. Toast untuk kabar yang selesai begitu dibaca.
• Kegagalan dibacakan. Alert dengan color="danger" sudah membawa role="alert", jadi pembaca layar mendengarnya tanpa harus memindai ulang halamannya.

Halaman error situs ini

Situs dokumentasi ini memakai polanya sendiri di app/error.vue. Nuxt merender file itu sebagai pengganti seluruh aplikasi, di luar sistem layout — jadi ia memasang header dan footernya sendiri. Tanpa itu, satu alamat yang salah ketik akan menjatuhkan pembaca keluar dari situs: tanpa menu, tanpa pencarian, tanpa jalan kembali selain tombol browser.

Isinya berbeda menurut kodenya. Untuk 404 ia menyebut kemungkinan alamatnya usang lalu menawarkan keempat area dokumentasi, karena 404 di situs dokumentasi hampir selalu tautan yang sudah dipindahkan. Untuk kode lain ia mengaku kesalahan ada di sisi kami dan menawarkan muat ulang — dan tidak menampilkan daftar tautan itu, karena pada kegagalan server tautan-tautan itu sama mungkinnya untuk gagal. Halamannya juga noindex: halaman rusak tidak punya isi yang layak diindeks.

Coba sendiri lewat alamat yang tidak ada, misalnya /halaman-yang-tidak-pernah-ada .