⛓ Preact Devtool Webhook Inspector

A local webhook workbench for delivery inspection, fuzzy search, HMAC verification, JSONPath queries, replay, and cURL export.

---

✨ Highlights

• Delivery Stream: Searches captured events with Fuse.js and filters by status, source, latency, and attempts.
• Request Inspector: Separates payload, headers, endpoint response, and delivery-flow context for fast diagnosis.
• Real HMAC Checks: Uses browser Web Crypto to sign and verify HMAC-SHA-256 payloads.
• JSONPath Console: Runs jsonpath-plus queries with structured output and actionable parse errors.
• Replay Toolkit: Copies JSON, headers, endpoint URLs, and complete cURL commands for local reproduction.
• Safe Simulation: Creates deterministic local replay deliveries without contacting the displayed endpoint.
• Event Triage: Persists ignored state and keeps failed, retried, successful, and invalid-signature examples available.
• Validated Fixtures: Parses bundled and persisted events with Zod and restores the original stream on demand.
• Adaptive Inspector: Uses a dense desktop request workspace and a horizontal event navigator on mobile.

🧱 Project Structure

public/
|-- favicon.svg
`-- sample-webhooks.json
src/
|-- app.tsx
|-- index.css
|-- main.tsx
|-- components/
|   |-- event-list.tsx
|   |-- json-view.tsx
|   `-- verification-tools.tsx
|-- domain/
|   `-- webhooks.ts
`-- services/
    `-- webhook-store.ts

🛠️ Tech Stack

• Preact 10, TypeScript 6, Vite 8, and Tailwind CSS 4
• Web Crypto API, Fuse.js, jsonpath-plus, Zod, nanoid, and date-fns
• IndexedDB persistence through idb-keyval

📦 Included Demo Data

public/sample-webhooks.json contains synthetic successful, failed, retried, and deliberately invalid-signature deliveries from payment, commerce, GitHub, Vercel, and support systems. Payloads, headers, endpoints, responses, latency, and attempt history are included for immediate testing.

The bundled signing secret is intentionally public demo data. No replay contacts an external system.

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173.

🔌 Extension Notes & Nuances

• Replay never contacts an external endpoint; it creates a deterministic local delivery for safe experimentation.
• Signature verification uses the exact JSON.stringify body used during fixture hydration.
• The included secret is demonstrative and intentionally public; real signing secrets must never be shipped to a client.
• Production verification must use the exact raw request bytes before JSON parsing; reserialization can change whitespace or key order and invalidate a legitimate signature.
• Compare signatures in constant time on a trusted backend and validate timestamp tolerance to reduce replay risk.
• Redact credentials, personal data, and payment details before persisting or presenting captured traffic.
• Restrict real re-delivery targets, apply SSRF defenses, use idempotency keys, and retain an immutable attempt audit trail.
• Replace src/services/webhook-store.ts with a bounded event API or live stream while retaining the domain contract.
• The dense desktop inspection layout becomes a horizontal event rail and stacked request workspace on mobile.

🧪 Build & Checks

npm run format:check
npm run build
npm run preview
npm audit --omit=dev

🌐 Vercel Deployment

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.