react
Catatan teknis seputar web development, DevOps, dan integrasi AI.
58 artikel
- 19.54testing
Test yang Membaca Source Code-nya Sendiri
Vitest nggak bisa merender komponen di Vite 8? Jadikan file source sebagai data test: kunci invarian flag rating dengan toContain.
TL;DR: Test kartu di KotaPortal error karena Vite 8 udah pake rolldown jadi komponen React nggak bisa dirender di vitest. Akhirnya bikin tripwire yang baca file source sebagai teks buat mastiin rating_enabled !== false tetap ada di enam permukaan kartu. Cara ini jaga badge rating nggak bocor, sambil nunggu plugin React beneran kepasang buat test render.
#vitest#testing#react - 17.58frontend
Ketika Rating Dimatikan, Menyembunyikan Badge Saja Tidak Cukup
Mematikan fitur rating lewat flag ternyata tidak cukup kalau badge kartu dan markup aggregateRating masih tayang. Catatan saya merapikan semua permukaannya.
TL;DR: Gue matiin fitur rating di detail tempat wisata tapi kaget kartu di beranda masih nongolin bintang bahkan JSON-LD-nya masih kebawa. Ternyata fetch detail udah dimatiin tapi kartu sama generator schema masih baca data rating lama. Akhirnya semua dibikin ngecek flag isRatingEnabled dulu biar visual sama markup mati bareng.
#react#seo#feature-flags - 17.09frontend
Matikan Fetch, Bukan Sekadar Sembunyikan UI
Section review disembunyikan tapi fetch-nya tetap jalan dan menabrak 404 di tiap page view. Flag yang benar mematikan jaringan dulu, baru piksel.
TL;DR: Gue kira cukup sembunyiin UI rating pas dimatiin eh ternyata server tetep nge-fetch dan hasilnya 404 terus jadi ngebombardir log. Ternyata rating_enabled itu soal kesepakatan data bukan cuma saklar tampilan jadi kalau false ya nggak usah fetch sama sekali. Akhirnya gue benerin pake cek rating_enabled !== false sebelum fetch dan unmount komponennya biar bersih total.
#react#nextjs#feature-flag - 17.02backend
Checkbox yang Diam-diam Mematikan Fitur di Backend Go
Checkbox yang nggak dicentang nggak ngirim apa-apa, dan backend Go membaca keheningan itu sebagai false. Pelajaran dari bug form admin CMS.
TL;DR: Gue kira checkbox yang nggak dicentang bakal dibiarin aja sama backend, eh ternyata Go nganggap field bool yang absen itu false. Alhasil fitur rating sama rental langsung mati pas di-save padahal nggak diapa-apain. Akhirnya gue ubah frontend biar selalu kirim true/false eksplisit dan pakai aturan null buat hapus, absen buat biarin aja.
#go#json#react - 12.20frontend
Label yang Bisa Bohong: Saat Vocab Status Hidup di Dua Tempat
Satu lib jadi rumah label enam status; nilai tak dikenal tampil jujur sebagai teks mentah dengan gaya netral, bukan label salah.
TL;DR: Gue liat status di halaman publik cuma jadi teks polos gara-gara kamusnya masih versi lama 4 status padahal backend udah 6. Akhirnya kamus dipusatin di lib layanan-flow biar jadi satu sumber kebenaran dan dijaga TypeScript biar nggak ketinggalan. Kalau ada status asing tinggal fallback netral jadi tetap jujur nggak ngarang label.
#react#typescript#ui - 12.20frontend
Counter Per-Status di Stats Admin: Angka dari Kontrak
Kartu dan tab dashboard admin KotaPortal akhirnya punya angka dari counter per-status stats admin, aditif dan bebas trik UI.
TL;DR: Dashboard KotaPortal ngaco karena API cuma ngirim dua counter jadi banyak kartu kosong melompong. Akhirnya ditambahin enam counter snapshot baru tanpa ngerusak kontrak lama terus frontend dirapiin lewat codegen biar angka konsisten. Counter-nya juga nurut scope bidang dan badge antrean direfresh tiap menit pake polling aja.
#go#api#openapi - 11.19frontend
Stepper Status Tiket yang Jujur: Belajar dari Array History
Stepper tiket nggak nebak lagi dari satu string status: waktunya diambil dari riwayat transisi, satu baris pertama per status.
TL;DR: Awalnya stepper tiket cuma nebak progres dari satu string status jadi sering ngaco. Sekarang progress diambil dari array history pakai Map buat nyimpen timestamp pertama tiap status, dengan empat tahap aja dan fallback kalau data kosong. Form pilar juga dibenerin pakai as const biar TypeScript ngejaga inputnya tetep valid.
#react#typescript#ux - 08.59frontend
Category Picker Salah Modul Saat Edit: Tri-State yang Benar
Dropdown kategori yang benar untuk create ternyata salah untuk edit. Tri-state moduleScope dan effect yang menunggu scope resolve.
TL;DR: Gue kira dropdown ngaco karena loading lemot, ternyata fetch-nya kecepetan sebelum tau modulnya apa. Solusinya pake tri-state buat moduleScope, jadi kalo masih undefined ditahan dulu jangan fetch. Begitu modul udah jelas baru fetch kategori, hasilnya jadi akurat nggak ketuker lagi.
#react#typescript#openapi - 08.57frontend
Sidebar Admin Per-Modul: Ilusi Aman di UI, Sejati di API
Menyembunyikan menu di sidebar admin bukan otorisasi. Pengalaman membangun halaman konten per-modul dengan sidebar ter-scope bidang.
TL;DR: Awalnya ngira cukup sembunyiin menu sidebar biar aman, ternyata itu cuma kosmetik doang. Soalnya cek di layout Nextjs bisa basi dan gampang dibobol lewat manipulasi URL manual. Akhirnya solusinya dobel lapis, frontend cuma buat UX, backend pakai NarrowModules yang balikin list kosong biar nggak bocorin info.
#nextjs#react#go