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

# AppSignal für Browser

<Note>
  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).
</Note>

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.

<h2 id="what-it-collects">
  Was erfasst wird
</h2>

<CardGroup cols={3}>
  <Card title="Errors" icon="bug" href="/browser/error-tracking">
    Nicht abgefangene Exceptions und nicht behandelte Promise-Rejections, mit verfügbaren Stacktraces, Tags und der Route, auf der sich der Nutzer befand.
  </Card>

  <Card title="Breadcrumbs" icon="shoe-prints" href="/browser/breadcrumbs">
    Navigation, Auswahlen, Netzwerk-Requests sowie Konsolenwarnungen und -fehler vor jedem Fehler. Wird automatisch nach `init()` erfasst.
  </Card>

  <Card title="Web vitals" icon="gauge" href="/browser/web-vitals">
    LCP, INP, CLS, FCP und TTFB von echten Nutzern, aggregiert pro Route und über Releases hinweg vergleichbar.
  </Card>
</CardGroup>

Um Browser- und Back-end-Arbeit in einem [trace](/browser/distributed-tracing) 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.

<h2 id="where-to-find-it-in-appsignal">
  Wo Sie es in AppSignal finden
</h2>

Der Browser-Bereich Ihrer Anwendung hat zwei Ansichten:

* **Errors** gruppiert Front-end-Fehler zu Issues, die Sie triagieren können. Mehr dazu unter [Front-end-Fehler in AppSignal](/browser-monitoring/errors).
* **Performance** fasst die fünf web vitals zusammen und schlüsselt sie pro Route auf. Mehr dazu unter [Front-end-Performance in AppSignal](/browser-monitoring/performance).

Front-end-Fehler werden an den `browser`-[namespace](/guides/namespaces) gemeldet, wodurch sie aus Ihren Back-end-Fehlerlisten und Benachrichtigungseinstellungen herausbleiben. Was browser monitoring als Feature abdeckt, beschreibt die [Übersicht zu browser monitoring](/browser-monitoring).

<h2 id="relation-to-appsignal-for-javascript">
  Verhältnis zu AppSignal für JavaScript
</h2>

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

<h2 id="requirements">
  Voraussetzungen
</h2>

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

<h2 id="next-steps">
  Nächste Schritte
</h2>

<CardGroup cols={2}>
  <Card title="Ihr Snippet generieren" icon="wand-magic-sparkles" href="https://appsignal.com/redirect-to/organization?to=sites/new/browser">
    Lassen Sie AppSignal den Installationscode mit Ihrem bereits eingetragenen Front-end API key erstellen.
  </Card>

  <Card title="Das Paket installieren" icon="download" href="/browser/installation">
    Fügen Sie `@appsignal/browser` zu Ihrer Anwendung hinzu und beginnen Sie mit dem Melden von Daten.
  </Card>

  <Card title="Konfigurationsoptionen" icon="sliders" href="/browser/configuration">
    Jede Option, ihr Typ und ihr Standardwert.
  </Card>

  <Card title="Filtern, was Sie senden" icon="shield" href="/browser/privacy">
    URLs bereinigen, Elemente maskieren und die Erfassung an die Zustimmung der Nutzer binden.
  </Card>

  <Card title="Von AppSignal für JavaScript migrieren" icon="arrow-right-arrow-left" href="/browser/migration">
    Die alte API der neuen zuordnen.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.