Option A — script tag (no bundler required)

Drop one tag in your <head>. The SDK auto-initialises from data-* attributes. No JavaScript required.

<script
  async
  src="https://cdn.coderadar.app/v1/sdk.js"
  data-project="your-project-slug"
  data-dsn="https://<key>@ingest.coderadar.app/<id>"
  data-env="production"
  data-release="[email protected]">
</script>

CDN status: cdn.coderadar.app is a Cloud Run domain mapping pointing at the coderadar-dashboard Next.js service, which serves public/v1/sdk.js as a static asset. DNS CNAME + TLS provisioning may take up to 30 minutes on first deploy. If the CDN is still propagating, use the origin directly: https://coderadar-dashboard-188548470397.us-central1.run.app/v1/sdk.js.

Option B — npm package

The package is not yet published to the npm registry. Install from the monorepo or a tarball.

# From the CodeRadar monorepo (workspace install)
pnpm add @coderadar/browser

# Or from a local tarball
pnpm add ./path/to/coderadar-browser-0.1.0.tgz

import { init } from "@coderadar/browser";

init({
  dsn:         "https://<key>@ingest.coderadar.app/<id>",
  project:     "your-project-slug",
  environment: "production",
  release:     "[email protected]",
});

Init options

Option	Default	Notes
`dsn`	—	Required. Also read from `data-dsn` attribute.
`project`	—	Project slug. Also read from `data-project`.
`environment`	"production"	Also read from `data-env`.
`release`	—	SHA or semver. Used for source-map resolution and regression detection.
`replay`	false	Opt in to session replay. Adds ~22 KB gz to the SDK payload.
`replaySampleRate`	0.1	Fraction of sessions to record. 1.0 = every session.
`maxBreadcrumbs`	50	Per-event breadcrumb buffer.
`flushIntervalMs`	5000	Periodic flush interval. Events also flush on `pagehide` via the Beacon API.

What gets captured automatically

Unhandled errors via window.onerror.
Unhandled promise rejections via window.onunhandledrejection.
Console breadcrumbs — console.warn and console.error are instrumented automatically.
Fetch breadcrumbs — URL, method, status code, duration for every fetch() call.
Click breadcrumbs — element tag + text snippet on every click.

Manual capture

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

setUser({ id: "u_123", email: "[email protected]" });
addBreadcrumb({ category: "ui.click", message: "checkout button" });

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

captureMessage("payment flow started", "info");

Framework integrations

React — error boundary

import { captureException } from "@coderadar/browser";
import React from "react";

export class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    captureException(error, {
      extra: { componentStack: info.componentStack },
    });
  }
  render() {
    return this.props.children;
  }
}

Vue 3 — global error handler

import { createApp } from "vue";
import { captureException } from "@coderadar/browser";
import App from "./App.vue";

const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  captureException(err, { extra: { info } });
};
app.mount("#app");

Svelte — onError lifecycle

<!-- App.svelte -->
<script>
import { captureException } from "@coderadar/browser";

window.addEventListener("error", (ev) => {
  captureException(ev.error ?? new Error(ev.message));
});
</script>

Session replay opt-in

Session replay records DOM mutations, mouse movements, and scroll positions. It is off by default and respects prefers-reduced-motion.

// Script tag — add data-replay and data-replay-sample-rate attributes:
<script
  async
  src="https://cdn.coderadar.app/v1/sdk.js"
  data-project="your-project-slug"
  data-dsn="https://<key>@ingest.coderadar.app/<id>"
  data-replay="true"
  data-replay-sample-rate="0.1">
</script>

// npm package — pass replay options to init():
init({
  dsn:               "https://<key>@ingest.coderadar.app/<id>",
  project:           "your-project-slug",
  replay:            true,
  replaySampleRate:  0.1,
});

Source maps

Minified stack traces are resolved server-side if you upload source maps at release time. See the source maps guide for upload commands and build-tool plugins.

Bundle sizes

Script tag (CDN autoload): 3.5 KB gzipped.
npm ESM (errors only): bundler tree-shakes replay, resulting in ~3 KB gzipped.
npm with replay enabled: +~22 KB gzipped.

CSP

Add https://ingest.coderadar.app to your connect-src directive. The SDK sets no cookies and makes no third-party requests beyond the ingest endpoint.

Common gotchas

Cross-origin errors show "Script error." — Add crossorigin="anonymous" to your <script> tags and set Access-Control-Allow-Origin: * on your asset server. Without this, browsers suppress error details per the same-origin policy.
SDK not initialised before first error fires — Use async (not defer) on the script tag so the SDK bootstraps as early as possible, then queues errors from onerror until the SDK is ready.
Duplicate events in hot-module reload — The SDK guards against double-init with a state.initialized check; but HMR may swap the module. Call CodeRadar._reset() in your HMR accept callback if needed.
Beacon API blocked by ad-blockers — The SDK falls back to a regular fetch() POST when navigator.sendBeacon is unavailable. Events may be lost if the page unloads before the fetch completes.
npm package not published — @coderadar/browser is not yet on the npm registry. Use a workspace install or tarball until a release is tagged.