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 aktuellen Breadcrumbs und web vitals von echten Nutzern. Ihre Back-end-Telemetrie kann Fragen wie diese nicht beantworten:
  • Nach einem Deploy stoßen einige Nutzer auf Failed to fetch dynamically imported module, während Ihre eigenen Tests sauber bleiben. Welches Release hat das eingeführt, und was hat der Nutzer dabei getan?
  • Ihre traces zeigen, dass der Server in 80 ms antwortet, aber Nutzer sagen weiterhin, das dashboard fühle sich langsam an. Geht die Zeit irgendwo im Browser verloren?
  • Sie haben gestern eine Änderung an Ihrem JavaScript-Bundle ausgeliefert. Sind die Seiten, auf denen Ihre Nutzer die meiste Zeit verbringen, langsamer geworden?
Browser monitoring ist ein eigener Bereich Ihrer Anwendung in AppSignal, mit zwei Ansichten:
  • Errors gruppiert Front-end-Fehler zu Issues, die Sie triagieren, zuweisen und für die Sie sich benachrichtigen lassen können.
  • Performance meldet web vitals pro Route, damit Sie Releases vergleichen und die Seiten finden, die Arbeit brauchen.

​
Was das SDK erfasst

Browser monitoring wird von AppSignal für Browser gespeist, dem Paket @appsignal/browser, das Sie Ihrem Front end hinzufügen. Nach der Initialisierung erfasst es ohne weitere Einrichtung drei Dinge:
  • Errors umfassen nicht abgefangene JavaScript-Fehler und unbehandelte abgelehnte Promises. Reports enthalten einen Stacktrace, sofern vorhanden, und alle Tags, die Sie gesetzt haben.
  • Breadcrumbs zeigen aktuelle Navigation, Klicks, Netzwerk-Requests sowie Warnungen und Fehler aus der Konsole vor einem Fehler.
  • Web vitals sind fünf Messwerte dafür, wie sich die Seite bei der Nutzung anfühlt. Wie lange sie zum Laden braucht, wie schnell sie reagiert und ob das Layout beim Laden umherspringt.
Die SDK-Dokumentation beschreibt Installation und Konfiguration und was jeder dieser Punkte genau enthält. Dieser Abschnitt beschreibt, was AppSignal damit macht.

​
Wie es sich zu Ihren Back-end-Fehlern verhält

Front-end-Fehler gehen an den browser-namespace. Das hält sie getrennt von Back-end-Fehlerlisten und Benachrichtigungseinstellungen. Der Browser-Bereich bietet Ihnen eine eigene Ansicht für Front-end-Fehler und -Performance. Das sind reguläre AppSignal-Issues. Sie können sie gruppieren, triagieren und sich darüber benachrichtigen lassen. Web vitals sind getrennt von Ihren Back-end-Daten zu Performance und Tracing. Ein Browser misst, wie lange eine Seite gebraucht hat, um nutzbar zu werden. Ein trace misst, was Ihr Server getan hat. Wenn dieselbe Route in beiden langsam ist, sehen Sie ein Problem von zwei Seiten.

​
Zwei Einstellungen, die Sie richtig setzen sollten

Diese beiden Entscheidungen bestimmen, wie nützlich die Daten sind:
  • Melden Sie das Route-Template. Übergeben Sie /orders/:id statt /orders/1042. Fehler verwenden den rohen Pfad, wenn Sie kein Template setzen, wodurch sich ein Bug in viele Issues aufteilen kann. Für web vitals leitet der Processor ein angenähertes Template ab, aber das Muster Ihres Routers ist zuverlässiger. Mehr dazu unter Die aktuelle Route melden.
  • Setzen Sie eine App-Version. Beide Ansichten können nach der Version filtern, die die Daten gemeldet hat. So erkennen Sie, ob ein Release etwas verschlechtert hat. Mehr dazu unter appVersion.
Die vollständige Liste dessen, was aufgezeichnet wird, und wie Sie Kategorien abschalten, finden Sie auf der Breadcrumbs-Seite.