DEV Community

ren-kasanova
ren-kasanova

Posted on

How I Built a Webhook Debugger with Hono, React 19, and SQLite

Every developer who's integrated webhooks knows the pain. You configure an endpoint, wait for a provider to fire a test event, check your server logs, realize the payload format isn't what you expected, reconfigure, and wait again. Repeat until you lose the will to live.

I built HookRelay to fix this. It gives you a unique URL that captures any incoming HTTP request and displays it in a real-time dashboard — headers, body, timing, everything.

The Problem

Webhook debugging is uniquely frustrating because:

  1. You can't control when they fire. Unlike API calls you initiate, webhooks arrive on their schedule.
  2. Payloads vary wildly. Every provider has a different format, and documentation is often incomplete.
  3. Failed deliveries disappear. Most providers retry a few times, then give up. If you weren't logging, that payload is gone.
  4. Local development is painful. You need ngrok or similar tunneling just to receive webhooks on localhost.

Architecture Decisions

Why Hono over Express

Hono is fast, lightweight, and has first-class TypeScript support. It runs on basically any JS runtime. For a tool that needs to handle bursts of incoming webhook traffic, Hono's performance characteristics made it the obvious choice.

Why SQLite over Postgres

Single-process deployment simplicity. HookRelay runs on Fly.io as one process with a SQLite file on a persistent volume. No connection pooling, no separate database server, no latency between app and DB. For a tool where each request writes one row and reads are scoped to a single user's endpoints, SQLite is more than enough.

Why SSE over WebSockets

Server-Sent Events are simpler. The dashboard only needs server-to-client streaming (new webhooks appearing in real-time). SSE handles this natively with automatic reconnection built into the browser. No handshake upgrade, no ping/pong, no library needed on the client.

The Capture Flow

When a webhook hits a HookRelay endpoint URL:

  1. The request is parsed — method, headers, body, query params, source IP
  2. A row is inserted into SQLite with all request metadata
  3. Any active SSE connections for that endpoint receive the new capture immediately
  4. The response returns 200 OK to the webhook provider

The entire flow takes single-digit milliseconds. Webhook providers see a fast, reliable endpoint.

One-Click Replay

This is the feature that saves the most time. See a captured webhook, click replay, and it re-sends the exact same request to any URL you specify — your local dev server, staging, production, wherever. No need to trigger the original event again.

Try It Out

HookRelay is live at hookrelay.fly.dev. The free tier gives you 1 endpoint with 100 captures per day and 24-hour retention — enough for most development workflows.

Pro tier ($29/mo) unlocks 10 endpoints, 10K captures/day, and 30-day retention for teams shipping in production.

Would love to hear what you think, and what features you'd want next.

Top comments (0)