> ## 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.

# AppSignal para Browser

<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 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.

<h2 id="what-it-collects">
  O que é coletado
</h2>

<CardGroup cols={3}>
  <Card title="Errors" icon="bug" href="/browser/error-tracking">
    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.
  </Card>

  <Card title="Breadcrumbs" icon="shoe-prints" href="/browser/breadcrumbs">
    Navegação, seleções, requisições de rede e avisos e erros do console antes de cada erro. Coletado automaticamente após `init()`.
  </Card>

  <Card title="Web vitals" icon="gauge" href="/browser/web-vitals">
    LCP, INP, CLS, FCP e TTFB de usuários reais, agregados por rota e comparáveis entre releases.
  </Card>
</CardGroup>

Para ver o trabalho do navegador e do back-end em um único [trace](/browser/distributed-tracing), 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.

<h2 id="where-to-find-it-in-appsignal">
  Onde encontrar no AppSignal
</h2>

A seção Browser da sua aplicação tem duas visualizações:

* **Errors** agrupa erros de front-end em issues que você pode triar. Leia mais em [erros de front-end no AppSignal](/browser-monitoring/errors).
* **Performance** resume as cinco web vitals e as detalha por rota. Leia mais em [performance de front-end no AppSignal](/browser-monitoring/performance).

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 suas configurações de notificação. Para o que browser monitoring cobre como funcionalidade, consulte a [visão geral de browser monitoring](/browser-monitoring).

<h2 id="relation-to-appsignal-for-javascript">
  Relação com o AppSignal para JavaScript
</h2>

Se você usa [`@appsignal/javascript`](/front-end), siga o [guia de migração](/browser/migration) 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`.

<h2 id="requirements">
  Requisitos
</h2>

* 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.

<h2 id="next-steps">
  Próximos passos
</h2>

<CardGroup cols={2}>
  <Card title="Gerar seu snippet" icon="wand-magic-sparkles" href="https://appsignal.com/redirect-to/organization?to=sites/new/browser">
    Deixe o AppSignal gerar o código de instalação com a sua Front-end API key já preenchida.
  </Card>

  <Card title="Instalar o pacote" icon="download" href="/browser/installation">
    Adicione `@appsignal/browser` à sua aplicação e comece a relatar dados.
  </Card>

  <Card title="Opções de configuração" icon="sliders" href="/browser/configuration">
    Cada opção, seu tipo e seu valor padrão.
  </Card>

  <Card title="Filtrar o que você envia" icon="shield" href="/browser/privacy">
    Limpar URLs, mascarar elementos e condicionar a coleta ao consentimento do usuário.
  </Card>

  <Card title="Migrar do AppSignal para JavaScript" icon="arrow-right-arrow-left" href="/browser/migration">
    Mapear a API antiga para a nova.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.