Krav: Den utvecklade produkten kan inte garantera att det inte finns några buggar, även om det inte finns några problem i testfasen, distribueras till produktionsmiljön, kan det uppstå oväntade situationer för användare, och detsamma gäller för front-end-sidor. Sentry och Bugsnag är båda mycket bra övervakningsprodukter.
recension
Efter att ha övervakat avvikelseinformationen, hur skickar jag in datan till backend-API:et? Navigator.sendBeacon är ett API för att skicka små mängder data till servern, särskilt när en sida är på väg att lastas av, såsom loggning, användarbeteendeanalys med mera.
Om du använder traditionell XHR för att skicka data behöver du göra speciell logikbearbetning på spårningsgränssnittet i frontend. navigator.sendBeacon()-metodenLägg ett meddelande i en webbläsarkö så att även om sändningen misslyckas, kommer dess felmeddelande inte att fångas av frontend。
Navigator.sendBeacon introducerad
Metoden navigator.sendBeacon() skickar en HTTP POST-förfrågan med en liten mängd data asynkront till webbservern. Parametrar: url, data (data av typen ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData eller URLSearchParams)
Dokumentation:
Inloggningen med hyperlänken är synlig.
Inloggningen med hyperlänken är synlig.
Användningsscenarier
Loggning när sidan avinstalleras: Registrerar beteendedata såsom siduppehållstid, klickbeteende, PV, UV, etc. när användaren lämnar sidan.
Analys och övervakning: Att skicka användarbeteendedata till analysservrar för övervakning av webbplatsens prestanda och analys av användarbeteende.
Statusrapportering: Rapporterar applikationsstatus eller felinformation till servern.
Test
Koden är följande:
Vilka är likheterna och skillnaderna mellan Navigator.sendBeacon och XHR och fetch?
Likheter
Skicka nätverksförfrågningar: Alla tre metoder används för att skicka data från klienten till servern.
Stöd för flera dataformat: De kan skicka data i olika format såsom strängar, JSON, binär data, etc.
Skillnader
Navigator.sendBeacon
Den används för att skicka en liten mängd data när sidan avinstalleras och är lämplig för loggning, dataanalys med mera.
Att skicka data är asynkront, men det returnerar ingen information till anroparen och kan inte bearbeta serverns svar.
Utformad för att garantera dataleverans när sidan avinstalleras, även när webbläsaren är stängd eller sidan hoppar.
Använd alltid HTTPPOST-förfrågningar.
Ingen anledning att hantera svar, enkelt att använda.
XMLHttpRequest
För mer komplexa AJAX-förfrågningar som kräver bearbetning av svar.
Synkrona eller asynkrona förfrågningar kan göras.
Du kan bearbeta serverns svar och göra vidare bearbetning (t.ex. parsa JSON, hantera statuskoder, etc.).
Tillhandahåller rika händelser såsom onload, onerror, onprogress, etc., för att övervaka de olika stegen i förfrågan.
Brett stödd i alla större webbläsare, inklusive några äldre webbläsare.
Det är mer komplext att använda och kräver hantering av de olika stadierna och tillstånden i begäran.
Hämta
Ett modernt förfrågningsgränssnitt för att ersätta XMLHttpRequest för enklare och mer flexibel hantering av förfrågningar och svar.
Gör alltid en asynkron förfrågan och returnera ett Löfte-objekt.
Den stöder kedjebaserade bearbetningssvar, vilket gör det enkelt att tolka JSON, bearbeta statuskoder och mer.
Stöder asynkron/await-syntax, vilket ligger mer i linje med moderna JavaScript-utvecklingsvanor.
Bättre stöd för domänöverskridande förfrågningar och CORS (Cross-Domain Resource Sharing).
Tillåter att lägga till fler alternativ i förfrågan (t.ex. anpassad header, förfrågan, etc.).
sammanfattning
Navigator.sendBeacon är ett API utformat för tillförlitlighet, särskilt för att skicka små mängder data när en sida avinstalleras.
Den har fördelarna enkelhet, icke-blockering och tillförlitlighet, och är särskilt lämplig för scenarier som loggning och användarbeteendeanalys.
En asynkron förfrågan görs och är en POST-förfrågan.
Den kan bara avgöra om den placeras i webbläsarens uppgiftskö, men kan inte avgöra om den har skickats framgångsrikt.
Det finns inget behov av att hantera avkastningsvärdet.
Webbläsarkompatibla problem måste noteras. |
Publicerad den 2025-3-5 09:46:14
|
|
|
|
