@errcheck/js-browser

Errcheck's error-tracking SDK for the browser.

Global error/rejection handlers, breadcrumbs from console/DOM/fetch/XHR/history, and a fetch-based transport — under 10 KB minified+gzipped.

Works in both JavaScript and TypeScript projects — type definitions are bundled in.

Install

npm install @errcheck/js-browser
# or
pnpm add @errcheck/js-browser
# or
yarn add @errcheck/js-browser

import * as Errcheck from "@errcheck/js-browser";

Errcheck.init({
  dsn: "https://[email protected]/1234567890abcdef", // add project dsn here
  release: "[email protected]",
  environment: "production",
});

Uncaught errors and unhandled promise rejections are captured automatically. Report handled errors yourself:

try {
  riskyOperation();
} catch (error) {
  Errcheck.captureException(error);
}

What gets captured automatically

| Source | Integration | | --- | --- | | Uncaught exceptions | window.onerror global handler | | Unhandled promise rejections | window.onunhandledrejection global handler | | Console activity | console.log/warn/error calls recorded as breadcrumbs | | DOM interaction | Clicks and key input recorded as breadcrumbs | | Network requests | fetch and XMLHttpRequest calls recorded as breadcrumbs | | Navigation | History (pushState/popState) changes recorded as breadcrumbs |

Each breadcrumb is timestamped and attached to whatever error is captured next, so an error report arrives with the trail of user/network activity that led up to it.

No build tool

A standalone script is available for direct <script>-tag use, no bundler required:

<script src="https://unpkg.com/@errcheck/js-browser/dist/errcheck.min.js"></script>
<script>
  Errcheck.init({ dsn: "https://[email protected]/1234567890abcdef" }); // add project dsn here
</script>

API

| Function | Description | | --- | --- | | init(options) | Initializes the SDK. Call once, as early as possible. | | captureException(error, hint?) | Reports an Error (or any thrown value). Returns the event ID. | | captureMessage(message, level?) | Reports a plain message instead of an exception. | | addBreadcrumb(breadcrumb) | Appends a breadcrumb to the current scope's trail. | | setUser(user \| undefined) | Attaches user context to subsequent events. Pass undefined to clear. | | setTag(key, value) | Attaches a searchable key/value tag to subsequent events. | | setContext(key, context) | Attaches a structured, non-searchable context object to subsequent events. | | flush(timeout?) | Waits for pending events to send, up to timeout ms. Call before page unload. | | getClient() | Returns the active client instance, if any. |

Full configuration reference: see the root README.

License

MIT