DEV Community

kaseem-omolayo
kaseem-omolayo

Posted on AI-assisted

Building a Real-Time Webhook Debugger with Hono and WebSocket

#api #backend #webdev #architecture

Building a Real-Time Webhook Debugger with Hono and WebSocket
The Problem
Every backend developer has experienced this: a webhook fails silently, and you spend hours staring at logs trying to figure out what went wrong. Existing solutions like Hookdeck cost $300+/month, while free tools like Smee lack replay and history features.

I built Webhook Debugger to solve this problem with a self-hosted, open-source alternative.

Architecture Overview
The system follows a microservices pattern with three main components:

External Service → API Gateway (Hono) → PostgreSQL
↓
WebSocket Server
↓
Web Frontend (Next.js)
Key Technical Decisions

  1. Hono over Express I chose Hono for the API gateway because:

Performance: 10x faster than Express in benchmarks
Edge-ready: Works on Cloudflare Workers, Vercel Edge
TypeScript-first: Native type safety without middleware

  1. PostgreSQL with JSON Columns
    Webhooks have variable structures. Instead of normalizing everything, I used JSON columns. This allows a flexible schema for different webhook formats, fast queries, and no migration needed for new header types.

  2. WebSocket for Real-time Updates
    Instead of polling, I used WebSocket for instant updates when webhooks arrive.

Rate Limiting
I implemented a sliding window rate limiter without external dependencies. 100 requests per minute per IP, auto-resetting.

Results
Latency: <50ms p99 for API responses
Throughput: 100+ requests/second per IP
WebSocket: <100ms broadcast latency
Cost: $0/month on free tier (Railway + Vercel)
Conclusion
Building a production-quality webhook debugger taught me about distributed systems, real-time communication, and API design. The project is open source at https://debuger.xyz

Top comments (0)