SnagBadgerA little help for every snag.
Interactive UI demo

Play with the bug reporter

Open the right-edge badger, try the capture controls, then review a report. Capture and submission are simulated in this demo.

Try bug reporter ↗

Small examples, one idea at a time#

Read the code first, then choose Run example. These examples use supported package entries and known authored values. Nothing starts when you scroll, focus a control or read the guide. The result stays on this page; no evidence is collected or sent.

Keep identity while revising a report#

A report can be incomplete and still useful. Add an actual observation as a new revision without replacing its identity. This focused snippet shows the key transition; the complete maintained browser example includes the fixed timestamps and rendered result.

import { createBugReport, reviseBugReport } from '@snagbadger/reporting';

const initial = createBugReport({
  id: 'docs-profile-save',
  at: '2026-10-12T12:00:00.000Z',
  title: 'Saved profile name disappears',
});
const revised = reviseBugReport(
  initial,
  { actual: 'Save confirmed Morgan Lee; returning showed Alex Morgan' },
  '2026-10-12T12:01:00.000Z',
);

Expect original revision 1, revised revision 2, the same identity, and 0 evidence items. The narrative is authored sample data; running this code does not reproduce the bug in a browser.

Supported API · local resultOn demand

Ready. Runtime starts only when you run this example.

Your result will appear here.

No capture, permissions, uploads or external submission. Reset clears the displayed result; loaded code stays cached until you leave this page.

Next: create and export a portable report, inspect the public API reference, or open the real sample host.

Compose settings, then clean up#

Later settings override earlier ones. An empty reporting session collects no evidence; it does not install a collector or a UI. Always dispose its runtime. The complete maintained browser example returns the result and disposes in finally, even if the session fails.

import { composeConfiguration } from '@snagbadger/configuration';
import { createReportingRuntime } from '@snagbadger/reporting/session';

const configuration = composeConfiguration(
  { ui: { zIndex: 20 }, adapters: {} },
  { ui: { zIndex: 40 } },
);
const runtime = createReportingRuntime(configuration);
try {
  await runtime.start({}).finish();
} finally {
  await runtime.dispose();
}

Expect zIndex 40, 0 evidence items, and cancelled false. Each run creates and disposes its own runtime; repeating does not leave a session running.

Supported API · local resultOn demand

Ready. Runtime starts only when you run this example.

Your result will appear here.

No capture, permissions, uploads or external submission. Reset clears the displayed result; loaded code stays cached until you leave this page.

Next: configure reporting or inspect the configuration reference. For capture and diagnostic collection, open a full demonstration in its own page.