> ## 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.
# Browser Breadcrumbs
Browser monitoring ist ein Beta-Feature von [AppSignal Labs](/labs). Das Paket
`@appsignal/browser` wird unter dem `beta`-Tag auf npm veröffentlicht, und
seine Konfiguration und API können sich zwischen Beta-Releases noch ändern.
Teilen Sie Ihr Feedback in unserer
[Discord-Community](https://discord.gg/EjF6ykYx63).
Ein Breadcrumb ist ein Eintrag in einer zeitlich geordneten Spur dessen, was im Browser vor einem Fehler passiert ist. Einen Front-end-Bug allein aus einem Stacktrace zu rekonstruieren, ist oft Rätselraten. Er zeigt die vorherige Route und worauf der Nutzer geklickt hat. Er zeigt außerdem Requests sowie Warnungen und Fehler der Konsole.
Breadcrumbs werden automatisch nach `init()` erfasst. Bis zu 25 Breadcrumbs aus dem Fehlerkontext-Puffer reisen mit jedem gemeldeten Fehler, einschließlich eines Breadcrumbs für diesen Fehler selbst. Sie lesen sie im sample des Issues.
Was erfasst wird
Diese automatischen Kategorien können bei einem Fehlerbericht erscheinen:
| Kategorie | Aufgezeichnet |
| - | - |
| `navigation` | Die URL beim Start, danach jedes `pushState`, `replaceState`, `popstate` und `hashchange`, jeweils mit der vorherigen und der neuen URL. |
| `click` | Eine lesbare Bezeichnung für das Element, das der Nutzer ausgewählt hat, zum Beispiel `button "Submit"` oder `link "Dashboard"`. Auf 50 Zeichen gekürzt. Zeichnet außerdem auf, wo auf dem Bildschirm die Auswahl erfolgte. |
| `network` | Methode, URL, Status und Dauer für `fetch`- und `XMLHttpRequest`-Aufrufe, dazu das initiale Laden des Dokuments. Abgebrochene Requests werden ausgelassen. Enthält eine Aufschlüsselung der Resource Timings, wo der Browser eine bereitstellt. |
| `console` | Alles, was an `console.warn` und `console.error` geht, abgeschnitten nach 200 Zeichen. `console.log` bleibt unangetastet. |
| `long_task` | Jede Blockade des Main Threads von mehr als 50 ms, mit Skript-Zuordnung, wo der Browser sie bereitstellt. |
| `visibility` | Der Tab wurde verborgen oder sichtbar. |
| `error` | Jeder erfasste Fehler, sodass ein früherer Fehler in der Spur eines späteren auftaucht. |
Die [`breadcrumbs`-Optionen](/browser/configuration#breadcrumbs-network) können die Erfassung von `network`, `console`, `click` und `long_task` abschalten. `navigation`, `visibility` und `error` haben keinen eigenen Schalter.
Elemente benennen
Auswahl-Breadcrumbs beschreiben das Element so, wie eine Person es wiedererkennen würde, und nicht über seine Position auf der Seite. AppSignal sucht zuerst nach einem `data-breadcrumb`-Attribut. Andernfalls verwendet es den Elementtyp und den Text, etwa `button "Submit"`. Hilft auch das nicht, verwendet es Tag und ID, etwa `input#cvc`.
Wenn die automatische Bezeichnung nicht hilfreich ist oder der sichtbare Text etwas ist, das Sie lieber nicht senden möchten, setzen Sie eine eigene:
```html HTML theme={null}
```
Das Attribut wird am Element selbst oder an einem seiner Vorfahren gelesen, das Benennen eines Containers deckt also alles darin ab.
Eigene Breadcrumbs hinzufügen
Zeichnen Sie alles Weitere, das es wert ist, mit `addBreadcrumb()` auf:
```js JavaScript theme={null}
import { addBreadcrumb } from "@appsignal/browser";
addBreadcrumb({
category: "checkout",
message: "Payment method changed",
data: { from: "card", to: "ideal" },
});
```
| Option | Typ | Beschreibung |
| - | - | - |
| `category` | `string` | Eine Bezeichnung, unter der das Event gruppiert wird, zum Beispiel `checkout` oder `auth`. |
| `message` | `string` | Was passiert ist. |
| `data` | `object` | Optionale Metadaten als Schlüssel-Wert-Paare. |
Ihre eigenen Breadcrumbs reisen mit Fehlern mit, welche Kategorie Sie ihnen auch geben.
Was das SDK nicht automatisch erfasst
* **Request- und Response-Bodies.** Das SDK liest sie nicht aus Netzwerk-Aufrufen. Wenn ein Payload für das Debuggen wichtig ist, fügen Sie nur die benötigten Teile mit `addBreadcrumb()` hinzu.
* **Cookies.** Das SDK liest und schreibt keine.
* **Query-Parameter in den meisten vom SDK erzeugten URL-Feldern.** [`privacy.queryParamsAllowlist`](/browser/privacy#urls-and-query-parameters) entfernt sie standardmäßig aus Navigation- sowie `fetch`/`XMLHttpRequest`-Breadcrumbs. Der Breadcrumb für das initiale Laden des Dokuments ist eine Ausnahme.
* **Blockierte `fetch`- und `XMLHttpRequest`-Aufrufe.** Aufrufe, die auf [`privacy.networkBlocklist`](/browser/privacy#excluding-network-requests) passen, sowie Aufrufe an AppSignals eigenen Endpoint, hinterlassen keinen Breadcrumb. Sie werden auch nie als [fehlgeschlagene Requests](/browser/distributed-tracing#what-is-reported) gemeldet. Der Breadcrumb für das initiale Laden des Dokuments ist von der Blockliste nicht erfasst.
* **Text und Elemente, die Sie maskiert haben.** Mehr dazu unter [Seitenelemente maskieren und blockieren](/browser/privacy#masking-and-blocking-page-elements).
Um einzelne Breadcrumbs beim Aufzeichnen zu filtern oder zu redigieren, verwenden Sie [`beforeBreadcrumb`](/browser/privacy#filtering-errors-and-breadcrumbs).
Netzwerk-Breadcrumbs lesen
Ein Netzwerk-Breadcrumb liest sich als Methode, URL und Status, wann immer eine Response angekommen ist, einschließlich `404`- und `500`-Responses. Ein Suffix `(error)` bedeutet, dass keine Response angekommen ist. Die Ursache kann ein DNS-Fehler, eine abgewiesene Verbindung oder ein blockierter Request sein.
Ein Request, der einen `traceparent`-Header gesendet hat, zeichnet außerdem seine Trace-ID im Breadcrumb auf. Der empfangende Service muss [den Trace fortsetzen](/browser/distributed-tracing#before-you-start), damit Back-end-Spans unter dieser ID erscheinen.
Cross-Origin-Requests melden keine Aufschlüsselung der Zeiten, sofern der Server keinen `Timing-Allow-Origin`-Header sendet. Das ist eine Einschränkung des Browsers, nicht von AppSignal.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.