Cerințe: Produsul dezvoltat nu poate garanta că nu există erori, chiar dacă nu există probleme în etapa de testare, implementat în mediul de producție, pot apărea situații neașteptate pentru utilizatori, iar același lucru este valabil și pentru paginile front-end. Sentry și Bugsnag sunt ambele produse foarte bune de monitorizare.
recenzie
După ce am monitorizat informațiile despre anomalii, cum pot trimite datele către API-ul backend? Navigator.sendBeacon este o API pentru trimiterea unor cantități mici de date către server, mai ales atunci când o pagină este pe cale să fie descărcată, cum ar fi logarea, analiza comportamentului utilizatorului etc.
Dacă folosești XHR tradițional pentru a trimite date, trebuie să faci o procesare logică specială pe interfața de urmărire din frontend. Metoda navigator.sendBeacon()Plasează un mesaj într-o coadă de browser astfel încât, chiar dacă trimiterea eșuează, mesajul de eroare să nu fie prins de frontend。
Navigator.sendBeacon introdus
Metoda navigator.sendBeacon() trimite o cerere HTTP POST cu o cantitate mică de date către serverul web, asincron. Parametri: url, date (date de tip ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData sau URLSearchParams)
Documentație:
Autentificarea cu hyperlink este vizibilă.
Autentificarea cu hyperlink este vizibilă.
Scenarii de utilizare
Înregistrarea când pagina este dezinstalată: Înregistrează date comportamentale precum timpul de permutare al paginii, comportamentul de click, PV, UV etc. atunci când utilizatorul părăsește pagina.
Analiză și monitorizare: Trimiterea datelor despre comportamentul utilizatorilor către servere de analiză pentru monitorizarea performanței site-ului și analiza comportamentului utilizatorilor.
Raportarea statusului: Raportează statusul aplicației sau informațiile despre eroare către server.
Testa
Codul este următorul:
Care sunt asemănările și diferențele dintre Navigator.sendBeacon și XHR și fetch?
Asemănări
Trimiterea cererilor de rețea: Toate cele trei metode sunt folosite pentru a trimite date de la client către server.
Suport pentru mai multe formate de date: Pot trimite date în diverse formate, cum ar fi stringuri, JSON, date binare etc.
Diferenţele
Navigator.sendBeacon
Este folosit pentru a trimite o cantitate mică de date când pagina este dezinstalată și este potrivit pentru înregistrare, analiza datelor etc.
Trimiterea datelor este asincronă, dar nu returnează nicio informație apelantului și nu poate procesa răspunsul serverului.
Concepută pentru a garanta livrarea datelor atunci când pagina este dezinstalată, chiar și atunci când browserul este închis sau pagina sare.
Folosește întotdeauna cereri HTTPPOST.
Nu este nevoie să procesezi răspunsurile, este simplu de folosit.
XMLHttpRequest
Pentru cereri AJAX mai complexe care necesită răspunsuri de procesare.
Se pot face cereri sincrone sau asincrone.
Poți procesa răspunsul serverului și poți face procesări suplimentare (de exemplu, analizarea JSON-ului, gestionarea codurilor de stare etc.).
Oferă evenimente bogate precum onload, onerror, onprogress etc., pentru a monitoriza diferitele etape ale cererii.
Este larg suportat în toate browserele principale, inclusiv în unele browsere mai vechi.
Este mai complex de utilizat și necesită gestionarea diferitelor etape și stări ale cererii.
Fetch
O interfață modernă de cereri pentru a înlocui XMLHttpRequest pentru o procesare mai simplă și mai flexibilă a cererilor și răspunsurilor.
Fă întotdeauna o cerere asincronă, returnând un obiect Promise.
Suportă răspunsuri de procesare în lanț, făcând ușoară analizarea JSON-ului, codurilor de stare a proceselor și multe altele.
Suportă sintaxa async/await, care este mai apropiată de obiceiurile moderne de dezvoltare JavaScript.
Suport mai bun pentru cererile cross-domain și CORS (Cross-Domain Resource Sharing).
Permite adăugarea mai multor opțiuni la cerere (de exemplu, antet personalizat, metodă de solicitare etc.).
rezumat
Navigator.sendBeacon este un API conceput pentru fiabilitate, în special pentru trimiterea unor cantități mici de date atunci când o pagină este dezinstalată.
Are avantajele simplității, neblocării și fiabilității, fiind deosebit de potrivit pentru scenarii precum jurnalismul și analiza comportamentului utilizatorului.
Se face o cerere asincronă și este o cerere POST.
Poate determina doar dacă este plasată în coada de sarcini a browserului, dar nu poate determina dacă este trimisă cu succes.
Nu este nevoie să te ocupi de valoarea returnării.
Problemele de compatibilitate cu browserele trebuie remarcate. |
Postat la 2025-3-5 09:46:14
|
|
|
|
