|
|
Veröffentlicht am 5.3.2025, 09:46:14
|
|
|
|
Anforderungen: Das entwickelte Produkt kann nicht garantieren, dass keine Fehler vorliegen, selbst wenn es keine Probleme in der Testphase gibt, die in der Produktionsumgebung bereitgestellt werden; es kann unerwartete Situationen für Nutzer auftreten, und das gilt auch für Frontend-Seiten. Sentry und Bugsnag sind beide sehr gute Überwachungsprodukte.
Rezension
Wie reiche ich nach Überwachung der Anomalie-Informationen die Daten an die Backend-API ein? Navigator.sendBeacon ist eine API zum Senden kleiner Datenmengen an den Server, insbesondere wenn eine Seite kurz vor dem Entladen steht, wie z. B. Protokollierung, Analyse des Benutzerverhaltens usw.
Wenn du traditionelle XHR zum Datensenden verwendest, musst du spezielle logische Verarbeitung über die Tracking-Schnittstelle im Frontend durchführen. navigator.sendBeacon()-MethodeFügen Sie eine Nachricht in eine Browser-Warteschlange ein, damit selbst wenn das Senden fehlschlägt, die Fehlermeldung vom Frontend nicht erkannt wird。
Navigator.sendBeacon eingeführt
Die navigator.sendBeacon()-Methode sendet eine HTTP-POST-Anfrage mit einer kleinen Datenmenge asynchron an den Webserver. Parameter: URL, Daten (Daten vom Typ ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData oder URLSearchParams)
Dokumentation:
Der Hyperlink-Login ist sichtbar.
Der Hyperlink-Login ist sichtbar.
Anwendungsszenarien
Protokollierung beim Deinstallieren der Seite: Erfasst Verhaltensdaten wie Seitenaufenthaltszeit, Klickverhalten, PV, UV usw., wenn der Benutzer die Seite verlässt.
Analytik und Überwachung: Übertragung von Nutzerverhaltensdaten an Analyseserver zur Überwachung der Website-Performance und zur Analyse des Nutzerverhaltens.
Statusberichterstattung: Meldet den Anwendungsstatus oder Fehlerinformationen an den Server.
Test
Der Code lautet wie folgt:
Was sind die Gemeinsamkeiten und Unterschiede zwischen Navigator.sendBeacon und XHR und Fetch?
Ähnlichkeiten
Netzwerkanfragen senden: Alle drei Methoden werden verwendet, um Daten vom Client an den Server zu senden.
Unterstützung für mehrere Datenformate: Sie können Daten in verschiedenen Formaten wie Strings, JSON, Binärdaten usw. senden.
Unterschiede
Navigator.sendBeacon
Es wird verwendet, um eine kleine Datenmenge zu senden, wenn die Seite deinstalliert wird, und eignet sich zum Protokollieren, zur Datenanalyse usw.
Das Senden von Daten ist asynchron, aber es gibt keine Informationen an den Aufrufer zurück und kann die Antwort des Servers nicht verarbeiten.
Es wurde entwickelt, um die Datenübertragung zu garantieren, wenn die Seite deinstalliert wird, selbst wenn der Browser geschlossen wird oder die Seite springt.
Verwenden Sie immer HTTPPOST-Anfragen.
Keine Notwendigkeit, Antworten zu verarbeiten, einfach zu verwenden.
XMLHttpRequest
Für komplexere AJAX-Anfragen, die die Verarbeitung von Antworten erfordern.
Synchrone oder asynchrone Anfragen können gestellt werden.
Du kannst die Antwort des Servers verarbeiten und weitere Bearbeitungen durchführen (z. B. JSON parsen, Statuscodes verwalten usw.).
Bietet reichhaltige Ereignisse wie Onload, Onerror, Onprogress usw., um die verschiedenen Phasen der Anfrage zu überwachen.
Weit verbreitet unterstützt in allen wichtigen Browsern, einschließlich einiger älterer Browser.
Sie ist komplexer zu verwenden und erfordert die Behandlung der verschiedenen Phasen und Zustände der Anfrage.
Holen
Eine moderne Anforderungsschnittstelle zur Ersetzung von XMLHttpRequest für eine einfachere und flexiblere Verarbeitung von Anfragen und Antworten.
Stellen Sie immer eine asynchrone Anfrage, die ein Promise-Objekt zurückgibt.
Es unterstützt vernetzte Verarbeitungsantworten, was das Parsen von JSON, das Verarbeiten von Statuscodes und mehr erleichtert.
Unterstützt asynchrone/await-Syntax, was eher den modernen JavaScript-Entwicklungsgewohnheiten entspricht.
Bessere Unterstützung für domänenübergreifende Anfragen und CORS (Cross-Domain Resource Sharing).
Ermöglicht das Hinzufügen weiterer Optionen zur Anfrage (z. B. benutzerdefinierter Header, Anfragemethode usw.).
Zusammenfassung
Navigator.sendBeacon ist eine API, die auf Zuverlässigkeit ausgelegt ist, insbesondere zum Senden kleiner Datenmengen, wenn eine Seite deinstalliert wird.
Sie bietet die Vorteile von Einfachheit, Blockierungsfreiheit und Zuverlässigkeit und eignet sich besonders für Szenarien wie Logging und Nutzerverhaltensanalyse.
Es wird eine asynchrone Anfrage gestellt und es handelt sich um eine POST-Anfrage.
Es kann nur feststellen, ob es in der Browser-Task-Warteschlange platziert wird, aber nicht feststellen, ob es erfolgreich gesendet wurde.
Es ist nicht nötig, sich mit dem Rückgabewert zu beschäftigen.
Browser-Kompatibilitätsprobleme müssen beachtet werden. |
Vorhergehend:Fuse.js Frontend-Bibliothek für leichte, unscharfe Suche (Volltextsuche)Nächster:Ubuntu 24.04 Grafikkarte A10 mit installiertem NVIDIA-Treiber
|
