Browser error tracking

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

​

Was gemeldet wird

• 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, 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 entfernt wurden, und der User Agent des Browsers.

​

Wie Fehler gruppiert werden

import { setRouteTemplate } from "@appsignal/browser";

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

​

Fehler manuell melden

import { captureError } from "@appsignal/browser";

try {
  await submitOrder(order);
} catch (error) {
  captureError(error);
}

​

Fehlgeschlagene Requests

​

Tags

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();

​

Rate-Limits

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

​

Sourcemaps

​

Fehler, die nicht gemeldet werden

​

Browser-Rauschen herausfiltern

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

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

​

Fehler in AppSignal ansehen