devtape-browser

DevTape browser SDK — capture fetch failures, console errors, clicks, and navigation into a causal debug timeline (development only).

Install

npm install devtape-browser

Usage

import { initFailureRecorder } from "devtape-browser";

const capture = initFailureRecorder({
  enabled: process.env.NODE_ENV === "development",
  overlay: true,
  redaction: { keys: ["authorization", "cookie", "password", "token"] },
  failedStatuses: [401, 403, 500],
});

// After a failure:
const bundle = capture.recorder?.getLastFrozen();

capture.dispose();

Captured signals

• window.onerror and unhandled promise rejections
• console.warn and console.error
• fetch metadata (method, URL, status, duration — no bodies)
• Navigation (initial load, history, hash changes)
• User interactions are off by default. Set captureInteractions: true to record actionable clicks (buttons, links, submits) and form submits. DevTape never records typing (input / keydown). Overlay clicks are always ignored.
• Redacted DOM snapshot on freeze

Safety

• Refuses production initialization unless allowProduction: true
• SSR-safe imports (returns a disabled handle on the server)
• All data stays in browser memory

Related packages

Use devtape-react for React apps, or devtape-viewer to mount the overlay manually.

License

MIT