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

# Browser error tracking

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

Sobald `init()` gelaufen ist, meldet AppSignal für Browser nicht abgefangene Fehler von selbst. Es gibt nichts zu umwickeln und keinen Handler zu registrieren.

Es hört auf zwei Dinge am `window` der Hauptseite:

* Fehler, die Ihr Code auslöst und nie abfängt, über das `error`-Event.
* Promises, die fehlschlagen, ohne dass etwas den Fehler behandelt, über das `unhandledrejection`-Event.

Das SDK beginnt mit dem Senden jedes Fehlers, sobald er erfasst wird, ohne auf einen Web-Vitals-Batch zu warten. Die Zustellung hängt weiterhin von Browser und Netzwerk ab.

<h2 id="what-is-reported">
  Was gemeldet wird
</h2>

* **Fehlername und Meldung.** Die Art des Fehlers, zum Beispiel `TypeError`, und die Meldung, mit der er kam.
* **Backtrace.** Der Stacktrace, eine Zeile pro Frame. Leer, wenn der Browser keinen liefert.
* **Action.** Die Route, auf der der Fehler aufgetreten ist. Fehler werden danach gruppiert.
* **Revision.** Die von Ihnen gesetzte `appVersion`. Wird verwendet, um nach Version zu filtern und die richtigen sourcemaps zu finden.
* **Tags.** Alles, was Sie mit `setTags()` gesetzt haben.
* **Dienstname.** Der von Ihnen gesetzte `serviceName`, oder `Browser`. Er kennzeichnet das Frontend unter den Services eines Trace.
* **Breadcrumbs.** Bis zu 25 aktuelle [Breadcrumbs](/browser/breadcrumbs), die den Fehler erklären helfen.
* **URL und User Agent.** Die Seite, auf der der Fehler aufgetreten ist, mit Query-Parametern, die gemäß Ihrer [Allowlist](/browser/privacy#urls-and-query-parameters) entfernt wurden, und der User Agent des Browsers.

Ein abgelehntes Promise kann einen anderen Wert als einen `Error` enthalten. Das SDK wandelt diesen Wert nach Möglichkeit in eine Fehlermeldung um.

Fehler werden an den `browser`-[namespace](/guides/namespaces) gemeldet, wodurch sie von Ihren Back-end-Fehlern und deren Benachrichtigungseinstellungen getrennt bleiben.

<h2 id="how-errors-are-grouped">
  Wie Fehler gruppiert werden
</h2>

Fehler gruppieren sich nach Action. Das ist das Template, das mit `setRouteTemplate()` gesetzt wurde, oder der rohe Seitenpfad, wenn keines gesetzt wurde.

Ein Template anzugeben verhindert, dass eine Route voller IDs in eine Fehlergruppe pro ID zersplittert:

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

  // Every error on this route now groups under "/orders/:id"
  setRouteTemplate("/orders/:id");
  ```
</CodeGroup>

Rufen Sie es bei jeder Router-Navigation auf. Es ist derselbe Wert, dem [web vitals zugeordnet werden](/browser/web-vitals#how-values-are-attributed-to-routes), ein Aufruf deckt also beides ab.

<h2 id="reporting-errors-manually">
  Fehler manuell melden
</h2>

Verwenden Sie `captureError()` für Fehler, die Sie selbst abfangen. Es läuft durch dieselbe Pipeline wie ein nicht abgefangener Fehler, einschließlich Breadcrumbs, Tags, sampling und `beforeError`:

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

  try {
    await submitOrder(order);
  } catch (error) {
    captureError(error);
  }
  ```
</CodeGroup>

Das aktuelle SDK akzeptiert ein zweites Kontext-Argument, nimmt es aber nicht in gewöhnliche Fehlerberichte auf. Verwenden Sie [`setTags()`](#tags) für Werte, die bei nachfolgenden Fehlern erscheinen sollen.

React-Anwendungen können Render-Fehler mit der [Error Boundary](/browser/react) abfangen, statt Komponenten von Hand zu umwickeln.

<h2 id="failed-requests">
  Fehlgeschlagene Requests
</h2>

Mit gesetztem [`tracePropagationTargets`](/browser/configuration#tracepropagationtargets) wird ein Request an Ihre API, der mit 5xx antwortet oder in ein Timeout läuft, eigenständig gemeldet. Er kommt als `HTTPError` oder `TimeoutError` an und trägt die Trace-ID, die der Request an das Back-end gesendet hat. Wenn das Back-end den Trace fortgesetzt hat, erscheinen dessen Spans in der Trace-Zeitleiste unterhalb des Browser-Fehlers. Mehr dazu unter [verteiltes Tracing für Browser](/browser/distributed-tracing).

<h2 id="tags">
  Tags
</h2>

Tags sind String-Schlüssel-Wert-Paare, die von diesem Punkt an jedem gemeldeten Fehler angehängt werden. Nach ihnen filtern und suchen Sie Fehler in AppSignal:

<CodeGroup>
  ```js JavaScript theme={null}
  import { setTags, clearTags } from "@appsignal/browser";

  // After authentication, once the values are known
  setTags({ plan: user.plan, org_id: user.orgId });

  // On sign-out. Tags survive a reload, so clear them explicitly
  clearTags();
  ```
</CodeGroup>

Jeder Aufruf ergänzt die bereits gesetzten Tags, statt sie zu ersetzen. Werte werden zu Text. Ein leerer Wert entfernt das jeweilige Tag. Sie können bis zu 32 Tags gleichzeitig behalten; das älteste wird bei Bedarf entfernt. Lange Werte werden beim Eingang auf 256 Bytes gekürzt. Mehr dazu in unserem [Leitfaden zum Tagging](/application/tagging).

Einige Tag-Namen können mehr als filtern. Die Tags `country_code`, `country` und `browser` erzeugen [Attributverteilungen](/guides/tagging/attribute-distributions). Jedes Tag lässt sich mit [Link-Templates](/application/link-templates) in einen Link verwandeln.

<h2 id="rate-limits">
  Rate-Limits
</h2>

Eine Seite, die in einer Schleife feststeckt, kann tausende Fehler pro Sekunde auslösen. Zwei Limits verhindern, dass das SDK zu dem Problem wird, das es melden soll:

* **Derselbe Fehler immer wieder.** Die Meldung und die erste Zeile des Stacktrace bestimmen, ob zwei Fehler Wiederholungen sind. AppSignal meldet ihn höchstens fünfmal alle 10 Sekunden.
* **Zu viele Fehler auf einmal.** Insgesamt werden nicht mehr als 100 Fehler alle 10 Sekunden gemeldet. Das fängt eine Seite ab, die viele *verschiedene* Fehler auslöst, was dem ersten Limit entgehen würde.

Wenn Fehler verloren gehen, während sich eine Seite schlecht verhält, liegt es an einem dieser beiden. Um absichtlich weniger Fehler zu senden, setzen Sie stattdessen [`errors.sampleRate`](/browser/configuration#errors-samplerate).

<h2 id="sourcemaps">
  Sourcemaps
</h2>

Ein minifiziertes Bundle erzeugt Stacktraces voller Ein-Buchstaben-Namen und enormer Zeilennummern. [Sourcemaps](/front-end/sourcemaps) machen daraus wieder die Dateinamen, Funktionen und Zeilennummern, die Sie geschrieben haben. Jeder Fehler sendet `appVersion` als seine Revision. AppSignal nutzt sie, um die sourcemaps für diesen Build zu finden. Ohne sie bleiben Stacktraces minifiziert.

Wenn Ihre sourcemaps öffentlich sind und neben Ihren JavaScript-Dateien liegen, ist nichts weiter zu tun. Wenn Sie sie lieber nicht veröffentlichen, laden Sie sie mit derselben Revision zum [sourcemaps-API-Endpoint](/api/sourcemaps) hoch.

<h2 id="errors-that-are-not-reported">
  Fehler, die nicht gemeldet werden
</h2>

<Warning>
  Manche Fehler erreichen das SDK nie. Die meisten davon sind Einschränkungen
  des Browsers und keine Grenzen von AppSignal, und für jeden gibt es einen
  Workaround.
</Warning>

**Fehler aus Skripten auf einer anderen Domain.** Wenn ein Skript, das von woanders geladen wurde, einen Fehler auslöst, verweigert der Browser die Details. Ihre Seite sieht nur die Meldung `Script error.`, ohne Stacktrace und ohne Zeilennummer. Das SDK verwirft diese undurchsichtigen Fehler, weil sie keine brauchbaren Details enthalten. Um CDN-Skriptfehler zu erfassen, senden Sie einen `Access-Control-Allow-Origin`-Header vom CDN. Fügen Sie `crossorigin="anonymous"` zu den Script-Tags hinzu.

**Fehler innerhalb von iframes.** Das SDK hört nur auf das `window`, in dem es läuft. Um ein iframe zu überwachen, das Ihnen gehört, initialisieren Sie das SDK auch in diesem Frame. Die übergeordnete Seite kann keine Fehler aus einem Cross-Origin-iframe erfassen.

**Fehler vor `init()`.** Alles, was ausgelöst wird, bevor `init()` läuft, wird verpasst. Importieren Sie Ihr AppSignal-Setup zuerst, vor anderen Bibliotheken und Ihrem eigenen Code.

<h2 id="filtering-out-browser-noise">
  Browser-Rauschen herausfiltern
</h2>

Manche Fehler stammen vom Browser oder seinen Erweiterungen, nicht von Ihrem Code, und Sie können sie nicht beheben. Die Option **Error filtering** im Installationsablauf verwirft sie mit `beforeError`:

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

  const IGNORED = [
    /ResizeObserver loop/,
    /^Script error\.?$/,
    /-extension:\/\//,
    /webkit-masked-url/,
  ];

  init({
    key: "<YOUR_FRONTEND_API_KEY>",
    beforeError: (error) => {
      const text = [error.message, error.stack, error.filename].join(" ");
      return IGNORED.some((pattern) => pattern.test(text)) ? null : error;
    },
  });
  ```
</CodeGroup>

Jedes Muster wird gegen die Meldung, den Stacktrace und den Dateinamen des Fehlers geprüft:

* `ResizeObserver loop`: ein Browser-Hinweis darauf, dass Resize-Benachrichtigungen auf den nächsten Frame verschoben wurden. Meist harmlos.
* `Script error.`: ein Fehler aus einem Skript auf einer anderen Domain, ohne Details zum Debuggen. Das SDK verwirft solche ohnehin bereits, wenn sie ohne Stacktrace ankommen.
* `-extension://`: ein Fehler aus einer Browser-Erweiterung, etwa einem `chrome-extension://`- oder `moz-extension://`-Skript.
* `webkit-masked-url`: die Adresse, die Safari anstelle des Skripts einer Erweiterung anzeigt.

Fügen Sie `IGNORED` ein Muster für jeden anderen Fehler hinzu, den Sie ignorieren möchten. Ein verworfener Fehler hinterlässt keinen Breadcrumb und zählt nicht als Wiederholung. Er zählt aber zum [Limit](#rate-limits) von 100 Fehlern alle 10 Sekunden. Mehr dazu unter [Fehler und Breadcrumbs filtern](/browser/privacy#filtering-errors-and-breadcrumbs).

<h2 id="reviewing-errors-in-appsignal">
  Fehler in AppSignal ansehen
</h2>

Die Errors-Ansicht gruppiert diese zu Issues, die Sie nach Version und Zeitraum filtern, zuweisen und für die Sie sich benachrichtigen lassen können. Mehr dazu unter [Front-end-Fehler in AppSignal](/browser-monitoring/errors).


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