Wymagania: Opracowany produkt nie może zagwarantować, że nie ma błędów, nawet jeśli nie ma problemów na etapie testów, wdrożony w środowisku produkcyjnym, mogą wystąpić nieoczekiwane sytuacje dla użytkowników, podobnie jak strony front-endowe. Sentry i Bugsnag to bardzo dobre produkty do monitoringu.
recenzja
Po monitorowaniu informacji o anomaliach, jak przesłać dane do backendowego API? Navigator.sendBeacon to API służące do przesyłania niewielkich ilości danych na serwer, zwłaszcza gdy strona ma zostać załadowana, np. podczas logowania, analizy zachowań użytkowników itp.
Jeśli używasz tradycyjnego XHR do przesyłania danych, musisz wykonać specjalne przetwarzanie logiki na interfejsie śledzenia na frontendzie. metoda navigator.sendBeacon()Wrzuć wiadomość do kolejki przeglądarki, tak aby nawet jeśli wysłanie się nie powiedzie, jej komunikat o błędzie nie został wychwycony przez frontend。
Wprowadzono Navigator.sendBeacon
Metoda navigator.sendBeacon() wysyła żądanie HTTP POST z niewielką ilością danych do serwera WWW asynchronicznie. Parametry: url, dane (dane typu ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData lub URLSearchParams)
Dokumentacja:
Logowanie do linku jest widoczne.
Logowanie do linku jest widoczne.
Scenariusze użycia
Logowanie po odinstalowaniu strony: Rejestruje dane zachowań, takie jak czas zatrzymania strony, zachowanie kliknięć, PV, UV itp., gdy użytkownik opuszcza stronę.
Analityka i monitoring: Przesyłanie danych o zachowaniu użytkowników do serwerów analitycznych w celu monitorowania wydajności strony internetowej i analizy zachowań użytkowników.
Raportowanie statusu: Raportuje status aplikacji lub informacje o błędach do serwera.
Test
Kod jest następujący:
Jakie są podobieństwa i różnice między Navigator.sendBeacon a XHR i fetch?
Podobieństwa
Wysyłanie żądań sieciowych: Wszystkie trzy metody służą do przesyłania danych od klienta do serwera.
Obsługa wielu formatów danych: Mogą przesyłać dane w różnych formatach, takich jak stringi, JSON, dane binarne itp.
Różnice
Navigator.sendBeacon
Służy do przesyłania niewielkiej ilości danych po odinstalowaniu strony i nadaje się do logowania, analizy danych itp.
Wysyłanie danych jest asynchroniczne, ale nie zwraca żadnych informacji do dzwoniącego i nie może przetworzyć odpowiedzi serwera.
Zaprojektowany tak, aby gwarantować dostarczanie danych podczas odinstalowania strony, nawet gdy przeglądarka jest zamknięta lub strona przeskakuje.
Zawsze używaj żądań HTTPPOST.
Nie trzeba przetwarzać odpowiedzi, proste w użyciu.
XMLHttpRequest
Dla bardziej złożonych żądań AJAX wymagających przetwarzania odpowiedzi.
Można wykonywać żądania synchroniczne lub asynchroniczne.
Możesz przetwarzać odpowiedź serwera i przekonywać dalsze przetwarzanie (np. parsowanie JSON, obsługa kodów statusowych itp.).
Zapewnia bogate zdarzenia, takie jak onload, onerror, onprogress itp., aby monitorować różne etapy żądania.
Szeroko wspierany we wszystkich głównych przeglądarkach, w tym w niektórych starszych.
Jest bardziej skomplikowany w użyciu i wymaga obsługi różnych etapów i stanów żądania.
Przynosić
Nowoczesny interfejs żądań, który zastąpił XMLHttpRequest i zapewnił prostsze i bardziej elastyczne przetwarzanie żądań i odpowiedzi.
Zawsze wykonuj żądanie asynchroniczne, zwracając obiekt Promise.
Obsługuje odpowiedzi w łańcuchu przetwarzania, ułatwiając analizę JSON, kodów statusu procesów i innych aspektów.
Obsługuje składnię async/await, która bardziej odpowiada nowoczesnym nawykom programistycznym JavaScript.
Lepsze wsparcie dla żądań międzydomenowych oraz CORS (Cross-Domain Resource Sharing).
Pozwala dodać więcej opcji do żądania (np. niestandardowy nagłówek, metoda żądania itp.).
streszczenie
Navigator.sendBeacon to API zaprojektowane z myślą o niezawodności, zwłaszcza do przesyłania niewielkich ilości danych po odinstalowaniu strony.
Ma zalety takie jak prostota, brak blokowania i niezawodność, a szczególnie nadaje się do takich scenariuszy jak logowanie i analiza zachowań użytkowników.
Wysyłane jest żądanie asynchroniczne i jest to żądanie POST.
Może jedynie określić, czy zostało umieszczone w kolejce zadań przeglądarki, ale nie może określić, czy zostało wysłane pomyślnie.
Nie ma potrzeby zajmować się wartością zwrotu.
Należy zwrócić uwagę na problemy ze zgodnością przeglądarki. |
Opublikowano 2025-3-5 09:46:14
|
|
|
|
