Bagaimana Bundle React yang Di-cache Menghantar Data ke Pangkalan Data yang Salah
Kami mengejar tarikh akhir. Pasukan backend telah berpindah ke API dan pangkalan data baharu. Pasukan frontend telah mengemas kini pemboleh ubah persekitaran dalam AWS Amplify dan menolak (push) kod tersebut.
Deployment berjaya. Kami menutup komputer riba kami. Kami fikir kami sudah selesai.
Kami silap.
Seorang jurutera menyemak log pada pelayan API lama. Pelayan ini sepatutnya sudah tidak aktif. Namun, ia masih aktif. Ia menerima permintaan pelanggan sebenar dan menulis data ke pangkalan data lama.
Selama dua jam, data pelanggan sebenar dihantar ke tempat yang salah.
Berikut adalah sebab ia berlaku dan bagaimana kami menyelesaikannya.
Masalahnya
Aplikasi React pada CDN seperti AWS Amplify menggantikan pemboleh ubah persekitaran semasa waktu binaan (build time). Apabila anda menjalankan binaan, bundler akan mencari setiap pemboleh ubah dan menggantikannya dengan string yang telah ditetapkan secara tetap (hardcoded).
URL API tersebut tertanam secara fizikal di dalam fail JavaScript.
Apabila kami melakukan deployment, pengguna baharu mendapat bundle baharu. Tetapi pengguna sedia ada yang sedang membuka aplikasi tidak pernah melakukan refresh. Mereka terus menjalankan bundle lama dengan URL lama yang telah ditetapkan di dalamnya.
Oleh kerana pelayan lama masih berjalan, klien-klien ini menerima status 200 OK. Segalanya kelihatan baik. Kegagalan itu berlaku secara senyap. Kesenyapan adalah jenis pepijat yang paling berbahaya.
Solusi Tiga-Lapisan
Kami membina tiga lapisan untuk memastikan perkara ini tidak berulang lagi.
1. Konfigurasi Runtime
Kami berhenti memasukkan URL secara terus ke dalam bundle JavaScript. Sebaliknya, kami menggunakan fail config.json dalam folder public. Bundler tidak menyentuh fail ini. Aplikasi akan mengambil fail ini semasa runtime sebelum ia dipaparkan. Ini memastikan sesi baharu sentiasa mendapat URL yang betul.
2. Notifikasi WebSocket Konfigurasi runtime tidak membantu pengguna yang mempunyai tab yang sedang dibuka. Kami menghubungkan proses deployment kami dengan pelayan WebSocket kami. Apabila Amplify selesai melakukan binaan, ia akan memanggil webhook pada API kami. Pelayan kemudian akan menghantar mesej kepada semua klien yang bersambung. Jika pengguna menggunakan versi lama, satu banner akan muncul meminta mereka untuk melakukan refresh.
3. Pengurusan Cache
Kami telah mengemas kini tetapan CloudFront kami. Titik masuk seperti index.html dan config.json kini ditetapkan kepada no-cache. Ini memastikan pengguna sentiasa mengambil fail terkini dan bukannya versi lama daripada nod tepi (edge node) CDN.
Pengajaran
• Konfigurasi waktu binaan adalah satu perangkap bagi nilai yang berubah antara deployment. • Kesunyian lebih berbahaya daripada bunyi bising. Pastikan sistem lama gagal secara nyata dengan status 410 Gone. • Tekanan tarikh akhir merosakkan langkah-langkah manual. Automatikkan proses penamatan (decommissioning) anda. • Pantau perkara yang anda matikan, bukan sekadar perkara yang anda hidupkan.
Deployment bukan sekadar menolak kod. Ia adalah tentang memastikan setiap klien akhirnya menjalankan kod yang betul.
Sumber: https://dev.to/sugan_dev/how-a-cached-react-bundle-sent-production-data-to-the-wrong-database-55n9