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

# Breadcrumbs do navegador

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

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.

<h2 id="what-is-collected">
  O que é coletado
</h2>

Estas categorias automáticas podem aparecer junto com um relatório de erro:

| Categoria | Registrado |
| - | - |
| `navigation` | A URL na inicialização e, em seguida, cada `pushState`, `replaceState`, `popstate` e `hashchange`, com a URL anterior e a nova. |
| `click` | Um rótulo legível para o elemento que o usuário selecionou, por exemplo `button "Submit"` ou `link "Dashboard"`. Encurtado para 50 caracteres. Também registra em que ponto da tela a seleção ocorreu. |
| `network` | Método, URL, status e duração para chamadas `fetch` e `XMLHttpRequest`, além do carregamento inicial do documento. Requisições canceladas são omitidas. Inclui um detalhamento dos resource timings quando o navegador expõe um. |
| `console` | Tudo que é enviado para `console.warn` e `console.error`, cortado após 200 caracteres. `console.log` não é tocado. |
| `long_task` | Qualquer bloqueio da thread principal maior que 50 ms, com atribuição de script quando o navegador a fornece. |
| `visibility` | A aba passou a ficar oculta ou visível. |
| `error` | Cada erro capturado, para que um erro anterior apareça no rastro de um posterior. |

As [opções `breadcrumbs`](/browser/configuration#breadcrumbs-network) podem desligar a coleta de `network`, `console`, `click` e `long_task`. `navigation`, `visibility` e `error` não têm um interruptor separado.

<h2 id="labeling-elements">
  Rotulando elementos
</h2>

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:

<CodeGroup>
  ```html HTML theme={null}
  <button data-breadcrumb="Checkout: confirm payment">Pay {total}</button>
  ```
</CodeGroup>

O atributo é lido no elemento ou em qualquer um de seus ancestrais, então rotular um contêiner cobre tudo dentro dele.

<h2 id="adding-your-own-breadcrumbs">
  Adicionando seus próprios breadcrumbs
</h2>

Registre qualquer outra coisa que valha a pena saber com `addBreadcrumb()`:

<CodeGroup>
  ```js JavaScript theme={null}
  import { addBreadcrumb } from "@appsignal/browser";

  addBreadcrumb({
    category: "checkout",
    message: "Payment method changed",
    data: { from: "card", to: "ideal" },
  });
  ```
</CodeGroup>

| Opção | Tipo | Descrição |
| - | - | - |
| `category` | `string` | Um rótulo para agrupar o evento, por exemplo `checkout` ou `auth`. |
| `message` | `string` | O que aconteceu. |
| `data` | `object` | Metadados opcionais em pares de chave e valor. |

Seus próprios breadcrumbs acompanham os erros, qualquer que seja a categoria que você lhes dê.

<h2 id="what-is-never-recorded">
  O que o SDK não captura automaticamente
</h2>

* **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`](/browser/privacy#urls-and-query-parameters) 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`](/browser/privacy#excluding-network-requests), e chamadas para o próprio endpoint do AppSignal, não deixam breadcrumb. Também nunca são relatadas como [requisições com falha](/browser/distributed-tracing#what-is-reported). 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](/browser/privacy#masking-and-blocking-page-elements).

Para filtrar ou ocultar breadcrumbs individuais no momento em que são registrados, use [`beforeBreadcrumb`](/browser/privacy#filtering-errors-and-breadcrumbs).

<h2 id="reading-network-breadcrumbs">
  Lendo breadcrumbs de rede
</h2>

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](/browser/distributed-tracing#before-you-start) 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.


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