Requisitos: O produto desenvolvido não pode garantir que não haja bugs, mesmo que não haja problemas na fase de teste, implantado no ambiente de produção, podem ocorrer situações inesperadas para os usuários, e o mesmo vale para páginas front-end. Sentry e Bugsnag são produtos de monitoramento muito bons.
revisar
Após monitorar as informações da anomalia, como faço para enviar os dados para a API de backend? Navigator.sendBeacon é uma API para enviar pequenas quantidades de dados ao servidor, especialmente quando uma página está prestes a ser descarregada, como logs, análise de comportamento do usuário, etc.
Se você usa XHR tradicional para enviar dados, precisa fazer um processamento lógico especial na interface de rastreamento do frontend. método navigator.sendBeacon()Coloque uma mensagem em uma fila do navegador para que, mesmo que o envio falhe, a mensagem de erro não seja capturada pelo frontend。
Lançamento do Navigator.sendBeacon
O método navigator.sendBeacon() envia uma requisição HTTP POST com uma pequena quantidade de dados para o servidor web de forma assíncrona. Parâmetros: url, data (dados do tipo ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData ou URLSearchParams)
Documentação:
O login do hiperlink está visível.
O login do hiperlink está visível.
Cenários de uso
Registro quando a página é desinstalada: Registra dados comportamentais como tempo de permanência da página, comportamento de cliques, PV, UV, etc., quando o usuário sai da página.
Análise e Monitoramento: Envio de dados de comportamento do usuário para servidores de análise para monitoramento de desempenho do site e análise do comportamento do usuário.
Relatórios de Status: Reporta o status da aplicação ou informações de erro ao servidor.
Teste
O código é o seguinte:
Quais são as semelhanças e diferenças entre Navigator.sendBeacon e XHR e fetch?
Semelhanças
Envio de requisições de rede: Os três métodos são usados para enviar dados do cliente para o servidor.
Suporte para múltiplos formatos de dados: Eles podem enviar dados em vários formatos, como strings, JSON, dados binários, etc.
Diferenças
Navegador.envioBeacon
Ele é usado para enviar uma pequena quantidade de dados quando a página é desinstalada, sendo adequado para registro, análise de dados, etc.
O envio de dados é assíncrono, mas não retorna nenhuma informação ao chamador e não pode processar a resposta do servidor.
Projetado para garantir a entrega de dados quando a página é desinstalada, mesmo quando o navegador está fechado ou a página salta de forma rápida.
Sempre use solicitações HTTPPOST.
Não precisa processar respostas, é fácil de usar.
XMLHttpRequest
Para requisições AJAX mais complexas que exigem respostas de processamento.
Requisições síncronas ou assíncronas podem ser feitas.
Você pode processar a resposta do servidor e fazer mais processamento (por exemplo, analisar JSON, lidar com códigos de status, etc.).
Fornece eventos ricos como onload, onerror, onprogress, etc., para monitorar as várias etapas da solicitação.
Amplamente suportado em todos os principais navegadores, incluindo alguns mais antigos.
É mais complexo de usar e requer o gerenciamento das várias etapas e estados da solicitação.
Buscar
Uma interface moderna de requisição para substituir o XMLHttpRequest para um processamento de requisições e respostas mais simples e flexível.
Sempre faça uma solicitação assíncrona, retornando um objeto Promisso.
Ele suporta respostas de processamento em cadeia, facilitando a análise de JSON, códigos de status de processos e mais.
Suporta a sintaxe assíncrona/await, que está mais alinhada com os hábitos modernos de desenvolvimento JavaScript.
Melhor suporte para requisições entre domínios e CORS (Compartilhamento de Recursos entre Domínios).
Permite adicionar mais opções à solicitação (por exemplo, cabeçalho personalizado, método de requisição, etc.).
resumo
Navigator.sendBeacon é uma API projetada para confiabilidade, especialmente para enviar pequenas quantidades de dados quando uma página é desinstalada.
Ele possui vantagens de simplicidade, não bloqueio e confiabilidade, sendo especialmente adequado para cenários como registro e análise do comportamento do usuário.
Uma solicitação assíncrona é feita e é uma solicitação POST.
Ele só pode determinar se está colocado na fila de tarefas do navegador, mas não pode determinar se foi enviado com sucesso.
Não há necessidade de lidar com o valor de retorno.
Questões de compatibilidade com navegadores precisam ser observadas. |
Postado em 09:46:14 em 2025-3-09:46:14
|
|
|
|
