JavaScript / TypeScript SDK
Report errors to BugBoard in three steps: install, copy one setup file, then call it.
Source on GitHub: github.com/bug-board/bugboard-js Runs on Node 20+, browsers, and edge runtimes with nothing to install or wire up (it uses the platform
fetch). The default path loads no dependencies; opt-in payload encryption lazy-loads a tiny tweetnacl sealed-box binding (tweetnacl-sealedbox-js) that ships bundled with the SDK — it loads automatically when you set an encryption key, with nothing extra to install. See Encrypting sensitive reports.
1. Install
npm i bugboard
2. Add the setup file
Create one file that configures a shared client, then import it anywhere. This keeps your keys in a single place. Pick the tab for where the client runs:
// utils/bugboard.ts import { createClient } from 'bugboard'; // In the browser or a mobile app, use a publishable key, sent as a bearer token. export default createClient({ apiKey: import.meta.env.VITE_BUGBOARD_API_KEY, // bb_pub_… // OPTIONAL — if provided, every payload is encrypted before it leaves the client. // encryptionKeyId: import.meta.env.VITE_BUGBOARD_ENCRYPTION_KEY_ID, // bbek_… // encryptionPublicKey: import.meta.env.VITE_BUGBOARD_ENCRYPTION_PUBLIC_KEY, // base64 X25519 });
// utils/bugboard.ts import { createClient } from 'bugboard'; // On a server, use a secret key; requests are HMAC-signed and the secret never leaves the server. export default createClient({ keyId: process.env.BUGBOARD_KEY_ID, // bbk_… signingSecret: process.env.BUGBOARD_SIGNING_SECRET, // bb_sec_… // OPTIONAL — if provided, every payload is encrypted before it leaves the server. // encryptionKeyId: process.env.BUGBOARD_ENCRYPTION_KEY_ID, // bbek_… // encryptionPublicKey: process.env.BUGBOARD_ENCRYPTION_PUBLIC_KEY, // base64 X25519 // OPTIONAL — log reports locally instead of sending them (local debugging / dry run). // logLocally: true, });
Set the matching values in your .env:
VITE_BUGBOARD_API_KEY=bb_pub_xxxxxxxx
BUGBOARD_KEY_ID=bbk_xxxxxxxx BUGBOARD_SIGNING_SECRET=bb_sec_xxxxxxxx
3. Use it
Call a severity method with a title (required); optionally pass a description — a string or the caught error — and tags.
import bugboard from '@/utils/bugboard'; try { await payments.charge(order); } catch (err) { bugboard.criticalHigh('Payment failed', err, ['payment', 'backend']); }
The title is all you need:
bugboard.major('Checkout is slow');
That's it — the call returns immediately and the report is delivered in the background.
Common methods
Most apps only need these four (medium priority); each severity also has …Low and …High
variants — criticalHigh, minorLow, and so on:
bugboard.critical('Payment failed', err); // highest severity bugboard.major('Checkout is slow', err); bugboard.moderate('Slow image upload', err); bugboard.minor('Tooltip misaligned');
Tags are an array or a comma-separated string:
bugboard.critical('Payment failed', err, ['payments', 'checkout']); bugboard.critical('Payment failed', err, 'payments,checkout');
Serverless / short-lived scripts
Reports deliver in the background, and the SDK flushes automatically on shutdown (Node
beforeExit, browser pagehide). In environments without lifecycle hooks — lambdas, edge
functions, CLI scripts — flush before returning:
await bugboard.flush();
Framework guides
The SDK is identical on every runtime — what changes is where you build the client, which key it uses, and where you flush. These guides cover each one end to end:
| Server | Full-stack | Client |
|---|---|---|
| Express, Fastify, Koa | Next.js | Vite SPA: React, Vue, Svelte |
| NestJS | Nuxt | |
| Serverless & edge | SvelteKit | |
| Remix / React Router |
In an app with both a server and a client bundle, make two modules — one with the secret
key that never reaches the browser, one with the publishable key that does. Adopt whatever
server-only convention your framework enforces (.server.ts in SvelteKit and Remix,
server-only in Next.js) so an accidental client import fails at build time rather than
shipping your signing secret.
Next steps
- Framework guides — detailed integration for every major framework.
- API Reference — config options, every severity/priority variant
(
criticalHigh, …), and the full HTTP contract. - Encrypting sensitive reports — keep the payload out of the
browser network tab with
encryptionPublicKey(the bundledtweetnacl-sealedbox-jsbinding auto-loads for you). - Source on GitHub — the full SDK implementation.