Browser error tracking

• Les erreurs que votre code lève et n’intercepte jamais, via l’événement error.
• Les promesses qui échouent sans que rien ne traite l’échec, via l’événement unhandledrejection.

​

Ce qui est rapporté

• Nom et message de l’erreur. Le type d’erreur, par exemple TypeError, et le message qui l’accompagnait.
• Backtrace. La stack trace, une ligne par frame. Vide si le navigateur n’en fournit aucune.
• Action. La route sur laquelle l’erreur s’est produite. Les erreurs sont regroupées par cette valeur.
• Révision. L’appVersion que vous avez définie. Utilisée pour filtrer par version et pour trouver les bons sourcemaps.
• Tags. Tout ce que vous avez défini avec setTags().
• Nom de service. Le serviceName que vous avez défini, ou Browser. Il identifie le front-end parmi les services d’une trace.
• Breadcrumbs. Jusqu’à 25 breadcrumbs récents qui aident à expliquer l’erreur.
• URL et user agent. La page où l’erreur s’est produite, avec les paramètres de requête retirés selon votre allowlist, et le user agent du navigateur.

​

Comment les erreurs sont regroupées

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

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

​

Rapporter des erreurs manuellement

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

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

​

Requêtes échouées

​

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

​

Limites de débit

• La même erreur, encore et encore. Le message et la première ligne de stack trace déterminent si deux erreurs sont des répétitions. AppSignal la rapporte au maximum cinq fois toutes les 10 secondes.
• Trop d’erreurs à la fois. Pas plus de 100 erreurs rapportées toutes les 10 secondes au total. Cela attrape une page qui lève de nombreuses erreurs différentes, ce que la première limite laisserait passer.

​

Sourcemaps

​

Les erreurs qui ne sont pas rapportées

​

Filtrer le bruit du navigateur

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 : un avertissement du navigateur indiquant que les notifications de redimensionnement ont été reportées à la prochaine frame. Généralement sans gravité.
• Script error. : une erreur provenant d’un script sur un autre domaine, sans détail pour déboguer. Le SDK écarte déjà celles qui arrivent sans stack trace.
• -extension:// : une erreur provenant d’une extension de navigateur, comme un script chrome-extension:// ou moz-extension://.
• webkit-masked-url : l’adresse que Safari affiche à la place du script d’une extension.

​

Examiner les erreurs dans AppSignal