Krav: Det utviklede produktet kan ikke garantere at det ikke finnes feil, selv om det ikke oppstår problemer i testfasen, distribuert til produksjonsmiljøet, kan det oppstå uventede situasjoner for brukerne, og det samme gjelder for front-end-sider. Sentry og Bugsnag er begge veldig gode overvåkingsprodukter.
anmeldelse
Etter å ha overvåket avviksinformasjonen, hvordan sender jeg dataene til backend-API-et? Navigator.sendBeacon er et API for å sende små mengder data til serveren, spesielt når en side skal tømmes, som for eksempel logging, brukeratferdsanalyse osv.
Hvis du bruker tradisjonell XHR for å sende data, må du gjøre spesiell logikkbehandling på sporingsgrensesnittet på frontend. navigator.sendBeacon()-metodenLegg en melding i en nettleserkø slik at selv om sendingen feiler, vil ikke feilmeldingen bli oppdaget av frontend。
Navigator.sendBeacon introdusert
navigator.sendBeacon()-metoden sender en HTTP POST-forespørsel med en liten mengde data asynkront til webserveren. Parametere: url, data (data av typen ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData eller URLSearchParams)
Dokumentasjon:
Innloggingen med hyperkoblingen er synlig.
Innloggingen med hyperkoblingen er synlig.
Bruksscenarier
Logging når siden avinstalleres: Registrerer atferdsdata som sidens oppholdstid, klikkadferd, PV, UV osv. når brukeren forlater siden.
Analyse og overvåking: Sending av brukeratferdsdata til analyseservere for overvåking av nettstedets ytelse og brukeradferdsanalyse.
Statusrapportering: Rapporterer applikasjonsstatus eller feilinformasjon til serveren.
Prøve
Koden er som følger:
Hva er likhetene og forskjellene mellom Navigator.sendBeacon og XHR og fetch?
Likheter
Sende nettverksforespørsler: Alle tre metodene brukes til å sende data fra klienten til serveren.
Støtte for flere dataformater: De kan sende data i ulike formater som strenger, JSON, binærdata osv.
Forskjeller
Navigator.sendBeacon
Den brukes til å sende en liten mengde data når siden avinstalleres, og egner seg for logging, dataanalyse osv.
Å sende data er asynkront, men det returnerer ingen informasjon til kalleren og kan ikke behandle serverens svar.
Designet for å garantere datalevering når siden avinstalleres, selv når nettleseren er lukket eller siden hopper.
Bruk alltid HTTPPOST-forespørsler.
Ingen behov for å behandle svar, enkelt å bruke.
XMLHttpRequest
For mer komplekse AJAX-forespørsler som krever behandling av svar.
Synkrone eller asynkrone forespørsler kan gjøres.
Du kan behandle serverens svar og gjøre videre behandling (f.eks. parsing av JSON, håndtering av statuskoder osv.).
Gir rike hendelser som onload, onerror, onprogress osv. for å overvåke de ulike stadiene i forespørselen.
Bredt støttet i alle større nettlesere, inkludert noen eldre nettlesere.
Den er mer kompleks å bruke og krever håndtering av de ulike stadiene og tilstandene i forespørselen.
Hente
Et moderne forespørselsgrensesnitt for å erstatte XMLHttpRequest for enklere og mer fleksibel behandling av forespørsler og svar.
Gjør alltid en asynkron forespørsel som returnerer et Promise-objekt.
Den støtter kjedede prosesseringssvar, noe som gjør det enkelt å analysere JSON, behandle statuskoder og mer.
Støtter asynkron/await-syntaks, som er mer i tråd med moderne JavaScript-utviklingsvaner.
Bedre støtte for tverrdomeneforespørsler og CORS (Cross-Domain Resource Sharing).
Gjør det mulig å legge til flere alternativer i forespørselen (f.eks. egendefinert header, forespørselsmetode osv.).
sammendrag
Navigator.sendBeacon er et API designet for pålitelighet, spesielt for å sende små mengder data når en side avinstalleres.
Den har fordelene enkelhet, ikke-blokkering og pålitelighet, og er spesielt egnet for scenarier som logging og brukeratferdsanalyse.
En asynkron forespørsel gjøres og er en POST-forespørsel.
Den kan bare avgjøre om den er plassert i nettleserens oppgavekø, men kan ikke avgjøre om den er vellykket sendt.
Det er ikke nødvendig å forholde seg til avkastningsverdien.
Nettleserkompatibilitetsproblemer må nevnes. |
Publisert 2025-3-5 09:46:14
|
|
|
|
