Browser SDK

Error monitoring for the browser

One package for any front-end — React, Vue, Angular, Svelte, or plain JS. It hooks global errors and unhandled rejections, and ships a React error boundary for component-tree failures.

Frameworks React · Vue · Angular · Svelte · plain JSRequires any modern browserPackage @errorgap/browserSource ↗Package ↗Agent guide ↗
Install

Install

sh
npm install @errorgap/browser

Or drop it in via CDN — the UMD build exposes window.Errorgap:

html
<script src="https://cdn.jsdelivr.net/npm/@errorgap/browser"></script>
Configure

Configure

Import as early as possible in your entry point. The API key is public client-side, so scope it to a single project and rely on server-side redaction for anything sensitive.

ts
import { Errorgap } from "@errorgap/browser";

Errorgap.init({
  endpoint:    "https://your-endpoint",
  projectSlug: "your-project",
  apiKey:      import.meta.env.VITE_ERRORGAP_API_KEY,
  environment: import.meta.env.MODE,
  release:     __APP_VERSION__,
});

init hooks window.error and window.unhandledrejection automatically.

React error boundary

tsx
import { ErrorgapBoundary } from "@errorgap/browser/react";

export function App() {
  return (
    <ErrorgapBoundary fallback={<p>Something went wrong.</p>}>
      <Routes />
    </ErrorgapBoundary>
  );
}
Session replay

Session replay

Version 0.4.0 records session replay: page loads, navigations, failed API calls, errors (linked to their group), rage and dead clicks, plus masked page snapshots. Whether anything is recorded is set per project in Errorgap under Settings → Session replay: nothing while replay is off, and a sampled share of sessions while it is on. Only sessions that hit an error are kept, and each opens from its error group or incident.

Page snapshots, when the project captures them, blank every form field and drop scripts; mark anything else to keep out with data-errorgap-block (removed) or data-errorgap-mask (text masked).

ts
Errorgap.init({ /* ... */, replay: false }); // off in this app
Errorgap.captureSnapshot();                // take a snapshot now
Trigger a test error

Trigger a test error

Throw once — in React, wire it to a temporary button:

ts
throw new Error("Errorgap test error");
Verify

Verify the connection

Confirm your key and endpoint reach errorgap before wiring anything else — send one event straight to the ingestion API:

bash
curl -sS -X POST "$ERRORGAP_ENDPOINT/api/projects/$ERRORGAP_PROJECT_SLUG/notices" \
  -H "content-type: application/json" \
  -H "x-errorgap-project-key: $ERRORGAP_API_KEY" \
  -d '{"errors":[{"type":"ErrorgapInstallTest","message":"Errorgap install verification"}]}'

A 201 with a group_id means ingestion works (202 = received but sampled; 401 = wrong key). Then trigger the test error above through the SDK. Your onboarding screen's Verify step checks the stack off automatically once the first event lands — it polls every three seconds.

Next: the full ingestion API, or browse every SDK.