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

# Solução de problemas do browser monitoring

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

<h2 id="no-data-arrives-at-all">
  Nenhum dado chega
</h2>

Percorra estes itens em ordem. Cada um é uma parada completa: nada é enviado quando ele se aplica.

1. **`active` resulta em `false`.** Registre o valor que você passa, e não a expressão. Um bundler que não substitui `process.env.NODE_ENV` deixa a comparação como `false` no navegador.
2. **`init()` nunca foi executado.** Definir a configuração não é suficiente. Confirme que seu ponto de entrada importa o módulo que chama `init()`. Verifique se o seu build o inclui.
3. **A chave está errada.** Uma chave errada retorna `401`. Use a [Front-end API key](/browser/installation#find-your-front-end-api-key) desta app, não uma Push key. Verifique se ela pertence ao ambiente correto.
4. **As requisições estão bloqueadas.** Abra o painel de rede do seu navegador e procure por uma requisição para `/ingest/browser/errors` no caso de erros, ou `/ingest/browser` no caso de web vitals. Uma requisição bloqueada aparece como violação de Content Security Policy no console: adicione `https://appsignal-endpoint.net` à sua diretiva `connect-src`.
5. **`endpoint` não está definido.** Sem `endpoint`, o SDK envia para a origem atual. Isso exige um proxy no seu domínio. Caso contrário, defina-o como `https://appsignal-endpoint.net`.

<h2 id="errors-arrive-web-vitals-do-not">
  Os erros chegam, as web vitals não
</h2>

Web vitals são enviadas em lotes, não por medição. Elas são enviadas quando a página é ocultada, quando é fechada e em uma mudança de rota no lado do cliente. Saia da página ou troque de aba e verifique a visualização Performance novamente.

Se elas ainda não aparecerem, verifique se as métricas que faltam são especificamente CLS e INP. Essas duas precisam de performance entries do navegador que podem estar [indisponíveis](/browser/web-vitals#browser-support).

<h2 id="an-error-is-missing">
  Um erro está faltando
</h2>

* **Ele aconteceu antes de `init()` rodar.** Nada lançado antes disso é capturado. Importe sua configuração do AppSignal como o primeiro import do seu ponto de entrada.
* **Foi uma repetição.** Verifique os [limites de taxa](/browser/error-tracking#rate-limits) para erros idênticos e para o total.
* **Foi descartado por amostragem.** Verifique se `errors.sampleRate` está abaixo de `1.0`.
* **`beforeError` o descartou.** Um callback que retorna `null` descarta o erro. Registre o evento no início do callback para confirmar o que ele recebe.
* **Foi lançado dentro de um [iframe](/browser/error-tracking#errors-that-are-not-reported).** Um iframe de mesma origem precisa da sua própria chamada a `init()`.
* **Foi um erro de renderização do React.** O React não deixa erros de renderização chegarem a `window`. Adicione um [error boundary](/browser/react).
* **Veio de um script em outro domínio.** Leia a seção a seguir.

<h2 id="errors-show-up-with-no-message-or-stack">
  Erros de scripts cross-origin estão faltando
</h2>

Se erros de um script hospedado em outra origem estiverem faltando, verifique as configurações cross-origin dele. O navegador pode expor apenas `Script error.` para scripts cross-origin. O SDK descarta esses erros opacos. Corrija servindo esses scripts com cabeçalhos CORS, como descrito em [assets hospedados em um CDN](/browser/installation#assets-hosted-on-a-cdn).

<h2 id="backtraces-are-minified">
  Os backtraces estão minificados
</h2>

Backtraces são resolvidos com [sourcemaps](/front-end/sourcemaps), correspondidos pela string de revisão. Defina `appVersion` com o mesmo valor que seu build usa para os sourcemaps. Sem `appVersion`, não há nada para corresponder e os backtraces permanecem minificados.

<h2 id="one-route-produces-hundreds-of-error-groups">
  Uma rota produz centenas de grupos de erro
</h2>

O [template de rota](/browser/installation#report-the-current-route) está faltando, então os erros usam o caminho bruto de cada página. Chame `setRouteTemplate("/orders/:id")` em cada navegação do roteador. Os novos erros passam então a se agrupar sob esse template. Para web vitals, o servidor deriva um template aproximado. Um template explícito é mais confiável e ajuda a evitar o limite de rotas distintas.

<h2 id="client-side-navigation-is-not-reported">
  A navegação no lado do cliente não é relatada
</h2>

O SDK e alguns roteadores fazem patch em `history.pushState`. O SDK se compõe com um patch já existente. Um roteador que substitui depois o patch do SDK pode quebrar o rastreamento da navegação. Importe sua configuração do AppSignal antes do seu roteador.

Roteadores baseados em hash só são tratados como roteadores quando o hash se parece com uma rota, como `#/orders`. Um `#orders` simples é indistinguível de uma âncora na própria página e não é tratado como navegação.

<h2 id="api-requests-fail-after-enabling-distributed-tracing">
  Requisições à API falham após ativar o distributed tracing
</h2>

Uma requisição cross-origin que carrega `traceparent` pode exigir um preflight CORS. Se o seu navegador relatar um erro de CORS mencionando `traceparent`, permita esse cabeçalho no `Access-Control-Allow-Headers` da sua API. Leia mais em [distributed tracing para Browser](/browser/distributed-tracing#enable-it).

<h2 id="a-failed-request-shows-no-back-end-spans">
  Uma requisição com falha não mostra spans de back-end
</h2>

O erro chegou, mas seu trace tem apenas o span do navegador. Verifique se o serviço que recebe a requisição reporta por meio de um collector hospedado. O servidor HTTP dele também precisa do [pacote de instrumentação correto](/browser/distributed-tracing#before-you-start) para ler o `traceparent`.

<h2 id="no-failed-requests-are-reported">
  Nenhuma requisição com falha é relatada
</h2>

Requisições à sua API falham, mas nenhum issue `HTTPError` ou `TimeoutError` aparece. Verifique se cada requisição corresponde a um padrão em `tracePropagationTargets`. Um padrão precisa de um host e um caminho: nem `/api/**` nem `api.example.com` sozinhos correspondem a nada. Algumas falhas nunca são relatadas:

* Uma requisição feita no modo `no-cors`.
* Uma resposta 4xx.
* Uma requisição que corresponde a `privacy.networkBlocklist`.
* Um timeout enquanto o dispositivo está offline.

Leia mais em [o que é relatado](/browser/distributed-tracing#what-is-reported).

<h2 id="network-breadcrumbs-have-no-timings">
  Breadcrumbs de rede sem medições de tempo
</h2>

A requisição era cross-origin e o servidor não enviou o cabeçalho `Timing-Allow-Origin`. Leia mais em [lendo breadcrumbs de rede](/browser/breadcrumbs#reading-network-breadcrumbs).

<h2 id="getting-help">
  Obtendo ajuda
</h2>

Inclua o nome da sua app, a versão do `@appsignal/browser` e o navegador e a versão em que você vê o problema. Fale com a gente pelos [nossos canais de suporte](/support), ou na nossa [comunidade no Discord](https://discord.gg/EjF6ykYx63) para feedback sobre a beta.


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