Solução de problemas do browser monitoring

​

Nenhum dado chega

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

​

Os erros chegam, as web vitals não

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.

​

Um erro está faltando

• 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 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. 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.
• Veio de um script em outro domínio. Leia a seção a seguir.

​

Erros de scripts cross-origin estão faltando

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.

​

Os backtraces estão minificados

Backtraces são resolvidos com 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.

​

Uma rota produz centenas de grupos de erro

O template de rota 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.

​

A navegação no lado do cliente não é relatada

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.

​

Requisições à API falham após ativar o distributed tracing

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.

​

Uma requisição com falha não mostra spans de back-end

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 para ler o traceparent.

​

Nenhuma requisição com falha é relatada

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.

​

Breadcrumbs de rede sem medições de tempo

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.

​

Obtendo ajuda

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, ou na nossa comunidade no Discord para feedback sobre a beta.