Krav: Det udviklede produkt kan ikke garantere, at der ikke er fejl, selv hvis der ikke er problemer i testfasen, implementeret i produktionsmiljøet, kan der opstå uventede situationer for brugerne, og det samme gælder for front-end sider. Sentry og Bugsnag er begge meget gode overvågningsprodukter.
anmeldelse
Efter at have overvåget anomaliinformationen, hvordan indsender jeg så dataene til backend-API'en? Navigator.sendBeacon er et API til at sende små mængder data til serveren, især når en side er ved at blive aflastet, såsom logning, brugeradfærdsanalyse osv.
Hvis du bruger traditionel XHR til at sende data, skal du lave speciel logikbehandling på tracking-interfacet på frontend. navigator.sendBeacon()-metodenLæg en besked i en browserkø, så selv hvis afsendelsen fejler, vil dens fejlmeddelelse ikke blive fanget af frontenden。
Navigator.sendBeacon introduceret
navigator.sendBeacon()-metoden sender en HTTP POST-forespørgsel med en lille mængde data asynkront til webserveren. Parametre: url, data (data af typen ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData eller URLSearchParams)
Dokumentation:
Hyperlink-login er synlig.
Hyperlink-login er synlig.
Brugsscenarier
Logning når siden afinstalleres: Registrerer adfærdsdata som side-opholdstid, klikadfærd, PV, UV osv., når brugeren forlader siden.
Analyse og overvågning: Afsendelse af brugeradfærdsdata til analyseservere for overvågning af hjemmesidepræstation og brugeradfærdsanalyse.
Statusrapportering: Rapporterer applikationsstatus eller fejlinformation til serveren.
Test
Koden er som følger:
Hvad er lighederne og forskellene mellem Navigator.sendBeacon og XHR og fetch?
Ligheder
Afsendelse af netværksforespørgsler: Alle tre metoder bruges til at sende data fra klienten til serveren.
Understøttelse af flere dataformater: De kan sende data i forskellige formater såsom strenge, JSON, binære data osv.
Forskelle
Navigator.sendBeacon
Den bruges til at sende en lille mængde data, når siden afinstalleres, og er egnet til logning, dataanalyse osv.
At sende data er asynkront, men det returnerer ingen information til kalderen og kan ikke behandle serverens svar.
Designet til at garantere datalevering, når siden afinstalleres, selv når browseren er lukket eller siden hopper.
Brug altid HTTPPOST-forespørgsler.
Der er ikke behov for at behandle svar, nemt at bruge.
XMLHttpRequest
For mere komplekse AJAX-forespørgsler, der kræver behandling af svar.
Synkrone eller asynkrone forespørgsler kan foretages.
Du kan behandle serverens svar og foretage yderligere behandling (f.eks. parsing af JSON, håndtering af statuskoder osv.).
Leverer rige begivenheder som onload, onerror, onprogress osv. til at overvåge de forskellige faser af anmodningen.
Bredt understøttet i alle større browsere, inklusive nogle ældre browsere.
Det er mere komplekst at bruge og kræver håndtering af de forskellige stadier og tilstande i anmodningen.
Hente
Et moderne anmodningsinterface til erstatning for XMLHttpRequest for enklere og mere fleksibel behandling af anmodninger og svar.
Lav altid en asynkron forespørgsel, der returnerer et Promise-objekt.
Den understøtter kædede behandlingssvar, hvilket gør det nemt at parse JSON, behandle statuskoder og mere.
Understøtter asynkron/await-syntaks, hvilket er mere i tråd med moderne JavaScript-udviklingsvaner.
Bedre understøttelse af tværdomæneforespørgsler og CORS (Cross-Domain Resource Sharing).
Tillader at tilføje flere muligheder til forespørgslen (f.eks. brugerdefineret header, anmodningsmetode osv.).
resumé
Navigator.sendBeacon er et API designet til pålidelighed, især til at sende små mængder data, når en side afinstalleres.
Den har fordelene ved enkelhed, ikke-blokering og pålidelighed, og er især velegnet til scenarier som logning og brugeradfærdsanalyse.
En asynkron anmodning laves og er en POST-anmodning.
Den kan kun afgøre, om den er placeret i browserens opgavekø, men kan ikke afgøre, om den er sendt korrekt.
Der er ikke behov for at håndtere returværdien.
Browserkompatibilitetsproblemer skal bemærkes. |
Opslået den 5-3-2025 09:46:14
|
|
|
|
