Requisiti: Il prodotto sviluppato non può garantire che non ci siano bug, anche se non ci sono problemi nella fase di test, distribuito nell'ambiente di produzione, possono verificarsi situazioni impreviste per gli utenti, e lo stesso vale per le pagine front-end. Sentry e Bugsnag sono entrambi ottimi prodotti per il monitoraggio.
recensione
Dopo aver monitorato le informazioni sull'anomalia, come posso inviare i dati all'API backend? Navigator.sendBeacon è un'API per inviare piccole quantità di dati al server, specialmente quando una pagina sta per essere scaricata, come per la registrazione, l'analisi del comportamento degli utenti, ecc.
Se usi l'XHR tradizionale per inviare dati, devi fare un'elaborazione logica speciale sull'interfaccia di tracciamento nel frontend. Metodo navigator.sendBeacon()Inserisci un messaggio in una coda del browser in modo che, anche se l'invio fallisce, il messaggio di errore non venga rilevato dal frontend。
Introdotto Navigator.sendBeacon
Il metodo navigator.sendBeacon() invia una richiesta HTTP POST con una piccola quantità di dati al server web in modo asincrono. Parametri: url, dati (dati di tipo ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData o URLSearchParams)
Documentazione:
Il login del link ipertestuale è visibile.
Il login del link ipertestuale è visibile.
Scenari d'uso
Registrazione quando la pagina viene disinstallata: registra dati comportamentali come il tempo di permanenza della pagina, il comportamento dei clic, il PV, l'UV, ecc. quando l'utente lascia la pagina.
Analisi e Monitoraggio: Invio di dati sul comportamento degli utenti ai server di analisi per il monitoraggio delle prestazioni del sito web e l'analisi del comportamento degli utenti.
Segnalazione dello stato: Segnala lo stato dell'applicazione o le informazioni sugli errori al server.
Test
Il codice è il seguente:
Quali sono le somiglianze e le differenze tra Navigator.sendBeacon e XHR e fetch?
Somiglianze
Invio di richieste di rete: Tutti e tre i metodi vengono utilizzati per inviare dati dal client al server.
Supporto per più formati di dato: possono inviare dati in vari formati come stringhe, JSON, dati binari, ecc.
Differenze
Navigator.sendBeacon
Viene utilizzato per inviare una piccola quantità di dati quando la pagina viene disinstallata, ed è adatto per la registrazione, l'analisi dei dati, ecc.
L'invio dei dati è asincrono, ma non restituisce alcuna informazione al chiamante e non può elaborare la risposta del server.
Progettato per garantire la consegna dei dati quando la pagina viene disinstallata, anche quando il browser è chiuso o la pagina salta.
Usa sempre le richieste HTTPPOST.
Non c'è bisogno di elaborare le risposte, è semplice da usare.
XMLHttpRequest
Per richieste AJAX più complesse che richiedono risposte di elaborazione.
Possono essere effettuate richieste sincrone o asincrone.
Puoi elaborare la risposta del server e fare ulteriori processi (ad esempio, analisi JSON, gestione dei codici di stato, ecc.).
Fornisce eventi ricchi come onload, onerror, onprogress, ecc., per monitorare le varie fasi della richiesta.
Ampiamente supportato in tutti i browser principali, inclusi alcuni più vecchi.
È più complesso da usare e richiede di gestire le varie fasi e stati della richiesta.
Portare
Un'interfaccia di richiesta moderna per sostituire XMLHttpRequest per un'elaborazione di richieste e risposte più semplice e flessibile.
Fai sempre una richiesta asincrona, restituendo un oggetto Promise.
Supporta risposte di elaborazione in catena, rendendo facile l'analisi di JSON, codici di stato dei processi e altro ancora.
Supporta la sintassi async/await, che è più in linea con le moderne abitudini di sviluppo JavaScript.
Migliore supporto per richieste cross-domain e CORS (Cross-Domain Resource Sharing).
Permette di aggiungere più opzioni alla richiesta (ad esempio, header personalizzato, metodo di richiesta, ecc.).
sommario
Navigator.sendBeacon è un'API progettata per l'affidabilità, specialmente per inviare piccole quantità di dati quando una pagina viene disinstallata.
Presenta i vantaggi di semplicità, non bloccaggio e affidabilità, ed è particolarmente adatta per scenari come la registrazione e l'analisi del comportamento dell'utente.
Viene effettuata una richiesta asincrona ed è una richiesta POST.
Può solo determinare se è inserito nella coda delle attività del browser, ma non può determinare se viene inviato con successo.
Non c'è bisogno di occuparsi del valore di reso.
Bisogna notare i problemi di compatibilità con i browser. |
Pubblicato il 5-03-2025 09:46:14
|
|
|
|
