Mengapa satu donasi memicu dua alert setelah memperbarui sumber browser

Mengapa satu donasi memicu dua alert

Setelah memperbarui sumber browser, halaman dimulai ulang. Skrip kembali terhubung ke server, berlangganan event, dan membuat handler untuk menampilkan notifikasi. Jika handler lama tidak dihapus atau dua koneksi berjalan bersamaan, satu event donasi diproses beberapa kali.

Pembaruan itu sendiri belum tentu menjadi penyebab kegagalan. Sering kali pembaruan hanya memunculkan kesalahan dalam logika koneksi. Misalnya, fungsi inisialisasi dapat dijalankan saat halaman dimuat, lalu saat koneksi dipulihkan, dan sekali lagi setelah menerima pesan layanan. Setiap eksekusi menambahkan langganan baru pada event donation.

Akibatnya, server mengirim satu objek donasi, tetapi browser memanggil fungsi yang sama dua kali. Terkadang duplikasi terjadi di sisi server: aplikasi menganggap koneksi baru sebagai penerima terpisah dan mengirim event ke sesi lama maupun sesi baru. Karena itu, pertama-tama tentukan di mana pengulangan muncul: di sumber, di handler, atau pada tahap penampilan.

Cara menemukan tempat munculnya duplikat

Mulailah dengan tes sederhana. Buka tautan sumber browser di jendela atau tab terpisah, sisakan hanya satu instans halaman, lalu kirim event uji. Jika alert muncul satu kali, penyebabnya kemungkinan besar terkait dengan pengaturan scene atau dengan beberapa instans sumber. Jika alert sudah terduplikasi di tab terpisah, periksa kode halaman dan mekanisme langganan.

Ada baiknya memisahkan pemrosesan donasi menjadi beberapa tahap: penerimaan event, pemeriksaan event, penempatan alert dalam antrean, dan penampilan. Sementara waktu, tampilkan penanda pada setiap tahap di log atau konsol. Jika catatan penerimaan muncul dua kali, masalahnya berada sebelum lapisan visual. Jika event diterima satu kali tetapi ada dua elemen dalam antrean, kesalahannya ada di handler. Jika antrean berisi satu elemen tetapi ada dua alert di layar, periksa fungsi penampilan dan kontainer HTML.

Untuk diagnosis, tambahkan ID setiap event jika ID tersebut dikirim dalam data donasi. Catat ID ini saat diterima dan sebelum ditampilkan. ID yang sama pada dua pemanggilan menunjukkan bahwa satu event diproses ulang. Dua ID berbeda menunjukkan dua pengiriman yang harus ditelusuri secara terpisah.

Jangan hanya memeriksa jumlah tab. Di OBS, dua instans dapat muncul setelah menyalin scene, menambahkan scene bersarang, atau menambahkan sumber browser lagi dengan alamat yang sama. Terkadang satu sumber tetap berada di lapisan terpisah, sementara sumber kedua ditambahkan di atasnya. Secara visual ini terlihat seperti alert ganda, meskipun event hanya datang satu kali.

Langganan ulang setelah koneksi kembali

Penyebab paling umum adalah handler ditambahkan pada setiap koneksi tetapi tidak dilepas saat terputus. Secara sederhana, masalahnya terlihat seperti ini: fungsi menjalankan socket.on dengan handler untuk menampilkan alert, lalu koneksi terputus, aplikasi terhubung kembali dan mengulangi socket.on. Setelah itu, satu donasi masuk memicu dua fungsi. Pada koneksi ulang berikutnya, jumlahnya bisa menjadi lebih banyak lagi.

Kesalahan yang sama terjadi dengan addEventListener biasa. Jika fungsi inisialisasi dipanggil beberapa kali, browser menambahkan beberapa listener untuk event yang sama. Pemeriksaan flag "inisialisasi sudah dijalankan" tidak selalu membantu: saat halaman dimuat ulang sepenuhnya, variabel direset, sedangkan saat koneksi ulang di dalam halaman yang sama, masalahnya tetap ada.

Langganan harus dibuat satu kali per siklus hidup koneksi, dan langganan lama harus dihapus secara eksplisit sebelum yang baru. Untuk handler event, gunakan removeEventListener dan referensi fungsi yang sama dengan yang diberikan saat pemasangan. Untuk library dengan soket, biasanya diperlukan metode off, unsubscribe, atau cara serupa untuk melepasnya.

Skema minimal untuk soket dapat terlihat seperti ini: const onDonation = data => showAlert(data); socket.off('donation', onDonation); socket.on('donation', onDonation); function cleanup() { socket.off('donation', onDonation); window.removeEventListener('beforeunload', cleanup); socket.close(); } window.addEventListener('beforeunload', cleanup);

Yang penting di sini bukan library tertentu, melainkan urutan tindakannya. Handler disimpan dalam variabel, sehingga dapat dilepas dengan referensi yang sama. Sebelum langganan baru, langganan lama dihapus, dan saat halaman ditutup atau sumber dihentikan, cleanup dijalankan. Jika setiap eksekusi membuat soket baru, tutup dulu soket lama dan baru kemudian buat yang baru. Jika tidak, kedua koneksi dapat terus menerima data yang sama.

Saat koneksi ulang, tutup juga koneksi lama dan bersihkan timer terkait. Jika tidak, soket lama dapat terus menerima data sementara soket baru sudah berjalan. Hal ini terutama sering terjadi jika kode memulai timer koneksi ulang baru tanpa membatalkan timer sebelumnya.

Apa yang perlu diperiksa di OBS dan sumber browser

Jika jendela terpisah menampilkan alert satu kali, lanjutkan ke scene. Hentikan pratinjau, hapus sementara lapisan yang tidak perlu, dan sisakan satu sumber browser. Kemudian periksa perilakunya pada scene yang dimaksud. Tes ini lebih cepat daripada memeriksa semua scene dan filter sekaligus.

• Cari dua sumber dengan alamat halaman yang sama.
• Periksa salinan scene dan scene bersarang yang mungkin berisi overlay yang sama.
• Pastikan alert tidak ditampilkan secara bersamaan oleh sumber browser dan lapisan lain dengan halaman yang sama.
• Setelah mengubah pengaturan, mulai ulang sumber sepenuhnya, bukan hanya mengganti scene.

Terkadang di OBS masih tersisa tab lama sumber browser setelah URL atau parameter diperbarui. Menutup dan menambahkan ulang sumber membantu menguji hipotesis, tetapi ini tidak menggantikan perbaikan kode. Jika masalah kembali setelah setiap pembaruan, cari pendaftaran handler berulang atau koneksi ganda.

Perhatikan juga jeda pemutusan. Saat memperbarui, sesi lama mungkin tidak langsung tertutup. Jika server menganggapnya aktif selama beberapa detik, event yang datang dalam selang waktu itu dapat masuk ke dua sesi. Logika server yang normal harus menghapus koneksi yang tidak aktif dan tidak meninggalkan langganan setelah halaman ditutup.

Perlindungan terhadap pengiriman ulang satu event

Bahkan dengan sumber browser yang bekerja dengan benar, satu event terkadang dapat dikirim ulang. Hal ini mungkin terjadi saat koneksi dipulihkan, pesan dikirim ulang, atau terjadi kegagalan antara penerimaan event dan konfirmasi pemrosesannya. Karena itu, handler alert harus tahan terhadap pengulangan.

Cara terbaik adalah memeriksa ID unik donasi. Sebelum menempatkan event dalam antrean, simpan ID-nya dalam kumpulan event yang sudah diproses. Jika ID tersebut sudah pernah muncul, pengulangan harus dilewati. Daftar tersebut sebaiknya disimpan dalam waktu terbatas agar tidak tumbuh tanpa batas.

Jangan hanya menggunakan jumlah, nama pengirim, atau teks pesan untuk ini. Dua donasi berbeda dapat memiliki data yang sama. Pemeriksaan berdasarkan waktu juga tidak andal: beberapa donasi berbeda dapat datang hampir bersamaan. Jika tidak ada ID, untuk sementara Anda dapat membandingkan kombinasi field dan waktu, tetapi ini adalah opsi cadangan dengan risiko menggabungkan dua event secara keliru.

Perlindungan terhadap duplikat harus berada sebelum alert ditampilkan, bukan di dalam animasi. Jika tidak, pemanggilan kedua tetap akan menambahkan elemen ke halaman, memutar suara, atau menambahkan satu catatan lagi ke antrean. Kendalikan antrean secara terpisah: satu event harus ditambahkan ke dalamnya satu kali, dan pemanggilan ulang tidak boleh memulai antrean independen kedua.

Jika event diteruskan antara beberapa tab atau komponen, periksa apakah event tersebut diproses oleh beberapa penerima sekaligus. Satu kanal pesan bersama dapat terhubung ke beberapa handler. Dalam hal ini, Anda perlu menyisakan satu konsumen saja, atau secara eksplisit menentukan komponen mana yang bertanggung jawab menampilkan alert.

Mengapa membersihkan cache tidak selalu membantu

Setelah memperbarui sumber browser, sering disarankan untuk membersihkan cache. Ini dapat memperbaiki situasi jika versi skrip lama yang dimuat, tetapi cache tidak menghapus handler berlebih di halaman yang sudah berjalan dan tidak menutup salinan kedua sumber. Jika duplikat terus berulang setelah setiap koneksi ulang, penyebabnya hampir pasti ada pada logika koneksi atau struktur scene.

Periksa apakah versi file baru benar-benar dimuat. Sementara waktu, ubah alamat resource atau gunakan mekanisme pembaruan yang tersedia, lalu mulai ulang sumber browser. Setelah itu, jalankan lagi tes dengan satu jendela dan satu instans sumber. Jangan menambahkan parameter acak ke tautan secara terus-menerus: ini dapat membuat banyak varian cache dan mempersulit diagnosis.

Jika menggunakan cache perantara atau service worker, keduanya juga dapat menyajikan skrip yang sudah usang. Dalam hal ini, bandingkan versi file yang dimuat dengan versi yang Anda harapkan muncul. Namun bahkan dengan file lama, penyebab langganan berulang harus diatasi, jika tidak masalah akan muncul lagi setelah pembaruan berikutnya.

Apa yang perlu diperiksa dalam kode alert

Pertama, temukan semua tempat di mana socket.on, addEventListener, fungsi koneksi, dan eksekusi antrean dipanggil. Terkadang masalahnya bukan pada satu handler, tetapi pada dua modul berbeda yang secara independen mendengarkan event donation dan masing-masing menjalankan penampilannya sendiri.

Kemudian periksa siklus hidup komponen jika alert ditampilkan melalui framework. Langganan ditempatkan dalam efek atau blok serupa dan mengembalikan fungsi pembersihan. Anda tidak boleh membuat handler baru pada setiap pembaruan state tanpa menghapus handler sebelumnya. Dalam JavaScript biasa, penting untuk menyimpan referensi ke soket aktif dan handler saat ini agar keduanya dapat ditutup dengan benar saat halaman dihentikan.

Periksa timer koneksi ulang. Timer baru tidak boleh dijalankan di atas timer lama. Jika tidak, setelah beberapa kali terputus, akan terbentuk upaya koneksi paralel, dan bersamanya langganan tambahan. Setiap timer perlu dibersihkan melalui clearTimeout atau clearInterval jika tidak lagi diperlukan.

Secara terpisah, periksa kode yang menampilkan alert. Kode tersebut tidak boleh sekaligus menambahkan elemen ke antrean dan langsung memanggil fungsi penampilan untuk objek yang sama. Periksa juga apakah animasi dijalankan ulang saat state elemen berubah. Jika di log ada satu penerimaan dan satu catatan dalam antrean, tetapi di layar ada dua notifikasi, di sinilah tempat mencarinya.

Checklist diagnosis: apa yang harus dilakukan secara berurutan

1. Buka URL sumber browser di tab terpisah dan kirim satu donasi uji. Catat apakah duplikat muncul di luar OBS.
2. Sisakan hanya satu instans sumber di scene. Periksa salinan scene, scene bersarang, dan lapisan yang mungkin berisi alamat yang sama.
3. Tambahkan log dengan ID event pada tahap penerimaan, penempatan dalam antrean, dan penampilan. Dengan begitu akan terlihat di mana jumlah objek bertambah.
4. Temukan semua pemanggilan socket.on dan addEventListener. Periksa apakah handler lama dilepas melalui socket.off dan removeEventListener dengan referensi fungsi yang sama.
5. Periksa koneksi ulang: apakah soket lama ditutup, apakah timer lama dibatalkan, dan apakah langganan baru dibuat di atas langganan sebelumnya.
6. Tambahkan pemeriksaan ID unik donasi sebelum antrean, lalu mulai ulang sumber sepenuhnya dan ulangi tes dengan satu event.

Jika tab terpisah menerima event satu kali tetapi OBS menampilkan dua alert, cari instans sumber kedua atau duplikasi dalam scene. Jika event datang dua kali sudah di tab terpisah, periksa langganan, koneksi, dan pengiriman dari server. Jika penerimaan dan antrean tercatat satu kali tetapi di layar ada dua notifikasi, masalahnya berada di lapisan visual.