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

Ao depurar um problema em uma UI, pode ser útil saber quais eventos ocorreram antes do erro ser lançado. Breadcrumbs são uma lista de eventos da sua aplicação ordenada por tempo, que é preenchida conforme o usuário navega pela aplicação, e é enviada junto com um `Span` sempre que um erro é capturado pela biblioteca. Isso permite que você reúna informações úteis para reproduzir erros difíceis de depurar, refazendo o caminho do usuário pela aplicação.

<img src="https://mintcdn.com/appsignal-715f5a51/nF8c1Rwq1cS7b5hg/assets/images/screenshots/frontend/breadcrumbs.svg?fit=max&auto=format&n=nF8c1Rwq1cS7b5hg&q=85&s=1f7cb85f6a8662c46a42a3aa90340eb4" alt="Breadcrumbs" width="648" height="366" data-path="assets/images/screenshots/frontend/breadcrumbs.svg" />

## Uso

Por padrão, nenhum breadcrumb é rastreado, mas é muito fácil rastrear os seus. Como alternativa, você pode usar um dos nossos [plugins de breadcrumbs](#plugins) para coletar automaticamente alguns tipos de breadcrumbs.

Sempre que um evento, operação ou mudança de estado interessante ocorrer na sua aplicação, você pode deixar um breadcrumb assim:

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

  const appsignal = new Appsignal({
    key: "YOUR FRONTEND API KEY",
  });

  appsignal.addBreadcrumb({
    category: "", // e.g. "UI", "Network", "Navigation", "Console"
    action: "", // e.g "The user clicked a button", "HTTP 500 from http://blablabla.com"
    metadata: {}, // key/value metadata in <String, String> format
  });
  ```
</CodeGroup>

Quando um erro é lançado e capturado pela biblioteca AppSignal, ou um `Span` é passado para `appsignal.send()`, a lista atual de breadcrumbs é adicionada ao `Span` atual e enviada para o servidor. A lista de breadcrumbs é então esvaziada.

## Opções de breadcrumb

| Opção    | Tipo                     | Descrição                                                               |
| -------- | ------------------------ | ----------------------------------------------------------------------- |
| category | String                   | Categoria sob a qual rotular o evento                                   |
| action   | String                   | Informações contextuais relacionadas ao evento                          |
| message  | String                   | (opcional) Uma mensagem de log ou outra string para enviar ao AppSignal |
| metadata | `Object<String, String>` | (opcional) Um objeto de metadados relacionado ao evento                 |

## Plugins

Há vários plugins disponíveis para habilitar a coleta automática de breadcrumbs, e mais serão adicionados com o tempo:

* [`@appsignal/plugin-breadcrumbs-console`](https://github.com/appsignal/appsignal-javascript/tree/develop/packages/plugin-breadcrumbs-console)
* [`@appsignal/plugin-breadcrumbs-network`](https://github.com/appsignal/appsignal-javascript/tree/develop/packages/plugin-breadcrumbs-network)

Tem uma boa ideia para um plugin de breadcrumbs? Entre em contato conosco ou [abra uma issue no GitHub](https://github.com/appsignal/appsignal-javascript/issues)!