Eisen: Het ontwikkelde product kan niet garanderen dat er geen bugs zijn, zelfs als er geen problemen zijn in de testfase, geïmplementeerd in de productieomgeving, er kunnen onverwachte situaties optreden voor gebruikers, en hetzelfde geldt voor front-end pagina's. Sentry en Bugsnag zijn allebei zeer goede monitoringsproducten.
recensie
Hoe stuur ik na het monitoren van de anomalie-informatie de data naar de backend-API? Navigator.sendBeacon is een API voor het verzenden van kleine hoeveelheden data naar de server, vooral wanneer een pagina op het punt staat te worden uitgevoerd, zoals bij logging, gebruikersgedragsanalyse, enzovoort.
Als je traditionele XHR gebruikt om data te verzenden, moet je speciale logische verwerking doen op de trackinginterface van de frontend. navigator.sendBeacon()-methodePlaats een bericht in een browserwachtrij zodat zelfs als de verzending mislukt, het foutbericht niet door de frontend wordt opgemerkt。
Navigator.sendBeacon geïntroduceerd
De navigator.sendBeacon()-methode stuurt een HTTP POST-verzoek met een kleine hoeveelheid data asynchroon naar de webserver. Parameters: url, data (data van het type ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData of URLSearchParams)
Documentatie:
De hyperlink-login is zichtbaar.
De hyperlink-login is zichtbaar.
Gebruiksscenario's
Logging wanneer de pagina wordt verwijderd: Registreert gedragsgegevens zoals pagina-verblijftijd, klikgedrag, PV, UV, enzovoort wanneer de gebruiker de pagina verlaat.
Analytics en monitoring: Het verzenden van gebruikersgedragsgegevens naar analyticsservers voor websiteprestatiemonitoring en gebruikersgedragsanalyse.
Statusrapportage: Rapporteert de status of foutinformatie van de applicatie aan de server.
Test
De code is als volgt:
Wat zijn de overeenkomsten en verschillen tussen Navigator.sendBeacon en XHR en fetch?
Overeenkomsten
Netwerkverzoeken verzenden: Alle drie de methoden worden gebruikt om data van de client naar de server te sturen.
Ondersteuning voor meerdere dataformaten: Ze kunnen data verzenden in verschillende formaten zoals strings, JSON, binaire data, enzovoort.
Verschillen
Navigator.sendBeacon
Het wordt gebruikt om een kleine hoeveelheid data te verzenden wanneer de pagina wordt verwijderd, en is geschikt voor loggen, data-analyse, enzovoort.
Het verzenden van data is asynchroon, maar geeft geen informatie terug aan de aanroeper en kan het antwoord van de server niet verwerken.
Ontworpen om gegevenslevering te garanderen wanneer de pagina wordt verwijderd, zelfs als de browser gesloten is of de pagina springt.
Gebruik altijd HTTPPOST-verzoeken.
Geen reacties hoeven te verwerken, eenvoudig in gebruik.
XMLHttpRequest
Voor complexere AJAX-verzoeken die verwerking van antwoorden vereisen.
Synchrone of asynchrone verzoeken kunnen worden gedaan.
Je kunt het antwoord van de server verwerken en verdere verwerking uitvoeren (bijvoorbeeld JSON parsen, statuscodes verwerken, enzovoort).
Biedt uitgebreide gebeurtenissen zoals onload, onerror, onprogress, enzovoort, om de verschillende fasen van het verzoek te monitoren.
Breed ondersteund in alle grote browsers, inclusief enkele oudere browsers.
Het is complexer in gebruik en vereist het afhandelen van de verschillende fasen en toestanden van het verzoek.
Halen
Een moderne verzoekinterface ter vervanging van XMLHttpRequest voor eenvoudigere en flexibelere verwerking van verzoeken en antwoorden.
Voer altijd een asynchrone aanvraag uit en geef een Promise-object terug.
Het ondersteunt geketende verwerkingsreacties, waardoor het eenvoudig is om JSON, statuscodes en meer te verwerken.
Ondersteunt async/await-syntaxis, wat meer aansluit bij moderne JavaScript-ontwikkelingsmethodes.
Betere ondersteuning voor cross-domain verzoeken en CORS (Cross-Domain Resource Sharing).
Maakt het mogelijk om meer opties aan het verzoek toe te voegen (bijv. aangepaste header, requestmethode, enz.).
samenvatting
Navigator.sendBeacon is een API die is ontworpen voor betrouwbaarheid, vooral voor het verzenden van kleine hoeveelheden data wanneer een pagina wordt verwijderd.
Het heeft de voordelen van eenvoud, niet-blokkering en betrouwbaarheid, en is vooral geschikt voor scenario's zoals logging en gebruikersgedraganalyse.
Er wordt een asynchroon verzoek gedaan en is een POST-verzoek.
Het kan alleen bepalen of het in de browsertaakwachtrij is geplaatst, maar kan niet bepalen of het succesvol is verzonden.
Er is geen noodzaak om met de retourwaarde om te gaan.
Problemen met browsercompatibiliteit moeten worden opgemerkt. |
Geplaatst op 5-3-2025 09:46:14
|
|
|
|
