Gereksinimler: Geliştirilen ürün, üretim ortamına yerleştirildiğinde test aşamasında herhangi bir sorun olmasa bile hata olmadığını garanti edemez; kullanıcılar için beklenmedik durumlar olabilir ve ön sayfalar için de aynı durum geçerlidir. Sentry ve Bugsnag ikisi de çok iyi izleme ürünleri.
eleştiri
Anomali bilgisini izledikten sonra, veriyi arka uç API'sine nasıl gönderebilirim? Navigator.sendBeacon, özellikle bir sayfa yüklenmek üzereyken, örneğin loglama, kullanıcı davranışı analizi gibi küçük miktarda veri göndermek için bir API'dir.
Veri göndermek için geleneksel XHR kullanıyorsanız, ön uçtaki takip arayüzünde özel mantık işleme yapmanız gerekir. navigator.sendBeacon() yöntemiGönderme başarısız olsa bile hata mesajının ön taraf tarafından yakalanmaması için tarayıcı kuyruğuna bir mesaj bırakın。
Navigator.sendBeacon tanıtıldı
navigator.sendBeacon() yöntemi, az miktarda veriyle web sunucusuna asenkron olarak HTTP POST talebi gönderir. Parametreler: url, data (ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData veya URLSearchParams tipindeki veriler)
Belge:
Bağlantı girişi görünür.
Bağlantı girişi görünür.
Kullanım senaryoları
Sayfa kaldırıldığında kayıt yapma: Kullanıcı sayfadan ayrıldığında sayfa bakışı süresi, tıklama davranışı, PV, UV gibi davranış verilerini kaydeder.
Analitik ve İzleme: Web sitesi performans izleme ve kullanıcı davranışı analizi için kullanıcı davranışı verilerini analiz sunucularına göndermek.
Durum Raporlama: Uygulama durumu veya hata bilgisini sunucuya bildirir.
Test
Kod şöyledir:
Navigator.sendBeacon ile XHR ve fetch arasındaki benzerlikler ve farklar nelerdir?
Benzerlik
Ağ isteklerinin gönderilmesi: İstemciden sunucuya veri göndermek için üç yöntemin tamamı kullanılır.
Birden fazla veri formatı desteği: Dizi dizeleri, JSON, ikili veri gibi çeşitli formatlarda veri gönderebilirler.
Farklılık -lar
Navigator.sendBeacon
Sayfa kaldırıldığında az miktarda veri göndermek için kullanılır ve kayıtlama, veri analizi vb. için uygundur.
Veri göndermek asenkron olsa da, arayana herhangi bir bilgi geri dönmez ve sunucunun yanıtını işleyemez.
Sayfa kaldırıldığında, tarayıcı kapalı olsa veya sayfa zıpladığında bile veri iletimi garantisi için tasarlanmıştır.
Her zaman HTTPPOST istekleri kullanın.
Yanıtları işlemeye gerek yok, kullanımı kolay.
XMLHttpRequest
Daha karmaşık AJAX istekleri için yanıtların işlenmesini gerektirir.
Senkron veya asenkron istekler yapılabilir.
Sunucunun yanıtını işleyebilir ve daha fazla işlem yapabilir (örneğin JSON'u ayrıştırmak, durum kodlarını işlemek, vb.).
Yükleme, onerror, onprogress gibi zengin olaylar sunarak talebin çeşitli aşamalarını izler.
Tüm büyük tarayıcılarda, bazı eski tarayıcılar da dahil olmak üzere geniş çapta desteklenmektedir.
Kullanımı daha karmaşıktır ve talebin farklı aşamalarını ve durumlarını ele almayı gerektirir.
Getir
XMLHttpRequest'in yerine geçecek modern bir istek arayüzü, daha basit ve esnek bir talep ve yanıt işleme için.
Her zaman asenkron bir istek yapın, bir Söz nesnesi döndürün.
Zincirli işlem yanıtlarını destekler, böylece JSON, işlem durum kodları ve daha fazlasını kolayca ayrıştırabilir.
Modern JavaScript geliştirme alışkanlıklarına daha uygun olan asenkron/await sözdizimi desteği.
Alanlar arası talepler ve CORS (Alanlar arası Kaynak Paylaşımı) için daha iyi destek.
İsteğe daha fazla seçenek eklemeye olanak tanır (örneğin, özel başlık, istek yöntemi vb.).
özet
Navigator.sendBeacon, özellikle bir sayfa kaldırıldığında küçük miktarda veri göndermek için güvenilirlik için tasarlanmış bir API'dir.
Basitlik, engelleme ve güvenilirlik avantajlarına sahiptir ve özellikle loglama ve kullanıcı davranışı analizi gibi senaryolar için uygundur.
Asenkron bir talep yapılır ve bu bir POST talebidir.
Yalnızca tarayıcı görev kuyruğuna alınıp alınmadığını belirleyebilir, ancak başarılı bir şekilde gönderilip gönderilmediğini belirleyemez.
Geri dönüş değeriyle uğraşmanıza gerek yok.
Tarayıcı uyumluluk sorunları dikkat edilmeli. |
2025-3-5 09:46:14 tarihinde yayınlandı
|
|
|
|
