Exigences : Le produit développé ne peut pas garantir qu’il n’y a pas de bugs, même s’il n’y a pas de problèmes lors de la phase de test, déployé dans l’environnement de production, il peut y avoir des situations inattendues pour les utilisateurs, et il en va de même pour les pages front-end. Sentry et Bugsnag sont tous deux d’excellents produits de surveillance.
révision
Après avoir surveillé les informations de l’anomalie, comment soumettre les données à l’API backend ? Navigator.sendBeacon est une API permettant d’envoyer de petites quantités de données au serveur, en particulier lorsqu’une page est sur le point d’être déchargée, comme la journalisation, l’analyse du comportement des utilisateurs, etc.
Si vous utilisez un XHR traditionnel pour envoyer des données, vous devez effectuer un traitement logique spécial sur l’interface de suivi du frontend. Méthode navigator.sendBeacon()Déposer un message dans une file d’attente du navigateur afin que, même si l’envoi échoue, son message d’erreur ne soit pas détecté par l’interface。
Navigator.sendBeacon introduit
La méthode navigator.sendBeacon() envoie une requête HTTP POST avec une petite quantité de données au serveur web de manière asynchrone. Paramètres : url, data (données de type ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData, ou URLSearchParams)
Documentation:
La connexion hyperlientérée est visible.
La connexion hyperlientérée est visible.
Scénarios d’utilisation
Journalisation lors de la désinstallation de la page : enregistre des données comportementales telles que le temps de permanence de la page, le comportement des clics, le PV, l’UV, etc. lorsque l’utilisateur quitte la page.
Analyse et surveillance : Envoi de données sur le comportement des utilisateurs vers des serveurs d’analyse pour la surveillance des performances du site web et l’analyse du comportement des utilisateurs.
Rapport de statut : Signale l’état de l’application ou les informations d’erreur au serveur.
Test
Le code est le suivant :
Quelles sont les similitudes et différences entre Navigator.sendBeacon et XHR et fetch ?
Similitudes
Envoi de requêtes réseau : Les trois méthodes sont utilisées pour envoyer les données du client au serveur.
Prise en charge de plusieurs formats de données : Ils peuvent envoyer des données sous différents formats tels que chaînes de caractères, JSON, données binaires, etc.
Différences
Navigator.sendBeacon
Il est utilisé pour envoyer une petite quantité de données lors de la désinstallation de la page, et convient à la journalisation, à l’analyse de données, etc.
L’envoi de données est asynchrone, mais ne renvoie aucune information à l’appelant et ne peut pas traiter la réponse du serveur.
Conçu pour garantir la livraison des données lors de la désinstallation de la page, même lorsque le navigateur est fermé ou que la page saute.
Utilisez toujours les requêtes HTTPPOST.
Pas besoin de traiter les réponses, c’est simple à utiliser.
XMLHttpRequest
Pour les requêtes AJAX plus complexes qui nécessitent des réponses de traitement.
Des requêtes synchrones ou asynchrones peuvent être effectuées.
Vous pouvez traiter la réponse du serveur et effectuer des traitements supplémentaires (par exemple, analyser le JSON, gérer les codes de statut, etc.).
Fournit des événements riches tels que onload, onerror, onprogress, etc., pour surveiller les différentes étapes de la requête.
Largement pris en charge dans tous les principaux navigateurs, y compris certains anciens navigateurs.
Il est plus complexe à utiliser et nécessite de gérer les différentes étapes et états de la requête.
Chercher
Une interface de requête moderne pour remplacer XMLHttpRequest afin d’offrir un traitement plus simple et plus flexible des requêtes et des réponses.
Faites toujours une requête asynchrone, en retournant un objet Promise.
Il prend en charge les réponses de traitement chaînées, facilitant l’analyse du JSON, des codes d’état des processus, et plus encore.
Prend en compte la syntaxe async/await, qui est plus conforme aux habitudes modernes de développement JavaScript.
Meilleur support des requêtes inter-domaines et du CORS (Cross-Domain Resource Sharing).
Permet d’ajouter plus d’options à la requête (par exemple, en-tête personnalisé, méthode de requête, etc.).
résumé
Navigator.sendBeacon est une API conçue pour la fiabilité, notamment pour envoyer de petites quantités de données lors de la désinstallation d’une page.
Il présente les avantages de la simplicité, de la non-obstruction et de la fiabilité, et est particulièrement adapté à des scénarios tels que la journalisation et l’analyse du comportement des utilisateurs.
Une requête asynchrone est faite et constitue une requête POST.
Il ne peut déterminer que s’il est placé dans la file des tâches du navigateur, mais ne peut pas déterminer s’il a été envoyé avec succès.
Il n’est pas nécessaire de gérer la valeur de retour.
Les problèmes de compatibilité des navigateurs doivent être notés. |
Publié le 05-03-2025 à 09:46:14
|
|
|
|
