Semua artikelHalaman Shield yang baru di admin Atlas berjalan normal kalau dibuka lewat menu. Lolos juga di semua tes. Lalu seseorang menekan reload, dan muncul halaman 500 kami: "Something went wrong", error id server_error. Servernya tidak bermasalah sama sekali. Penyebabnya satu string kosong di menu filter.
Menelusuri error-nya
Log API bersih: tidak ada 5xx di endpoint Shield mana pun. Admin adalah single page app, jadi halaman 500 itu layar error milik aplikasi sendiri, bukan jawaban server. Kami mereproduksinya di headless browser dengan membuka /shield langsung setelah login. Pesan aslinya ada di console, dari komponen select di library UI kami:
A <SelectItem /> must have a value prop that is not an empty string.Log akses punya tiga filter (level, aksi dan aturan), dan masing-masing diawali item "Semua" dengan value ''. Value kosong terasa wajar: tanpa filter berarti parameter query kosong. Komponennya tidak setuju, dan alasannya masuk akal. String kosong dipakai untuk arti "belum ada yang dipilih, tampilkan placeholder", jadi item dengan value itu tidak bisa dibedakan dari tidak memilih apa-apa. Komponen memilih melempar error daripada menebak.
Kenapa hanya saat reload
Error yang terjadi saat render pertama aplikasi, sebelum halaman pernah tampil, dianggap fatal dan mengganti seluruh layar dengan halaman error. Itulah yang terjadi saat reload. Kalau dibuka dari menu, aplikasinya sudah berjalan, dan error itu tetap di belakang sebagai pesan console sementara bagian halaman lain tetap jalan. Bug yang sama, dua wajah yang sangat berbeda, dan tes kami hanya pernah melihat yang diam.
Perbaikannya
Setiap item "semua" sekarang memakai value sungguhan, all, dan kode yang menyusun request mengubah all kembali menjadi tanpa filter. Menunya juga sekarang bilang apa yang disaring (Semua level, Semua aksi, Semua aturan), bukan tiga label "Semua" yang sama.
const ALL = 'all'
const pick = (value) => value === ALL ? '' : valueTipe untuk filter tetap hanya menerima level, aksi dan aturan yang nyata, jadi all tidak akan pernah sampai ke API tanpa sengaja.
Yang kami pelajari
- Buka setiap halaman baru secara langsung. Mengklik di dalam aplikasi dan membuka URL langsung menjalankan jalur kode yang berbeda. Keduanya perlu dicek sebelum rilis.
- Halaman yang terlihat bersih bukan bukti. Bug ini sudah terlihat di console sejak hari pertama. Sekarang kami membaca console setelah setiap pengecekan browser, bukan hanya saat ada yang terlihat rusak.
- Kosong bukan value. Kalau komponen minta value, beri dia kata. Ubah jadi query kosong di tepi, tempat Anda menyusun request.
