@cphtech-dk/app-monitor

Tiny error-monitoring SDK for the app-monitor collector. Browser core is ~1.2 KB gzipped.

Published to npm (public):

bun add @cphtech-dk/app-monitor

Browser / SPA

import { init, captureError, setUser, addBreadcrumb, setRelease, flush } from "@cphtech-dk/app-monitor";

init({
  endpoint: "https://collector.example.com", // collector base URL
  apiKey: "jm_...",
  environment: "production", // optional
  release: import.meta.env.VITE_COMMIT_SHA, // optional, enables source maps
  debug: false, // optional, logs init info
});

init automatically installs handlers for uncaught errors, unhandled promise rejections, and adds breadcrumbs for console.error, navigation (pushState/popstate), and failed fetch calls. Pending errors are batched (10 per batch / 5 s interval) and flushed on page hide via keepalive fetch.

captureError(err, { orderId }); // manual capture with extra context
setUser({ id: "u_1", email: "[email protected]" }); // attached to subsequent errors
addBreadcrumb({ type: "ui", message: "clicked checkout" });
setRelease("abc1234"); // override release after init
flush(); // send queued errors now (fire-and-forget)

React

import { ErrorBoundary } from "@cphtech-dk/app-monitor/react";

<ErrorBoundary fallback={(error, reset) => <Oops error={error} onRetry={reset} />}>
  <App />
</ErrorBoundary>;

Render errors are reported with the component stack as context. fallback is optional (renders nothing by default) and can be a static node or a render function. onError(error, errorInfo) is invoked after reporting. Requires init() to have been called.

Hono (Workers)

import { jsMonitor } from "@cphtech-dk/app-monitor/hono";

app.use(
  jsMonitor({
    endpoint: "https://collector.example.com",
    apiKey: "jm_...",
    environment: "production",
    release: COMMIT_SHA,
  }),
);

Catches errors thrown by downstream handlers, reports them via executionCtx.waitUntil (non-blocking, never breaks the request), and re-throws so your own error handling still runs.

Source maps

Upload source maps at deploy time so the dashboard can symbolicate stack traces:

app-monitor --endpoint https://collector.example.com --api-key jm_... --release $COMMIT_SHA --dist ./dist

Finds all .map files under --dist and uploads them keyed by release. Pass the same release to init().

Wire contract

@cphtech-dk/app-monitor/wire exports INGEST_PATH, SOURCEMAPS_PATH, and the ErrorPayload/Breadcrumb types — the collector imports these so SDK and server can never disagree on paths or payload shape.

Size budget

bun run check-size builds the browser core and fails if it exceeds the gzip budget (enforced in the publish workflow).