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.
Browser monitoring meldet Front-end-Fehler mit den neuesten Breadcrumbs und web vitals von echten Nutzern. Es ist ein eigener Bereich in AppSignal, neben den traces, Fehlern und Metriken, die Ihre Back-end-Integration meldet. Die Datenerfassung übernimmt @appsignal/browser, ein eigenständiges Paket, das von keinem anderen AppSignal-Paket abhängt.

​
Was erfasst wird

Errors

Nicht abgefangene Exceptions und nicht behandelte Promise-Rejections, mit verfügbaren Stacktraces, Tags und der Route, auf der sich der Nutzer befand.

Breadcrumbs

Navigation, Auswahlen, Netzwerk-Requests sowie Konsolenwarnungen und -fehler vor jedem Fehler. Wird automatisch nach init() erfasst.

Web vitals

LCP, INP, CLS, FCP und TTFB von echten Nutzern, aggregiert pro Route und über Releases hinweg vergleichbar.
Um Browser- und Back-end-Arbeit in einem trace zu sehen, konfigurieren Sie beide Seiten. Das Browser-SDK sendet den trace-Kontext. Der empfangende API-Dienst braucht Instrumentierung, um ihn zu lesen und spans zu melden. Eine passende 5xx-Response oder ein Timeout kann trotzdem einen Browser-Fehler erzeugen. Ohne Back-end-Instrumentierung hat dessen trace keine Back-end-spans.

​
Wo Sie es in AppSignal finden

Der Browser-Bereich Ihrer Anwendung hat zwei Ansichten: Front-end-Fehler werden an den browser-namespace gemeldet, wodurch sie aus Ihren Back-end-Fehlerlisten und Benachrichtigungseinstellungen herausbleiben. Was browser monitoring als Feature abdeckt, beschreibt die Übersicht zu browser monitoring.

​
Verhältnis zu AppSignal für JavaScript

Wenn Sie @appsignal/javascript verwenden, folgen Sie beim Wechsel zu @appsignal/browser dem Migrationsleitfaden. Das neue SDK hat eine andere API. Es erfasst Breadcrumbs und web vitals nach init() und meldet Fehler an den browser-namespace.

​
Voraussetzungen

  • Ein Browser, der ES2020 unterstützt. Das Paket zielt auf ES2020 ab und liefert keine Polyfills mit.
  • CLS und INP benötigen die Performance-Entry-Typen layout-shift beziehungsweise event-timing des Browsers. Das SDK überspringt die jeweilige Metrik, wenn deren Entry-Typ nicht verfügbar ist.
Optional: React 16.8 oder neuer, wenn Sie die Error Boundary verwenden möchten, die das Paket mitbringt.

​
Nächste Schritte

Ihr Snippet generieren

Lassen Sie AppSignal den Installationscode mit Ihrem bereits eingetragenen Front-end API key erstellen.

Das Paket installieren

Fügen Sie @appsignal/browser zu Ihrer Anwendung hinzu und beginnen Sie mit dem Melden von Daten.

Konfigurationsoptionen

Jede Option, ihr Typ und ihr Standardwert.

Filtern, was Sie senden

URLs bereinigen, Elemente maskieren und die Erfassung an die Zustimmung der Nutzer binden.

Von AppSignal für JavaScript migrieren

Die alte API der neuen zuordnen.