Konfigurationsoptionen für AppSignal für Browser

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.

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

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"] },
  },
});

`key`

Typ: string
Erforderlich

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

`endpoint`

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.

`active`

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:

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

`appVersion`

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 für Backtraces. Mehr dazu in unserem Leitfaden zu Deploy-Markern.

`serviceName`

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.

`tracePropagationTargets`

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, damit er den Header liest. Die leere Standardliste fügt keine traceparent-Header hinzu. Siehe Verteiltes Tracing für Browser für Einrichtung und Beispiele.

`beforeError`

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. Dieser Callback muss synchron sein. Ein zurückgegebenes Promise wird erkannt, als console.error geloggt, und der Fehler wird verworfen.

`beforeBreadcrumb`

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.

`errors.enabled`

Typ: boolean
Standardwert: true

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

`errors.sampleRate`

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 und bevor beforeError läuft.

`breadcrumbs.network`

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.

`breadcrumbs.console`

Typ: boolean
Standardwert: true

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

`breadcrumbs.clicks`

Typ: boolean
Standardwert: true

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

`breadcrumbs.longTasks`

Typ: boolean
Standardwert: true

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

`privacy.queryParamsAllowlist`

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.

`privacy.networkBlocklist`

Typ: string[]
Standardwert: []

Glob-URL-Muster für fetch- und XMLHttpRequest-Aufrufe, die nicht als Breadcrumbs oder fehlgeschlagene Request-Fehler 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.

`privacy.dom.maskText`

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.

`privacy.dom.blockElement`

Typ: string[]
Standardwert: []

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

API-Referenz

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

SDKs & Telemetrie

Sprach-SDKs

Telemetrie-Tools

Konfigurationsoptionen für AppSignal für Browser

`key`

`endpoint`

`active`

`appVersion`

`serviceName`

`tracePropagationTargets`

`beforeError`

`beforeBreadcrumb`

`errors.enabled`

`errors.sampleRate`

`privacy.queryParamsAllowlist`

`privacy.networkBlocklist`

`privacy.dom.maskText`

`privacy.dom.blockElement`

API-Referenz

​key

​endpoint

​active

​appVersion

​serviceName

​tracePropagationTargets

​beforeError

​beforeBreadcrumb

​errors.enabled

​errors.sampleRate

​breadcrumbs.network

​breadcrumbs.console

​breadcrumbs.clicks

​breadcrumbs.longTasks

​privacy.queryParamsAllowlist

​privacy.networkBlocklist

​privacy.dom.maskText

​privacy.dom.blockElement

​API-Referenz

`key`

`endpoint`

`active`

`appVersion`

`serviceName`

`tracePropagationTargets`

`beforeError`

`beforeBreadcrumb`

`errors.enabled`

`errors.sampleRate`

`breadcrumbs.network`

`breadcrumbs.console`

`breadcrumbs.clicks`

`breadcrumbs.longTasks`

`privacy.queryParamsAllowlist`

`privacy.networkBlocklist`

`privacy.dom.maskText`

`privacy.dom.blockElement`

API-Referenz