DEV Community

Meghshyam Sonar
Meghshyam Sonar

Posted on

I replaced console.log with a real-time error dashboard that runs on localhost

#node #react #javascript #opensource

Last month I caught myself doing this in a Next.js project:

console.log("HERE 1")
console.log("HERE 2")
console.log("value is", value)
console.log("why is this undefined???")
Enter fullscreen mode Exit fullscreen mode

Five console.log statements just to track down one failed fetch. The terminal was a wall of noise. I couldn't tell which error came from the frontend and which from the backend. And when I finally found the bug, I deleted all the logs and knew I'd be doing the exact same thing tomorrow.

I've used Sentry at work. It's great for production. But for local development? I'm not spinning up 20 Docker containers and paying $26/month just to see my errors in a nice UI while I'm building stuff on localhost.

So I built ErrPulse.

What it does

One command:

npx errpulse
Enter fullscreen mode Exit fullscreen mode

That's it. You get a server and a real-time dashboard at localhost:3800. No account, no config file, no Docker, no cloud service. It runs entirely on your machine with a local SQLite database.

Then you wire up your app:

Backend (Node.js/Express):

npm install @errpulse/node
Enter fullscreen mode Exit fullscreen mode 
import "@errpulse/node";
Enter fullscreen mode Exit fullscreen mode

That single import catches uncaught exceptions, unhandled promise rejections, and console.error calls automatically. If you're using Express, you can add middleware to track HTTP requests and route errors too.

Frontend (React):

npm install @errpulse/react
Enter fullscreen mode Exit fullscreen mode 
import { ErrPulseProvider } from "@errpulse/react";

function App() {
  return (
    <ErrPulseProvider endpoint="http://localhost:3800" projectId="my-app">
      <YourApp />
    </ErrPulseProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

This catches runtime errors, React component crashes, failed fetch requests, resource load failures, and console errors. All of it shows up in the dashboard instantly over WebSocket.

The part I'm most proud of

When you click on an error in the dashboard, you don't just get a stack trace. You get a plain-English explanation of what went wrong and a suggestion for how to fix it.

For example, if you get ECONNREFUSED 127.0.0.1:5432, it doesn't just show you the raw error. It tells you "The app tried to connect to PostgreSQL on port 5432 but nothing is listening there. Check that your database server is running."

There are 46 built-in error patterns covering the stuff we all hit regularly — CORS issues, React hooks called outside components, undefined property access, connection failures, JWT problems, and so on.

Frontend + Backend correlation

This was the feature that made me actually want to use this thing daily. The React SDK injects a correlation ID header (X-ErrPulse-Correlation-ID) into every fetch request. The Node SDK picks it up on the backend. So when something breaks, the dashboard shows you the full chain:

User clicks button -> Frontend sends request -> Backend throws error

All linked together. No more switching between browser console and terminal trying to match up which request caused which error.

Multi-project support

If you're working on a monorepo or running multiple services locally, you can point them all at the same ErrPulse instance with different projectId values. The dashboard has a project selector to filter between them.

What it's NOT

I want to be upfront about this — ErrPulse is a local development tool. It's not trying to replace Sentry or Datadog for production monitoring. There's no cloud, no team features, no alerting, no retention policies.

It's meant to sit next to your other dev tools and give you a better debugging experience than staring at console.log output in a terminal.

The stack

For anyone curious about the internals:

  • Monorepo with 5 packages (core, server, node SDK, react SDK, CLI)
  • Express server with SQLite (WAL mode for concurrent reads/writes)
  • React + Tailwind dashboard with WebSocket for real-time updates
  • Error fingerprinting using SHA-256 hashes so duplicate errors get grouped
  • PII sanitization strips auth headers, passwords, tokens before storing
  • SDK batching buffers events for 100ms or 10 events to reduce network calls
  • SDKs are designed to never crash your app — all internal errors are swallowed

Try it 

npx errpulse
Enter fullscreen mode Exit fullscreen mode

Then open localhost:3800 and add the SDK to whatever you're working on. Takes about 2 minutes.

GitHub: github.com/Meghshyams/ErrPulse

If you find it useful, a star would mean a lot. And if you run into issues or have ideas, open an issue — I'm actively working on this.

Top comments (0)