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

Bij het debuggen van een probleem in een UI kan het handig zijn om te weten welke gebeurtenissen hebben plaatsgevonden in de aanloop naar de fout. Breadcrumbs vormen een chronologisch geordende lijst van gebeurtenissen in uw applicatie, die wordt gevuld terwijl een gebruiker uw applicatie doorloopt en samen met een `Span` wordt verzonden wanneer een fout door de library wordt opgevangen. Hiermee kunt u informatie verzamelen die nuttig is om lastig te debuggen fouten te reproduceren door het pad van een gebruiker door uw applicatie opnieuw te volgen.

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

## Gebruik

Standaard worden er geen breadcrumbs bijgehouden, maar u kunt heel eenvoudig zelf breadcrumbs registreren. U kunt ook een van onze [breadcrumb-plug-ins](#plugins) gebruiken om bepaalde typen breadcrumbs automatisch te verzamelen.

Waar dan ook een interessante gebeurtenis, bewerking of toestandsverandering in uw app plaatsvindt, kunt u op de volgende manier een breadcrumb achterlaten:

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

Wanneer een fout wordt gegooid en opgevangen door de AppSignal-library, of wanneer een `Span` aan `appsignal.send()` wordt doorgegeven, wordt de huidige lijst met breadcrumbs aan de huidige `Span` toegevoegd en naar de server verzonden. De lijst met breadcrumbs wordt vervolgens geleegd.

## Opties voor breadcrumbs

| Optie    | Type                     | Beschrijving                                                           |
| -------- | ------------------------ | ---------------------------------------------------------------------- |
| category | String                   | Categorie waaronder de gebeurtenis wordt gelabeld                      |
| action   | String                   | Contextuele informatie met betrekking tot de gebeurtenis               |
| message  | String                   | (optioneel) Een logbericht of andere tekst om naar AppSignal te sturen |
| metadata | `Object<String, String>` | (optioneel) Een object met metadata over de gebeurtenis                |

## Plug-ins

Er is een aantal plug-ins beschikbaar om breadcrumbs automatisch te verzamelen, en er zullen er in de loop van de tijd meer worden toegevoegd:

* [`@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)

Heeft u een goed idee voor een breadcrumbs-plug-in? Neem contact met ons op of [open een issue op GitHub](https://github.com/appsignal/appsignal-javascript/issues)!