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.
Um breadcrumb é uma entrada em um rastro ordenado no tempo do que aconteceu no navegador antes de um erro. Reconstruir um bug de front-end apenas a partir de um stack trace costuma ser adivinhação. Ele mostra a rota anterior e no que o usuário clicou. Também mostra requisições e avisos ou erros do console. Breadcrumbs são coletados automaticamente após init(). Até 25 breadcrumbs do buffer de contexto de erro acompanham cada erro relatado, incluindo um breadcrumb para esse próprio erro. Você os lê no sample da issue.

​
O que é coletado

Estas categorias automáticas podem aparecer junto com um relatório de erro: As opções breadcrumbs podem desligar a coleta de network, console, click e long_task. navigation, visibility e error não têm um interruptor separado.

​
Rotulando elementos

Breadcrumbs de seleção descrevem o elemento como uma pessoa o reconheceria, e não pela sua posição na página. O AppSignal primeiro procura um atributo data-breadcrumb. Caso contrário, usa o tipo do elemento e seu texto, como button "Submit". Se nada ajudar, usa a tag e o ID, como input#cvc. Quando o rótulo automático não ajuda, ou quando o texto visível é algo que você prefere não enviar, defina o seu próprio:
O atributo é lido no elemento ou em qualquer um de seus ancestrais, então rotular um contêiner cobre tudo dentro dele.

​
Adicionando seus próprios breadcrumbs

Registre qualquer outra coisa que valha a pena saber com addBreadcrumb():
Seus próprios breadcrumbs acompanham os erros, qualquer que seja a categoria que você lhes dê.

​
O que o SDK não captura automaticamente

  • Corpos de requisição e resposta. O SDK não os lê nas chamadas de rede. Se um payload importa para depurar, adicione apenas as partes de que você precisa com addBreadcrumb().
  • Cookies. O SDK não lê nem escreve nenhum.
  • Parâmetros de query na maioria dos campos de URL criados pelo SDK. privacy.queryParamsAllowlist os remove por padrão dos breadcrumbs de navigation e de fetch/XMLHttpRequest. O breadcrumb do carregamento inicial do documento é uma exceção.
  • Chamadas fetch e XMLHttpRequest bloqueadas. Chamadas que correspondem a privacy.networkBlocklist, e chamadas para o próprio endpoint do AppSignal, não deixam breadcrumb. Também nunca são relatadas como requisições com falha. O breadcrumb do carregamento inicial do documento não é coberto pela blocklist.
  • Texto e elementos que você mascarou. Leia mais em mascarando e bloqueando elementos da página.
Para filtrar ou ocultar breadcrumbs individuais no momento em que são registrados, use beforeBreadcrumb.

​
Lendo breadcrumbs de rede

Um breadcrumb de rede se lê como método, URL e status sempre que uma resposta chegou, incluindo respostas 404 e 500. Um sufixo (error) significa que nenhuma resposta chegou. A causa pode ser uma falha de DNS, uma conexão recusada ou uma requisição bloqueada. Uma requisição que enviou um header traceparent também registra seu trace ID no breadcrumb. O serviço que a recebe precisa continuar o trace para que os spans de back-end apareçam sob esse ID. Requisições cross-origin não relatam detalhamento de tempos, a menos que o servidor envie um cabeçalho Timing-Allow-Origin. Essa é uma restrição do navegador, não do AppSignal.