Skip to main content
Browser monitoring é uma funcionalidade em beta do AppSignal Labs. O pacote @appsignal/browser é publicado sob a tag beta no npm, e sua configuração e API ainda podem mudar entre releases beta. Compartilhe seu feedback na nossa comunidade no Discord.
Browser monitoring relata erros de front-end com breadcrumbs recentes e web vitals de usuários reais. Sua telemetria de back-end não consegue responder perguntas como estas:
  • Depois de um deploy, alguns usuários encontram Failed to fetch dynamically imported module enquanto seus próprios testes continuam limpos. Qual release introduziu isso, e o que o usuário estava fazendo quando aconteceu?
  • Seus traces mostram o servidor respondendo em 80 ms, mas os usuários continuam dizendo que o dashboard parece lento. O tempo está indo para algum lugar no navegador?
  • Você publicou ontem uma mudança no seu bundle JavaScript. As páginas em que seus usuários passam mais tempo ficaram mais lentas?
Browser monitoring é uma seção própria da sua aplicação no AppSignal, com duas visualizações:
  • Errors agrupa erros de front-end em issues que você pode triar, atribuir e sobre as quais pode ser notificado.
  • Performance relata web vitals por rota, para você comparar releases e encontrar as páginas que precisam de trabalho.

​
O que o SDK coleta

Browser monitoring é alimentado pelo AppSignal para Browser, o pacote @appsignal/browser que você adiciona ao seu front end. Depois de inicializado, ele coleta três coisas sem nenhuma configuração adicional:
  • Errors incluem erros JavaScript não capturados e promises rejeitadas não tratadas. Cada um chega com um stack trace, quando disponível, e com as tags que você definiu.
  • Breadcrumbs mostram navegação recente, cliques, requisições de rede e avisos e erros do console antes de um erro.
  • Web vitals são cinco medições de como a página se comporta em uso. Quanto tempo leva para carregar, com que rapidez responde e se o layout salta durante o carregamento.
A documentação do SDK cobre como instalá-lo e configurá-lo, e exatamente o que cada um desses itens carrega. Esta seção cobre o que o AppSignal faz com eles.

​
Como isso se relaciona com seus erros de back-end

Erros de front-end vão para o namespace browser (veja namespaces). Isso os mantém separados das listas de erros de back-end e das configurações de notificação. A seção Browser oferece uma visualização dedicada para erros de front-end e performance. Estas são issues do AppSignal normais. Você pode agrupá-las, triá-las e ser notificado sobre elas. Web vitals são separadas dos seus dados de back-end de performance e tracing. Um navegador mede quanto tempo uma página levou para se tornar utilizável. Um trace mede o que seu servidor fez. Quando a mesma rota está lenta nos dois, você está olhando um problema por dois lados.

​
Duas configurações que vale acertar

Estas duas escolhas determinam o quanto os dados são úteis:
  • Relate o template de rota. Passe /orders/:id em vez de /orders/1042. Os erros usam o caminho bruto quando você não define um template. Isso pode dividir um bug em várias issues. Para os web vitals, o processador deriva um template aproximado, mas o padrão do seu roteador é mais confiável. Leia mais em relatar a rota atual.
  • Defina uma versão da aplicação. As duas visualizações podem filtrar pela versão que relatou os dados. É assim que você percebe se um release piorou as coisas. Leia mais em appVersion.
Para a lista completa do que é registrado, e como desligar categorias, leia a página de breadcrumbs.