🧪 eventbus-debugger

Debugging frontend events shouldn't feel like playing hide-and-seek in the dark.

eventbus-debugger is a lightweight devtool that helps you see, log, and inspect all the JavaScript events firing in your app — clicks, inputs, scrolls, you name it — all with a single wrapper and a slick dark-mode dashboard.

Perfect for debugging pub/sub flows, tracking UI behavior, or just watching your app scream "help!" in JSON.

⚡️ Features

• 🔍 Wraps native addEventListener with optional payload logging
• 📤 Logs are sent to a local API and written to a file
• 💻 Comes with a dashboard at /dashboard for visual inspection
• ⏱️ Auto-refresh, filters by event type and timestamp
• 🌑 Dark mode (because we care about your eyes)

🛠️ Installation

npm install eventbus-debugger

🧙 Usage: In Your Frontend Code

import { addEventListenerWithLog } from 'eventbus-debugger';

addEventListenerWithLog(
  document.getElementById('submit-btn'),
  'click',
  () => {
    console.log('Button clicked!');
  },
  false,
  { context: 'User clicked Submit', role: 'guest' } // Optional payload
);

🔧 It behaves exactly like addEventListener, but smarter.

🧠 What It Logs

Each log is stored like this:

{
  "type": "click",
  "timestamp": 1700000000000,
  "target": "BUTTON",
  "payload": {
    "context": "User clicked Submit",
    "role": "guest"
  },
  "receivedAt": 1700000000123
}

Saved to logs/events.log as newline-separated JSON.

🔥 Start the Logging Server

npx eventbus-debugger-server

Runs a tiny Express server on http://localhost:3456.

API Endpoints:

• POST /api/log-event — for incoming logs (handled by the wrapper)
• GET /api/event-logs — to fetch logs
• GET /dashboard — your new favorite dark-mode dashboard

🌌 The Dashboard

Access it at:

http://localhost:3456/dashboard

Features:

• 📋 Table of all events
• 🔍 Filter by event type
• 📆 Filter by date range
• 🔄 Auto-refresh toggle
• 🌑 Dark. Always dark.

Feels like a devtool, not a spreadsheet.

🧪 Example React Usage

import { addEventListenerWithLog } from 'eventbus-debugger';

useEffect(() => {
  if (ref.current) {
    addEventListenerWithLog(ref.current, 'click', () => {
      console.log('React click!');
    }, false, { source: 'React button' });
  }
}, []);

👀 Pro Tips

• Logs are saved to logs/events.log by default
• Want to wipe logs? Just delete the file or add a button for it
• Want to ship this in production? Don’t — unless you're trying to build an audit trail , or ping me i have a secret sauce for you.

💡 Why?

Because console.log doesn’t scale, and events don't print themselves.

🧙 Author

Built by cinfinit — fueled by curiosity and a desire to make things better.