Requisitos: El producto desarrollado no puede garantizar que no haya errores, incluso si no hay problemas en la fase de pruebas, se despliega en el entorno de producción, puede haber situaciones inesperadas para los usuarios, y lo mismo ocurre con las páginas frontales. Sentry y Bugsnag son productos de monitorización muy buenos.
revisión
Después de monitorizar la información de la anomalía, ¿cómo envío los datos a la API de backend? Navigator.sendBeacon es una API para enviar pequeñas cantidades de datos al servidor, especialmente cuando una página está a punto de descargarse, como registros de datos, análisis del comportamiento del usuario, etc.
Si usas XHR tradicional para enviar datos, necesitas hacer un procesamiento lógico especial en la interfaz de seguimiento del frontend. Método navigator.sendBeacon()Coloca un mensaje en la cola del navegador para que, aunque el envío falle, su mensaje de error no sea detectado por el frontend。
Introducido Navigator.sendBeacon
El método navigator.sendBeacon() envía una solicitud HTTP POST con una pequeña cantidad de datos al servidor web de forma asíncrona. Parámetros: url, data (datos de tipo ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData o URLSearchParams)
Documentación:
El inicio de sesión del hipervínculo es visible.
El inicio de sesión del hipervínculo es visible.
Escenarios de uso
Registro cuando la página se desinstala: Registra datos de comportamiento como el tiempo de permanencia de la página, el comportamiento de clics, PV, UV, etc., cuando el usuario sale de la página.
Análisis y monitorización: Envío de datos de comportamiento de los usuarios a servidores de análisis para el seguimiento del rendimiento y análisis del comportamiento del usuario.
Informes de estado: Informa del estado de la solicitud o de la información de error al servidor.
Prueba
El código es el siguiente:
¿Cuáles son las similitudes y diferencias entre Navigator.sendBeacon y XHR y fetch?
Similitudes
Envío de solicitudes de red: Se utilizan los tres métodos para enviar datos del cliente al servidor.
Soporte para múltiples formatos de datos: Pueden enviar datos en varios formatos como cadenas, JSON, datos binarios, etc.
Diferencias
Navigator.sendBeacon
Se utiliza para enviar una pequeña cantidad de datos cuando se desinstala la página, y es adecuado para registrar, analizar datos, etc.
El envío de datos es asíncrono, pero no devuelve ninguna información al llamante y no puede procesar la respuesta del servidor.
Diseñado para garantizar la entrega de datos cuando la página se desinstala, incluso cuando el navegador está cerrado o la página salta.
Utiliza siempre solicitudes HTTPPOST.
No hace falta procesar respuestas, es fácil de usar.
XMLHttpRequest
Para solicitudes AJAX más complejas que requieren respuestas de procesamiento.
Se pueden hacer solicitudes síncronas o asíncronas.
Puedes procesar la respuesta del servidor y hacer más procesamiento (por ejemplo, analizar JSON, gestionar códigos de estado, etc.).
Proporciona eventos enriquecidos como onload, onerror, onprogress, etc., para monitorizar las distintas etapas de la solicitud.
Ampliamente soportado en todos los navegadores principales, incluidos algunos antiguos.
Es más complejo de usar y requiere gestionar las distintas etapas y estados de la solicitud.
Traer
Una interfaz moderna de solicitudes para reemplazar XMLHttpRequest y un procesamiento de solicitudes y respuestas más sencillo y flexible.
Haz siempre una solicitud asíncrona, devolviendo un objeto Promesa.
Soporta respuestas de procesamiento encadenado, facilitando el análisis de JSON, códigos de estado de procesos y más.
Soporta la sintaxis async/await, que está más en línea con los hábitos modernos de desarrollo de JavaScript.
Mejor soporte para solicitudes entre dominios y CORS (Compartición de Recursos entre Dominios).
Permite añadir más opciones a la petición (por ejemplo, cabecera personalizada, método de petición, etc.).
resumen
Navigator.sendBeacon es una API diseñada para la fiabilidad, especialmente para enviar pequeñas cantidades de datos cuando se desinstala una página.
Tiene las ventajas de simplicidad, no bloqueo y fiabilidad, y es especialmente adecuado para escenarios como el registro y el análisis del comportamiento del usuario.
Se realiza una solicitud asincrónica que es una solicitud POST.
Solo puede determinar si está colocado en la cola de tareas del navegador, pero no puede determinar si se ha enviado correctamente.
No hay necesidad de preocuparse por el valor de la devolución.
Hay que señalar los problemas de compatibilidad con navegadores. |
Publicado el 03-05-2025 09:46:14
|
|
|
|
