> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser monitoring

> O que o AppSignal relata sobre os navegadores dos seus usuários e como erros de front-end e web vitals são apresentados.

<Note>
  Browser monitoring é uma funcionalidade em beta do [AppSignal Labs](/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](https://discord.gg/EjF6ykYx63).
</Note>

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](/browser-monitoring/errors) agrupa erros de front-end em issues que você pode triar, atribuir e sobre as quais pode ser notificado.
* [Performance](/browser-monitoring/performance) relata web vitals por rota, para você comparar releases e encontrar as páginas que precisam de trabalho.

<h2 id="what-the-sdk-collects">
  O que o SDK coleta
</h2>

Browser monitoring é alimentado pelo [AppSignal para Browser](/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](/browser/error-tracking) 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](/browser/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](/browser/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.

<h2 id="how-it-relates-to-your-back-end-errors">
  Como isso se relaciona com seus erros de back-end
</h2>

Erros de front-end são relatados no namespace `browser` (veja [namespaces](/guides/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](/errors) usa em todo o restante do AppSignal.

Web vitals são separadas dos seus dados de back-end de [performance e tracing](/performance-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.

<h2 id="two-settings-worth-getting-right">
  Duas configurações que vale acertar
</h2>

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](/browser/installation#report-the-current-route).
* **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`](/browser/configuration#appversion).

Para a lista completa do que é registrado, e como desligar categorias, leia a [página de breadcrumbs](/browser/breadcrumbs).