Webhook Debug Console

A focused internal developer tool for receiving, inspecting, and replaying webhook traffic in real time.

Use it while integrating third-party providers, debugging failed events, or validating payload contracts during local development.

What It Does

• Captures inbound requests from any HTTP method on a catch-all endpoint.
• Stores request method, path, headers, query params, body, and source IP.
• Auto-expires captured requests after 5 minutes.
• Provides a live inspector UI with filtering, sorting, deep detail tabs, and replay-ready cURL output.

Quick Start

1. Install dependencies

npm install

2. Configure environment

Create .env.local in the project root:

MONGODB_URI=mongodb+srv://<user>:<password>@<cluster>/<database>?retryWrites=true&w=majority

3. Start development server

npm run dev

Open http://localhost:3000.

4. Send a webhook

curl -X POST http://localhost:3000/api/hook/sms \
  -H "Content-Type: application/json" \
  -d '{"from":"+1234","text":"hello world"}'

Then inspect it in the dashboard.

Product Behavior

Endpoint pattern

• Capture endpoint: /api/hook/*
• Examples:
  • /api/hook/sms
  • /api/hook/provider/stripe
  • /api/hook/inbound?env=staging

Retention model

• Each request receives an expires_at timestamp (created_at + 5 minutes).
• A MongoDB TTL index removes expired entries automatically.

Methods supported

• GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD

Dashboard Features

• Live request inbox: refresh manually or use configurable auto-refresh.
• Filtering: server-side search by path, body text, IP, and content type.
• Method filter: scope to one HTTP method.
• Sort modes: newest, oldest, or path ordering.
• Pagination: server-side paging with adjustable page size.
• Operational stats: request count, recent traffic, unique paths, top method.
• Detail panel tabs:
  • headers
  • query params
  • parsed/raw body
  • replay cURL
  • raw request payload

Architecture

Frontend

• Next.js App Router
• React client-side dashboard in components/RequestInspector.tsx

Backend

• app/api/hook/[...path]/route.ts: catch-all webhook capture route
• app/api/requests/route.ts: request listing API for the UI

Data layer

• lib/mongodb.ts: MongoDB connection cache + index setup
• Collection: api_requests

Data Shape

Each stored request includes:

• method
• path
• headers
• query_params
• body_raw
• body_parsed (when JSON parsing succeeds)
• content_type
• ip
• created_at
• expires_at

Operational Notes

• This version intentionally runs in no-auth mode for internal/private environments.
• Do not expose publicly unless access controls are added.
• Designed for higher-throughput inbox browsing with server-side pagination and filters.

Scripts

• npm run dev - start development server
• npm run build - production build
• npm run start - run production server
• npm run lint - lint project

Suggested Next Improvements

• Add optional shared-secret guard for dashboard access.
• Add request export archive for longer retention and auditing.
• Add SSE/WebSocket streaming instead of interval polling.