Docs · SDK · Browser

Browser SDK.

~12 KB gzipped autoload. Captures unhandled errors, unhandled promise rejections, console errors, optional fetch breadcrumbs. Source-map auto-resolution if you upload them at release time.

Option A — script tag

Drop this in your <head>. Works without a bundler.

<script
  src="https://cdn.coderadar.app/v1/sdk.js"
  data-project="truecom"
  data-env="production"
  data-release="[email protected]"
  data-traces-sample-rate="0.2"
  defer>
</script>

Option B — npm package

pnpm add @coderadar/browser
import { init } from "@coderadar/browser";
init({
  dsn:         "https://[email protected]/12",
  project:     "truecom",
  environment: "production",
  release:     "[email protected]",
  tracesSampleRate: 0.2,
});

What gets captured automatically

  • Unhandled errors via window.addEventListener("error").
  • Unhandled promise rejections via window.addEventListener("unhandledrejection").
  • Console errors when console.error() is called (off by default; opt in via captureConsole: ["error"]).
  • Navigation breadcrumbs for History API and hash changes.
  • Fetch breadcrumbs for every fetch() call (URL, method, status, duration). On by default.
  • UI breadcrumbs for click and input events on form elements (off by default).
  • Trace context on outbound fetch requests via the traceparent header.

Manual capture

import { captureException, captureMessage, setUser, addBreadcrumb } from "@coderadar/browser";

setUser({ id: user.id });
addBreadcrumb({ category: "ui.click", message: "checkout button" });

try {
  await processPayment();
} catch (e) {
  captureException(e);
}

Source maps

Upload them at release time so stack traces resolve to original source. The CLI is the easiest way:

pnpm dlx @coderadar/cli sourcemaps upload \
  --project=truecom --release=truecom@$SHA \
  --rewrite --strip-common-prefix \
  dist/static/js/

The SDK sends the release tag with each event so the dashboard can match the right map.

Bundle impact

  • Script tag autoload: ~12 KB gzipped, ~38 KB minified.
  • npm core (errors only): ~6 KB gzipped.
  • npm with traces: ~14 KB gzipped.
  • Replay (roadmap): adds ~22 KB gzipped; behind a feature flag.

CSP and privacy

Add https://ingest.coderadar.app to connect-src in your CSP. The SDK sends no third-party requests. No cookies are set.