Browser error tracking

• Errors your code throws and never catches, through the error event.
• Promises that fail with nothing to handle the failure, through the unhandledrejection event.

​

What is reported

• Error name and message. The kind of error, for example TypeError, and the message it came with.
• Backtrace. The stack trace, one line per frame. Empty if the browser gives none.
• Action. The route the error happened on. Errors are grouped by this.
• Revision. The appVersion you set. Used to filter by version and to find the right sourcemaps.
• Tags. Whatever you set with setTags().
• Service name. The serviceName you set, or Browser. It labels the front end among the services of a trace.
• Breadcrumbs. Up to 25 recent breadcrumbs that help explain the error.
• URL and user agent. The page the error happened on, with query parameters removed as set by your allowlist, and the browser’s user agent.

​

How errors are grouped

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

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

​

Reporting errors manually

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

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

​

Failed 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

• The same error over and over. The message and first stack line determine whether two errors are repeats. AppSignal reports it at most five times every 10 seconds.
• Too many errors at once. No more than 100 errors are reported every 10 seconds in total. This catches a page throwing many different errors, which the first limit would miss.

​

Sourcemaps

​

Errors that are not reported

​

Filtering out browser noise

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: a browser notice that resize notifications were deferred to the next frame. It is usually harmless.
• Script error.: an error from a script on another domain, with no detail to debug. The SDK already drops those that arrive without a stack trace.
• -extension://: an error from a browser extension, such as a chrome-extension:// or moz-extension:// script.
• webkit-masked-url: the address Safari shows in place of an extension’s script.

​

Reviewing errors in AppSignal