Skip to main content
Browser monitoring ist ein Beta-Feature von AppSignal 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.
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: Die breadcrumbs-Optionen 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:
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:
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 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 passen, sowie Aufrufe an AppSignals eigenen Endpoint, hinterlassen keinen Breadcrumb. Sie werden auch nie als fehlgeschlagene Requests 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.
Um einzelne Breadcrumbs beim Aufzeichnen zu filtern oder zu redigieren, verwenden Sie beforeBreadcrumb.

​
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, 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.