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 os breadcrumbs mais recentes e web vitals de usuários reais. É uma seção separada no AppSignal, ao lado dos traces, dos erros e das métricas que sua integração de back-end relata. A coleta de dados é feita por @appsignal/browser, um pacote independente que não depende de nenhum outro pacote do AppSignal.

​
O que é coletado

Errors

Exceções não capturadas e rejeições de promises não tratadas, com stack traces disponíveis, tags e a rota em que o usuário estava.

Breadcrumbs

Navegação, seleções, requisições de rede e avisos e erros do console antes de cada erro. Coletado automaticamente após init().

Web vitals

LCP, INP, CLS, FCP e TTFB de usuários reais, agregados por rota e comparáveis entre releases.
Para ver o trabalho do navegador e do back-end em um único trace, configure os dois lados. O SDK do Browser envia o contexto do trace. O serviço de API que recebe a requisição precisa de instrumentação para lê-lo e relatar spans. Uma resposta 5xx ou timeout correspondente ainda pode gerar um erro no navegador. Sem instrumentação de back-end, o trace dele não tem spans de back-end.

​
Onde encontrar no AppSignal

A seção Browser da sua aplicação tem duas visualizações: 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 suas configurações de notificação. Para o que browser monitoring cobre como funcionalidade, consulte a visão geral de browser monitoring.

​
Relação com o AppSignal para JavaScript

Se você usa @appsignal/javascript, siga o guia de migração ao migrar para @appsignal/browser. O novo SDK tem uma API diferente. Ele coleta breadcrumbs e web vitals após init() e relata erros no namespace browser.

​
Requisitos

  • Um navegador com suporte a ES2020. O pacote tem como alvo ES2020 e não inclui polyfills.
  • CLS e INP dependem, respectivamente, dos tipos de entrada de performance layout-shift e event-timing do navegador. O SDK ignora a métrica correspondente quando o tipo de entrada dela não está disponível.
Opcional: React 16.8 ou posterior, se você quiser usar o error boundary que acompanha o pacote.

​
Próximos passos

Gerar seu snippet

Deixe o AppSignal gerar o código de instalação com a sua Front-end API key já preenchida.

Instalar o pacote

Adicione @appsignal/browser à sua aplicação e comece a relatar dados.

Opções de configuração

Cada opção, seu tipo e seu valor padrão.

Filtrar o que você envia

Limpar URLs, mascarar elementos e condicionar a coleta ao consentimento do usuário.

Migrar do AppSignal para JavaScript

Mapear a API antiga para a nova.