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

# Konfigurationsoptionen für 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>

Übergeben Sie die Konfiguration als ein einzelnes Objekt an `init()`. Nur `key` ist erforderlich. Ein zweiter `init()`-Aufruf wird ignoriert, bis Sie `destroy()` aufrufen. Die meisten Anwendungen ändern Optionen in ihrem nächsten Build.

<CodeGroup>
  ```js appsignal.js theme={null}
  import { init } from "@appsignal/browser";

  init({
    key: "<YOUR_FRONTEND_API_KEY>",
    endpoint: "https://appsignal-endpoint.net",
    active: process.env.NODE_ENV === "production",
    appVersion: "<YOUR_APP_REVISION>",
    tracePropagationTargets: ["api.example.com/**"],
    errors: { sampleRate: 1.0 },
    breadcrumbs: { console: false },
    privacy: {
      queryParamsAllowlist: ["utm_*", "page"],
      networkBlocklist: ["api.stripe.com/**"],
      dom: { blockElement: ["#card-form"] },
    },
  });
  ```
</CodeGroup>

<h2 id="key">
  `key`
</h2>

* **Typ:** `string`
* **Erforderlich**

Der [Front-end API key](/browser/installation#find-your-front-end-api-key) Ihrer Anwendung, der dafür vorgesehen ist, öffentlich sichtbar zu sein. Es ist keiner der Push keys, die Ihre Back-end-Integrationen verwenden.

<h2 id="endpoint">
  `endpoint`
</h2>

* **Typ:** `string`
* **Standardwert:** die Origin der aktuellen Seite

Wohin Daten gesendet werden. Setzen Sie es auf `https://appsignal-endpoint.net`. Wenn Sie AppSignal-Traffic über Ihre Domain proxyen, lassen Sie es ungesetzt, um die aktuelle Origin zu verwenden. Ein abschließender Schrägstrich wird entfernt.

Fehler gehen an `POST /ingest/browser/errors`, web vitals an `POST /ingest/browser`. Der Schlüssel reist als Query-Parameter `api_key` mit, was wissenswert ist, wenn Sie eine `connect-src`-Allowlist pflegen.

<h2 id="active">
  `active`
</h2>

* **Typ:** `boolean`
* **Standardwert:** `true`

Der zentrale Ein/Aus-Schalter für den ersten `init()`-Aufruf. Bei `false` kehrt die Initialisierung zurück, ohne die Seite zu ändern, Timer zu starten oder Requests zu stellen. Ein zweiter `init()`-Aufruf kann ein bereits laufendes SDK nicht abschalten. Jede andere Funktion tut ebenfalls nichts, Sie können sie also überall aufrufen, ohne vorher zu prüfen.

Setzen Sie das aus Ihrer Build-Umgebung, damit Entwicklung, Tests und CI-Läufe nichts senden:

<CodeGroup>
  ```js JavaScript theme={null}
  init({
    key: "<YOUR_FRONTEND_API_KEY>",
    active: process.env.NODE_ENV === "production", // or import.meta.env.PROD
  });
  ```
</CodeGroup>

<h2 id="appversion">
  `appVersion`
</h2>

* **Typ:** `string`

Der Release-Tag, Commit-SHA oder die Deploy-ID des laufenden Builds. Es taggt Fehler und web vitals für die Versionsfilter der Browser-Ansichten. Es wählt außerdem die [sourcemaps](/browser/error-tracking#sourcemaps) für Backtraces. Mehr dazu in unserem [Leitfaden zu Deploy-Markern](/application/markers/deploy-markers).

<h2 id="servicename">
  `serviceName`
</h2>

* **Typ:** `string`
* **Standardwert:** `"Browser"`

AppSignal verwendet diesen Wert als Servicename für Browser-Fehler in einem Trace. Zum Beispiel zeigt `serviceName: "Checkout UI"` in der Trace-Timeline `Checkout UI` statt des Standards `Browser`. Verwenden Sie für jedes von Ihnen überwachte Front-end einen eigenen Wert. Das SDK sendet ihn mit jeder Fehlermeldung. Siehe [Verteiltes Tracing für Browser](/browser/distributed-tracing).

<h2 id="tracepropagationtargets">
  `tracePropagationTargets`
</h2>

* **Typ:** `string[]`
* **Standardwert:** `[]`

Verwenden Sie diese Liste, um festzulegen, welche API-Requests einen `traceparent`-Header tragen. Jedes Muster braucht einen Host und einen Pfad. Zum Beispiel trifft `["api.example.com/**"]` auf jeden Pfad unter `api.example.com` zu. `api.example.com` allein trifft auf nichts zu.

Wenn ein passender Request mit einer 5xx-Antwort antwortet oder einen Timeout auslöst, meldet das SDK einen Browser-Fehler. Um Back-end-Spans in dessen Trace zu sehen, [instrumentieren Sie den empfangenden Service](/browser/distributed-tracing#before-you-start), damit er den Header liest.

Die leere Standardliste fügt keine `traceparent`-Header hinzu. Siehe [Verteiltes Tracing für Browser](/browser/distributed-tracing) für Einrichtung und Beispiele.

<h2 id="beforeerror">
  `beforeError`
</h2>

* **Typ:** `(event: IncomingError) => IncomingError | null`

Wird für Fehler aufgerufen, die Sampling und das globale Rate-Limit passiert haben, bevor ein Fehler-Breadcrumb oder -Report erstellt wird. Geben Sie `null` zurück, um den Fehler zu verwerfen, oder verändern Sie seine Felder, um sie zu redigieren. Mehr dazu unter [Fehler filtern](/browser/privacy#filtering-errors-and-breadcrumbs).

Dieser Callback muss synchron sein. Ein zurückgegebenes Promise wird erkannt, als `console.error` geloggt, und der Fehler wird verworfen.

<h2 id="beforebreadcrumb">
  `beforeBreadcrumb`
</h2>

* **Typ:** `(breadcrumb: Breadcrumb) => Breadcrumb | null`

Läuft einmal für jeden Breadcrumb, während er aufgezeichnet wird. Geben Sie `null` zurück, um ihn zu verwerfen, oder ändern Sie `message` und `data`, um sensiblen Text zu entfernen. Das läuft häufig, halten Sie es also schnell.

<h2 id="errors-enabled">
  `errors.enabled`
</h2>

* **Typ:** `boolean`
* **Standardwert:** `true`

Ob Fehler überhaupt gemeldet werden. Bei `false` hört das SDK weiterhin auf sie, sendet aber nichts.

<h2 id="errors-samplerate">
  `errors.sampleRate`
</h2>

* **Typ:** `number` zwischen `0` und `1`
* **Standardwert:** `1.0`

Welcher Anteil der Fehler gemeldet wird. Die Entscheidung fällt für jeden Fehler zufällig, `0.25` meldet also etwa ein Viertel von ihnen. Das passiert vor den [Rate-Limits](/browser/error-tracking#rate-limits) und bevor `beforeError` läuft.

<h2 id="breadcrumbs-network">
  `breadcrumbs.network`
</h2>

* **Typ:** `boolean`
* **Standardwert:** `true`

Zeichnet Breadcrumbs für `fetch`- und `XMLHttpRequest`-Aufrufe auf, mit Ausnahme abgebrochener Requests. Diese Option steuert nicht den Breadcrumb für das initiale Laden des Dokuments. Das SDK liest keine Request- oder Response-Bodies.

<h2 id="breadcrumbs-console">
  `breadcrumbs.console`
</h2>

* **Typ:** `boolean`
* **Standardwert:** `true`

Zeichnet einen Breadcrumb für `console.warn` und `console.error` auf. `console.log` wird nicht gepatcht.

<h2 id="breadcrumbs-clicks">
  `breadcrumbs.clicks`
</h2>

* **Typ:** `boolean`
* **Standardwert:** `true`

Zeichnet einen Breadcrumb auf, wenn ein Nutzer ein Element auswählt.

<h2 id="breadcrumbs-longtasks">
  `breadcrumbs.longTasks`
</h2>

* **Typ:** `boolean`
* **Standardwert:** `true`

Zeichnet einen Breadcrumb auf, wenn der Main Thread länger als 50 ms blockiert ist.

<h2 id="privacy-queryparamsallowlist">
  `privacy.queryParamsAllowlist`
</h2>

* **Typ:** `string[]`
* **Standardwert:** `[]`

Die Query-Parameter, die in aufgezeichneten URLs erhalten bleiben. Verwenden Sie `*`, um mehrere Namen auf einmal zu treffen, `"utm_*"` behält also jeden UTM-Parameter. Die Standardliste ist leer, wodurch alle entfernt werden. Mehr dazu unter [Datenschutz und Filtern](/browser/privacy#urls-and-query-parameters).

<h2 id="privacy-networkblocklist">
  `privacy.networkBlocklist`
</h2>

* **Typ:** `string[]`
* **Standardwert:** `[]`

Glob-URL-Muster für `fetch`- und `XMLHttpRequest`-Aufrufe, die nicht als Breadcrumbs oder [fehlgeschlagene Request-Fehler](/browser/distributed-tracing#what-is-reported) aufgezeichnet werden. Abgeglichen gegen Host und Pfad. Die Aufrufe finden weiterhin statt. Diese Option filtert nicht den Breadcrumb für das initiale Laden des Dokuments.

<h2 id="privacy-dom-masktext">
  `privacy.dom.maskText`
</h2>

* **Typ:** `string[]`
* **Standardwert:** `[]`

CSS-Selektoren, deren Textinhalt in `click`-Breadcrumbs durch `[masked]` ersetzt wird. Der Breadcrumb wird weiterhin aufgezeichnet, Sie behalten also die Information, dass eine Interaktion stattgefunden hat.

<h2 id="privacy-dom-blockelement">
  `privacy.dom.blockElement`
</h2>

* **Typ:** `string[]`
* **Standardwert:** `[]`

CSS-Selektoren, deren Interaktionen überhaupt nicht aufgezeichnet werden. Verwenden Sie das für Kartenformulare und andere Felder, die niemals auftauchen sollen.

<h2 id="api-reference">
  API-Referenz
</h2>

Außer `init()` tut keine dieser Funktionen etwas, bis das SDK mit `active: true` initialisiert wurde.

| Funktion | Beschreibung |
| - | - |
| `init(config)` | Startet die Erfassung. Einmal aufrufen, so früh wie möglich. Weitere Aufrufe werden ignoriert. |
| `captureError(error)` | Meldet einen abgefangenen Fehler. Das optionale Context-Argument ist in dieser Betaphase nicht in gewöhnlichen Fehlermeldungen enthalten. Mehr dazu unter [error tracking](/browser/error-tracking#reporting-errors-manually). |
| `addBreadcrumb({ category, message, data? })` | Fügt der Zeitleiste einen eigenen Breadcrumb hinzu. |
| `setRouteTemplate(template)` | Gibt die Route an, auf der der Nutzer ist, zum Beispiel `/users/:id`. Übergeben Sie `null`, um sie zu leeren. |
| `setTags(tags)` | Hängt Tags an jeden von jetzt an gemeldeten Fehler. Wird mit bestehenden Tags zusammengeführt. |
| `clearTags()` | Entfernt alle Tags. Tags überdauern ein Neuladen, rufen Sie das also beim Abmelden auf. |
| `flush()` | Sendet gepufferte web vitals sofort. |
| `destroy()` | Sendet ausstehende Daten und stoppt die Erfassung. Ein weiterer `init()`-Aufruf kann sie wieder starten, auch auf derselben Seite. |


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