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 o que acontece nos navegadores dos seus usuários: erros de front-end, cada um com a sequência de eventos que levou a ele, e web vitals medidas em carregamentos de página 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 são os erros JavaScript que seu código lança sem capturá-los, incluindo promises que falham. Cada um chega com um stack trace e com as tags que você definiu.
  • Breadcrumbs são uma linha do tempo do que aconteceu antes de um erro: as páginas que o usuário abriu, o que ele selecionou, as requisições que a página fez e o que o console registrou.
  • 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 são relatados no namespace browser (veja namespaces), o que os mantém fora das suas listas de erros de back-end e das configurações de notificação delas. É por isso que browser monitoring é uma seção própria em vez de um filtro sobre seus erros existentes: uma desenvolvedora de front-end abre uma visualização que contém trabalho de front-end e nada mais, em vez de restringir uma visualização feita para depurar o lado do servidor. No resto, são issues comuns: o agrupamento, a triagem e o modelo de notificação são os mesmos que Errors usa em todo o restante do AppSignal. 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. Diga ao AppSignal que o usuário está em /orders/:id, não em /orders/1042. Erros e web vitals são agrupados pela rota que você relata. Sem um template, mil pedidos se tornam mil rotas separadas, e um bug se torna mil issues. 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.