Belajar Microfrontend - Troubleshooting & Common Issues

#Pendahuluan

Setelah memahami seluruh konsep, saatnya membahas hal yang pasti dialami setiap tim microfrontend: gangguan. Error di arsitektur ini sering terasa misterius karena melibatkan banyak bundle, URL, dan versi. Episode ini adalah "lembar troubleshooting" untuk masalah yang paling umum.

Mengapa penting? Karena waktu debugging yang boros adalah biaya nyata microfrontend. Tabel diagnosis cepat akan menyelamatkan kalian berjam-jam.

#Remote Error Load

Gejala: remote tidak muncul; error di console saat memuat module.

Penyebab & solusi:

• Remote belum jalan / CDN salah → pastikan URL manifest benar, remote berjalan.
• Jaringan putus → terapkan errorLoadRemote + fallback (episode 9, 13).
• Chunk tidak ditemukan (version sprawl) → pastikan manifest & chunk konsisten, cache tepat.

npx mf inspect http://localhost:5001/mf-manifest.json

#React Duplikat

Gejala: error "invalid hook call" di console; UI rusak.

Penyebab: dua React berbeda di-load (host + remote masing-masing membawa React), atau version mismatch.

Solusi: pastikan shared mengatur singleton: true (episode 5), dan periksa di DevTools Network apakah bundle remote memuat react sendiri.

#Version Mismatch

Gejala: perilaku aneh di runtime, prop tidak tersedia, event tidak dipicu.

Penyebab: host dan remote di versi kontrak yang tidak cocok.

Solusi: gunakan requiredVersion untuk memaksa kompatibilitas (episode 5, 17), cek compatibility matrix, pastikan manifest remote sesuai versi yang diharapkan.

#CSS/Layout Collision

Gejala: layout berantakan; style satu remote menimpa yang lain.

Penyebab: class collision lintas remote (episode 8).

Solusi: perketat isolasi CSS (prefix/BEM, CSS Modules), dan atur z-index & stacking context di shell dengan layering yang jelas supaya remote tidak saling menimpa overlay.

#Route 404 di Remote

Gejala: refresh atau URL langsung di dalam remote menampilkan 404.

Penyebab: server host tidak punya history fallback (semua path non-file → index.html) — episode 6.

Solusi: pastikan server hosting host me-mapping semua path ke index.html; perjelas pola routing whitespace (prefix per remote) supaya tidak bentrok.

#Performa Buruk Saat Remote Load

Gejala: halaman terasa lambat, remote baru muncul lama setelah host.

Penyebab: banyak remote di-load tanpa strategi, waterfall request, tidak ada preload (episode 12).

Solusi:

• Preload manifest & remote critical (idle/hover).
• Hash-cache chunk (immutable) agar tidak re-download.
• Split chunk per route; lazy load non-critical.

#Penutup

Pada episode 26 ini, kalian telah memahami troubleshooting & common issues.

Inti yang harus dibawa pulang:

• Remote error load → cek manifest/URL + fallback & retry.
• React duplikat → singleton: true + cek Network.
• Version mismatch → requiredVersion + compatibility matrix.
• CSS collision → isolasi CSS + kelola z-index/stacking di shell.
• Route 404 → history fallback di server + pola whitespace.
• Performa → preload, hash-cache, split chunk.

Di episode 27 terakhir, kita akan membuat studi kasus & refleksi (storefront) — recap arsitektur final, simulasi skenario (cart down, canary release, upgrade design-system), dan kesimpulan menyeluruh. Pastikan puzzle kalian sudah terpasang dengan baik!