@bangstack/observer

Zero-touch observability for DOM, fetch, errors, console, WebSocket, storage, and timers.

Installation

npm install @bangstack/observer @bangstack/core

Quick Start

import { createMesh } from '@bangstack/core';
import { installObserver } from '@bangstack/observer';

const mesh = createMesh({ name: 'my-app' });

// Install zero-touch observers (DOM, fetch, errors, console)
const cleanup = installObserver(mesh);

// Now all these are automatically captured as mesh events:
// - DOM clicks, inputs, form submissions
// - Fetch requests and responses
// - Uncaught errors and unhandled rejections
// - Console errors and warnings

// Optional observers
installObserver(mesh, {
  websocket: true,  // WebSocket connections and messages
  storage: true,    // localStorage/sessionStorage mutations
  timers: true,     // setTimeout/setInterval tracking
  network: true,    // Online/offline status
});

// Cleanup when done
cleanup();

Auto-Captured Events

| Observer | Events | |----------|--------| | DOM | dom:element:clicked, dom:input:changed, dom:form:submitted | | Fetch | http:request:started, http:request:completed, http:request:failed | | Errors | error:uncaught:thrown, error:unhandled:rejected | | Console | console:error:logged, console:warn:logged | | WebSocket | ws:connection:opened, ws:message:sent, ws:message:received | | Storage | storage:local:set, storage:session:removed | | Timers | timer:timeout:created, timer:interval:fired | | Network | network:status:online, network:status:offline |

License

MIT