Initial commit
This commit is contained in:
Kaki Filem Team
commit
f3d5de9f07
|
|
@ -0,0 +1,110 @@
|
|||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
*.so
|
||||
.Python
|
||||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
wheels/
|
||||
share/python-wheels/
|
||||
*.egg-info/
|
||||
.installed.cfg
|
||||
*.egg
|
||||
MANIFEST
|
||||
|
||||
# Virtual environments
|
||||
.env
|
||||
.venv
|
||||
env/
|
||||
venv/
|
||||
ENV/
|
||||
env.bak/
|
||||
venv.bak/
|
||||
|
||||
# Environment variables
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Database files
|
||||
*.db
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
|
||||
# IDE files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage reports
|
||||
htmlcov/
|
||||
.tox/
|
||||
.coverage
|
||||
.coverage.*
|
||||
.cache
|
||||
nosetests.xml
|
||||
coverage.xml
|
||||
*.cover
|
||||
.hypothesis/
|
||||
.pytest_cache/
|
||||
|
||||
# Railway specific
|
||||
.railway/
|
||||
|
||||
# Assets (design files)
|
||||
*.psd
|
||||
*.xcf
|
||||
*.ai
|
||||
*.sketch
|
||||
|
||||
# Archives
|
||||
*.zip
|
||||
*.tar.gz
|
||||
*.7z
|
||||
*.rar
|
||||
|
||||
# Temporary files
|
||||
*.bak
|
||||
*.tmp
|
||||
*.temp
|
||||
*~
|
||||
|
||||
# Node modules (if you add any frontend tooling)
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Production builds
|
||||
/dist
|
||||
/build
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
# Contributing to Webhook Catcher
|
||||
|
||||
Thanks for your interest in contributing to **Webhook Catcher** 🎉
|
||||
All kinds of contributions are welcome — bug reports, documentation improvements, and code changes.
|
||||
|
||||
---
|
||||
|
||||
## 🧭 Getting Started
|
||||
|
||||
1. Fork the repository
|
||||
2. Clone your fork locally
|
||||
3. Create a new branch from `main`:
|
||||
```bash
|
||||
git checkout -b feature/my-change
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🛠 Development Setup
|
||||
|
||||
### Requirements
|
||||
- Python 3.13+ // Changed from 3.9+
|
||||
- pip
|
||||
- (Optional) Docker
|
||||
|
||||
### Local setup
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
uvicorn main:app --reload
|
||||
```
|
||||
|
||||
The app will be available at:
|
||||
```
|
||||
http://localhost:8000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 Testing Changes
|
||||
|
||||
Before opening a PR, please ensure:
|
||||
|
||||
- The app starts without errors
|
||||
- `/healthz` returns `200 OK`
|
||||
- Webhooks can be received via `/webhook`
|
||||
- UI pages load correctly
|
||||
|
||||
For Railway-related changes, please test:
|
||||
- Deployment via the Railway template (volume auto-attached)
|
||||
- Application behavior across redeploys (data persistence)
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Database & Volumes (Important)
|
||||
|
||||
Webhook Catcher uses SQLite.
|
||||
|
||||
- The database path is `/app/data/webhooks.db`
|
||||
- When deployed via the **Railway template**, a persistent volume is
|
||||
**automatically attached and mounted** at `/app/data`
|
||||
- Data persists across redeploys without manual setup
|
||||
|
||||
For local development:
|
||||
- Data is stored on the local filesystem
|
||||
- Data loss on container rebuilds is expected unless you mount a volume manually
|
||||
|
||||
Please do not introduce hardcoded paths outside `/app/data`.
|
||||
|
||||
---
|
||||
|
||||
## 📦 Pull Request Guidelines
|
||||
|
||||
When opening a PR:
|
||||
|
||||
- Keep changes focused and small
|
||||
- Explain **why** the change is needed
|
||||
- Update documentation if behavior changes
|
||||
- Reference related issues when applicable
|
||||
|
||||
### Good PR titles
|
||||
- `Fix: handle empty webhook payloads`
|
||||
- `Docs: clarify Railway volume setup`
|
||||
- `Feature: protect UI with optional password`
|
||||
|
||||
---
|
||||
|
||||
## 🧹 Code Style
|
||||
|
||||
- Follow existing code patterns
|
||||
- Prefer readability over cleverness
|
||||
- Avoid introducing new dependencies unless necessary
|
||||
|
||||
---
|
||||
|
||||
## 🐞 Reporting Issues
|
||||
|
||||
If you find a bug:
|
||||
- Include steps to reproduce
|
||||
- Include logs or screenshots if relevant
|
||||
- Mention your platform (local, Railway, Docker)
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Code of Conduct
|
||||
|
||||
Be respectful and constructive.
|
||||
Harassment or toxic behavior will not be tolerated.
|
||||
|
||||
---
|
||||
|
||||
Thanks again for contributing — every improvement helps 🚀
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
FROM python:3.13-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt .
|
||||
RUN pip install -r requirements.txt
|
||||
|
||||
COPY app/ .
|
||||
|
||||
EXPOSE $PORT
|
||||
|
||||
CMD ["sh", "-c", "uvicorn main:app --host 0.0.0.0 --port ${PORT:-8080}"]
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2025 Aman
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# Webhook Catcher
|
||||
|
||||
> The easiest way to capture and debug webhooks in production and development.
|
||||
|
||||
A developer-friendly webhook debugging tool — ideal for testing GitHub/Stripe events, bot integrations, or any webhook-based workflow.
|
||||
Replay, filter, and forward webhooks in real time with zero config.
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- Capture and view incoming webhooks in real time
|
||||
- Search, filter, and export webhook logs
|
||||
- Replay webhooks to any target URL
|
||||
- Multi-service ready: forward webhooks to your own bot/service
|
||||
- **Production-ready admin protection** for sensitive operations
|
||||
- Deploy instantly on Railway or any platform
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Deploy on Railway (Recommended)
|
||||
|
||||
⚡ **Why Railway?**
|
||||
|
||||
Webhook Catcher is optimized for Railway:
|
||||
|
||||
- 🧠 Zero config — deploy in seconds
|
||||
- 🪄 Auto-generated domain (instantly test your webhook)
|
||||
- 💾 Automatic persistent storage (no data loss on redeploy)
|
||||
- 🔐 Built-in secret management & protection
|
||||
|
||||
---
|
||||
|
||||
## 💾 Persistent Storage (Railway)
|
||||
|
||||
Webhook Catcher uses SQLite for storage.
|
||||
|
||||
When deploying via the **Railway template**, a persistent volume is
|
||||
**automatically created and mounted** — no manual setup required.
|
||||
|
||||
✔ Data persists across redeploys
|
||||
✔ No configuration needed
|
||||
✔ Works out of the box
|
||||
|
||||
---
|
||||
|
||||
## ✨ Sophisticated Architecture Overview
|
||||
|
||||
```mermaid
|
||||
graph TB
|
||||
A[External Webhooks<br/>GitHub, Stripe, IoT] --> B[Load Balancer]
|
||||
B --> C[Webhook Catcher Service<br/>FastAPI + HTMX]
|
||||
C --> D[SQLite Database<br/>Persistent Volume]
|
||||
C --> E[Your Bot Service<br/>Python/Node/etc]
|
||||
E --> F[Discord/Slack/etc<br/>Notifications]
|
||||
C --> G[Real-time Web UI<br/>Live Updates]
|
||||
|
||||
style C fill:#0ea5e9
|
||||
style E fill:#10b981
|
||||
style D fill:#f59e0b
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧩 Use Cases
|
||||
|
||||
- Debug Stripe or GitHub webhooks in production
|
||||
- Build and test bots for Discord, Telegram, or Slack
|
||||
- Capture IoT webhook payloads for later processing
|
||||
- Replay webhooks to local dev or staging environments
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
1. **Deploy on Railway:**
|
||||
[](https://railway.com/deploy/webhook-catcher?referralCode=nIQTyp&utm_medium=integration&utm_source=template&utm_campaign=generic)
|
||||
|
||||
2. **Send a webhook:**
|
||||
Use your deployed `/webhook` endpoint with any service or tool (e.g., GitHub, Stripe, curl).
|
||||
|
||||
```bash
|
||||
curl -X POST https://your-app.railway.app/webhook \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"event": "test", "message": "Hello"}'
|
||||
```
|
||||
|
||||
3. **View and replay webhooks:**
|
||||
Open the web UI to see logs, search, export, or replay to another URL.
|
||||
|
||||
---
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Configuration
|
||||
|
||||
### Environment Variables
|
||||
|
||||
| Variable | Description | Required | Default |
|
||||
|----------|-------------|----------|---------|
|
||||
| `FORWARD_WEBHOOK_URL` | Forward incoming webhooks to another service | No | - |
|
||||
| `FORWARD_WEBHOOK_TOKEN` | Authentication token for secure forwarding | No | - |
|
||||
| `ADMIN_TOKEN` | **Admin protection token for sensitive operations** | No | - |
|
||||
| `FRONTEND_PASSWORD` | **Password to protect the web UI from public access** | No | - |
|
||||
|
||||
### 🔒 Admin Protection (Production Feature)
|
||||
|
||||
The `ADMIN_TOKEN` environment variable provides **production-grade security** for sensitive operations:
|
||||
|
||||
#### Protected Operations:
|
||||
- **Clear all logs** (`POST /clear`)
|
||||
- **Replay webhooks** (`POST /replay/{id}`)
|
||||
|
||||
#### Security Modes:
|
||||
|
||||
**1. No Protection (Development)**
|
||||
```bash
|
||||
# Leave ADMIN_TOKEN empty or unset
|
||||
ADMIN_TOKEN=""
|
||||
```
|
||||
- All operations are publicly accessible
|
||||
- Perfect for development and testing
|
||||
|
||||
**2. Token Protection (Production)**
|
||||
```bash
|
||||
# Set a strong admin token
|
||||
ADMIN_TOKEN="your-secret-admin-token-123"
|
||||
```
|
||||
- Admin operations require authentication
|
||||
- Token can be provided via:
|
||||
- Header: `X-Admin-Token: your-secret-admin-token-123`
|
||||
- Query parameter: `?admin_token=your-secret-admin-token-123`
|
||||
|
||||
#### Usage Examples:
|
||||
|
||||
**Clear logs with admin token:**
|
||||
```bash
|
||||
# Via header (recommended)
|
||||
curl -X POST "https://your-app.railway.app/clear" \
|
||||
-H "X-Admin-Token: your-secret-admin-token-123"
|
||||
|
||||
# Via query parameter
|
||||
curl -X POST "https://your-app.railway.app/clear?admin_token=your-secret-admin-token-123"
|
||||
```
|
||||
|
||||
**Replay webhook with admin token:**
|
||||
```bash
|
||||
curl -X POST "https://your-app.railway.app/replay/1?target_url=https://httpbin.org/post" \
|
||||
-H "X-Admin-Token: your-secret-admin-token-123"
|
||||
```
|
||||
|
||||
**Health check shows protection status:**
|
||||
```bash
|
||||
curl https://your-app.railway.app/healthz
|
||||
# Returns: {"status": "ok", "admin_protected": true}
|
||||
```
|
||||
|
||||
#### Security Best Practices:
|
||||
- Use a strong, random token (minimum 20 characters)
|
||||
- Keep the token secret and rotate it regularly
|
||||
- Use headers instead of query parameters when possible
|
||||
- Enable admin protection for production deployments
|
||||
|
||||
### 🔐 Frontend Password Protection
|
||||
|
||||
The `FRONTEND_PASSWORD` environment variable protects the **web UI** from public access using HTTP Basic Authentication.
|
||||
|
||||
#### Protected Routes:
|
||||
- **Home page** (`GET /`)
|
||||
- **Logs view** (`GET /logs`, `GET /logs/view`)
|
||||
- **Export logs** (`GET /export`)
|
||||
- **List webhooks** (`GET /webhooks`)
|
||||
|
||||
#### Unprotected Routes (remain open):
|
||||
- **Webhook receiver** (`POST /webhook`) - external services must be able to send webhooks
|
||||
- **Health check** (`GET /healthz`)
|
||||
- **Config status** (`GET /config`)
|
||||
|
||||
#### Usage:
|
||||
|
||||
**1. No Protection (Development)**
|
||||
```bash
|
||||
# Leave FRONTEND_PASSWORD empty or unset
|
||||
FRONTEND_PASSWORD=""
|
||||
```
|
||||
- Web UI is publicly accessible
|
||||
- Perfect for development and testing
|
||||
|
||||
**2. Password Protection (Production)**
|
||||
```bash
|
||||
# Set a password to protect the web UI
|
||||
FRONTEND_PASSWORD="your-secret-password"
|
||||
```
|
||||
- Accessing the web UI prompts for HTTP Basic Auth
|
||||
- Username can be anything (only password is checked)
|
||||
- Browser remembers credentials for the session
|
||||
|
||||
#### How it works:
|
||||
When `FRONTEND_PASSWORD` is set, accessing protected routes will prompt your browser's built-in HTTP Basic Auth dialog. Enter any username and the configured password to access the UI.
|
||||
|
||||
---
|
||||
|
||||
## Advanced Features
|
||||
|
||||
### Multi-Service Architecture
|
||||
- **Internal networking**: Link your own service using `FORWARD_WEBHOOK_URL`
|
||||
- **Secure forwarding**: Use `FORWARD_WEBHOOK_TOKEN` for authenticated service-to-service communication
|
||||
- **Real-time processing**: Forward webhooks immediately while storing for replay
|
||||
|
||||
### Data Persistence
|
||||
- **SQLite database** with volume mounting
|
||||
- **Export capabilities**: JSON and CSV formats
|
||||
- **Search functionality**: Full-text search across webhook payloads
|
||||
- **Replay system**: Resend any webhook to any URL
|
||||
|
||||
### Modern UI/UX
|
||||
- **Real-time updates** with HTMX and Server-Sent Events
|
||||
- **Dark/light mode** with system preference detection
|
||||
- **Responsive design** optimized for mobile and desktop
|
||||
- **Syntax highlighting** for JSON payloads with Prism.js
|
||||
|
||||
---
|
||||
|
||||
## Platform Features
|
||||
|
||||
This template is optimized for modern cloud platforms:
|
||||
|
||||
- ✅ **One-click deployment** with railway.json template
|
||||
- ✅ **Environment variable management** for configuration
|
||||
- ✅ **Automatic persistent storage** via Railway volumes
|
||||
- ✅ **Health checks** for service monitoring
|
||||
- ✅ **Internal networking** for multi-service communication
|
||||
- ✅ **Production security** with admin token protection
|
||||
- ✅ **Modern web stack** (FastAPI + HTMX + TailwindCSS)
|
||||
- ✅ **Cross-platform compatibility** (Unix/Windows/PowerShell)
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
|
||||
MIT License - Use freely for personal and commercial projects.
|
||||
|
|
@ -0,0 +1,377 @@
|
|||
# Simple Testing Guide - Webhook Catcher
|
||||
|
||||
Quick commands to test the webhook catcher deployment.
|
||||
|
||||
**Replace `YOUR-DEPLOYMENT-URL` with your actual deployment URL**
|
||||
|
||||
## 🧪 Basic Tests
|
||||
|
||||
### Health Check
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl https://YOUR-DEPLOYMENT-URL.up.railway.app/healthz
|
||||
|
||||
# Windows CMD
|
||||
curl https://YOUR-DEPLOYMENT-URL.up.railway.app/healthz
|
||||
|
||||
# Windows PowerShell
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/healthz"
|
||||
```
|
||||
|
||||
### List Available Webhooks (for replay testing)
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl https://YOUR-DEPLOYMENT-URL.up.railway.app/webhooks
|
||||
|
||||
# Windows CMD
|
||||
curl https://YOUR-DEPLOYMENT-URL.up.railway.app/webhooks
|
||||
|
||||
# Windows PowerShell
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhooks"
|
||||
```
|
||||
|
||||
### Simple Webhook Test
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"event": "test", "message": "Hello World!"}'
|
||||
|
||||
# Windows CMD
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" ^
|
||||
-H "Content-Type: application/json" ^
|
||||
-d "{\"event\": \"test\", \"message\": \"Hello World!\"}"
|
||||
```
|
||||
|
||||
```powershell
|
||||
# Windows PowerShell
|
||||
$body = @{
|
||||
event = "test"
|
||||
message = "Hello World!"
|
||||
timestamp = (Get-Date -Format "yyyy-MM-ddTHH:mm:ssZ")
|
||||
} | ConvertTo-Json
|
||||
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" `
|
||||
-Method POST -Body $body -ContentType "application/json"
|
||||
```
|
||||
|
||||
### Complex JSON Test
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"user": {"id": 123, "name": "Hello"}, "event": "signup"}'
|
||||
|
||||
# Windows CMD
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" ^
|
||||
-H "Content-Type: application/json" ^
|
||||
-d "{\"user\": {\"id\": 123, \"name\": \"Hello\"}, \"event\": \"signup\"}"
|
||||
```
|
||||
|
||||
```powershell
|
||||
# Windows PowerShell
|
||||
$body = @{
|
||||
user = @{
|
||||
id = 123
|
||||
name = "testuser"
|
||||
email = "test@example.com"
|
||||
}
|
||||
event = "signup"
|
||||
timestamp = (Get-Date -Format "yyyy-MM-ddTHH:mm:ssZ")
|
||||
} | ConvertTo-Json -Depth 3
|
||||
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" `
|
||||
-Method POST -Body $body -ContentType "application/json"
|
||||
```
|
||||
|
||||
### GitHub-style Test
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "X-GitHub-Event: push" \
|
||||
-d '{"action": "opened", "repository": {"name": "test-repo"}}'
|
||||
|
||||
# Windows CMD
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" ^
|
||||
-H "Content-Type: application/json" ^
|
||||
-H "X-GitHub-Event: push" ^
|
||||
-d "{\"action\": \"opened\", \"repository\": {\"name\": \"test-repo\"}}"
|
||||
```
|
||||
|
||||
```powershell
|
||||
# Windows PowerShell
|
||||
$body = @{
|
||||
action = "opened"
|
||||
repository = @{
|
||||
name = "test-repo"
|
||||
full_name = "user/test-repo"
|
||||
}
|
||||
pull_request = @{
|
||||
title = "Test Pull Request"
|
||||
user = @{ login = "testuser" }
|
||||
}
|
||||
} | ConvertTo-Json -Depth 3
|
||||
|
||||
$headers = @{
|
||||
"Content-Type" = "application/json"
|
||||
"X-GitHub-Event" = "push"
|
||||
}
|
||||
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" `
|
||||
-Method POST -Body $body -Headers $headers
|
||||
```
|
||||
|
||||
## 🔒 Admin Protection Tests
|
||||
|
||||
### Check Admin Status
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl https://YOUR-DEPLOYMENT-URL.up.railway.app/healthz
|
||||
|
||||
# Windows CMD
|
||||
curl https://YOUR-DEPLOYMENT-URL.up.railway.app/healthz
|
||||
|
||||
# Windows PowerShell
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/healthz"
|
||||
```
|
||||
**Look for**: `"admin_protected": true/false`
|
||||
|
||||
### Test Clear Without Token (Should Fail if Protected)
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/clear"
|
||||
|
||||
# Windows CMD
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/clear"
|
||||
|
||||
# Windows PowerShell
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/clear" -Method POST
|
||||
```
|
||||
**Expected if protected**: `401 Unauthorized`
|
||||
|
||||
### Test Clear With Admin Token (Should Work)
|
||||
```bash
|
||||
# Unix/Linux/macOS
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/clear" \
|
||||
-H "X-Admin-Token: your-secret-admin-token-123"
|
||||
|
||||
# Windows CMD
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/clear" ^
|
||||
-H "X-Admin-Token: your-secret-admin-token-123"
|
||||
```
|
||||
|
||||
```powershell
|
||||
# Windows PowerShell
|
||||
$headers = @{"X-Admin-Token" = "your-secret-admin-token-123"}
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/clear" `
|
||||
-Method POST -Headers $headers
|
||||
```
|
||||
**Expected**: `{"status": "cleared"}`
|
||||
|
||||
### Test Replay With Admin Token
|
||||
|
||||
**Step 1: Send a webhook to replay**
|
||||
```powershell
|
||||
# Windows PowerShell
|
||||
$testBody = @{
|
||||
test = "replay"
|
||||
timestamp = (Get-Date -Format "yyyy-MM-ddTHH:mm:ssZ")
|
||||
message = "This will be replayed"
|
||||
} | ConvertTo-Json
|
||||
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhook" `
|
||||
-Method POST -Body $testBody -ContentType "application/json"
|
||||
```
|
||||
|
||||
**Step 2: List webhooks to get the ID**
|
||||
```powershell
|
||||
# Windows PowerShell
|
||||
$webhooks = Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/webhooks"
|
||||
Write-Host "Available webhooks:"
|
||||
$webhooks.webhooks | Format-Table id, timestamp, body_preview
|
||||
```
|
||||
|
||||
**Step 3: Replay the webhook (use the correct ID from step 2)**
|
||||
```bash
|
||||
# Unix/Linux/macOS - Replace {ID} with actual webhook ID
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/replay/{ID}?target_url=https://httpbin.org/post" \
|
||||
-H "X-Admin-Token: your-secret-admin-token-123"
|
||||
|
||||
# Windows CMD - Replace {ID} with actual webhook ID
|
||||
curl -X POST "https://YOUR-DEPLOYMENT-URL.up.railway.app/replay/{ID}?target_url=https://httpbin.org/post" ^
|
||||
-H "X-Admin-Token: your-secret-admin-token-123"
|
||||
```
|
||||
|
||||
```powershell
|
||||
# Windows PowerShell - Replace {ID} with actual webhook ID from step 2
|
||||
$webhookId = 1 # Use the actual ID from the list above
|
||||
$headers = @{"X-Admin-Token" = "your-secret-admin-token-123"}
|
||||
Invoke-RestMethod -Uri "https://YOUR-DEPLOYMENT-URL.up.railway.app/replay/$webhookId?target_url=https://httpbin.org/post" `
|
||||
-Method POST -Headers $headers
|
||||
```
|
||||
|
||||
## 🧪 Complete Test Workflow Scripts
|
||||
|
||||
### PowerShell Complete Test
|
||||
Save as `complete-test.ps1`:
|
||||
```powershell
|
||||
param(
|
||||
[string]$BaseUrl = "https://YOUR-DEPLOYMENT-URL.up.railway.app",
|
||||
[string]$AdminToken = "your-secret-admin-token-123"
|
||||
)
|
||||
|
||||
Write-Host "🚀 Testing Webhook Catcher: $BaseUrl" -ForegroundColor Green
|
||||
|
||||
# 1. Health Check
|
||||
Write-Host "`n1. Health Check" -ForegroundColor Yellow
|
||||
try {
|
||||
$health = Invoke-RestMethod -Uri "$BaseUrl/healthz"
|
||||
Write-Host "✅ Status: $($health.status)" -ForegroundColor Green
|
||||
Write-Host "✅ Admin Protected: $($health.admin_protected)" -ForegroundColor Green
|
||||
} catch {
|
||||
Write-Host "❌ Health check failed: $($_.Exception.Message)" -ForegroundColor Red
|
||||
exit 1
|
||||
}
|
||||
|
||||
# 2. Send Test Webhook
|
||||
Write-Host "`n2. Sending Test Webhook" -ForegroundColor Yellow
|
||||
$testBody = @{
|
||||
event = "complete-test"
|
||||
message = "PowerShell test webhook"
|
||||
timestamp = (Get-Date -Format "yyyy-MM-ddTHH:mm:ssZ")
|
||||
source = "PowerShell Script"
|
||||
} | ConvertTo-Json
|
||||
|
||||
try {
|
||||
$webhookResult = Invoke-RestMethod -Uri "$BaseUrl/webhook" `
|
||||
-Method POST -Body $testBody -ContentType "application/json"
|
||||
Write-Host "✅ Webhook sent: $($webhookResult.status)" -ForegroundColor Green
|
||||
} catch {
|
||||
Write-Host "❌ Webhook send failed: $($_.Exception.Message)" -ForegroundColor Red
|
||||
}
|
||||
|
||||
# 3. List Available Webhooks
|
||||
Write-Host "`n3. Listing Available Webhooks" -ForegroundColor Yellow
|
||||
try {
|
||||
$webhooks = Invoke-RestMethod -Uri "$BaseUrl/webhooks"
|
||||
Write-Host "✅ Found $($webhooks.count) webhooks" -ForegroundColor Green
|
||||
|
||||
if ($webhooks.count -gt 0) {
|
||||
$latestId = $webhooks.webhooks[0].id
|
||||
Write-Host "📋 Latest webhook ID: $latestId" -ForegroundColor Cyan
|
||||
|
||||
# 4. Test Replay
|
||||
Write-Host "`n4. Testing Webhook Replay" -ForegroundColor Yellow
|
||||
$headers = @{"X-Admin-Token" = $AdminToken}
|
||||
try {
|
||||
$replayResult = Invoke-RestMethod -Uri "$BaseUrl/replay/$latestId?target_url=https://httpbin.org/post" `
|
||||
-Method POST -Headers $headers
|
||||
Write-Host "✅ Replay successful: $($replayResult.status)" -ForegroundColor Green
|
||||
Write-Host "📊 Response status: $($replayResult.response_status)" -ForegroundColor Cyan
|
||||
} catch {
|
||||
Write-Host "❌ Replay failed: $($_.Exception.Message)" -ForegroundColor Red
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
Write-Host "❌ Webhook listing failed: $($_.Exception.Message)" -ForegroundColor Red
|
||||
}
|
||||
|
||||
Write-Host "`n🎉 Test complete! Check your webhook UI at: $BaseUrl" -ForegroundColor Magenta
|
||||
Write-Host "📋 View logs at: $BaseUrl/logs/view" -ForegroundColor Magenta
|
||||
```
|
||||
|
||||
### Unix/Linux/macOS Test Script
|
||||
Save as `complete-test.sh`:
|
||||
```bash
|
||||
#!/bin/bash
|
||||
BASE_URL="${1:-https://YOUR-DEPLOYMENT-URL.up.railway.app}"
|
||||
ADMIN_TOKEN="${2:-your-secret-admin-token-123}"
|
||||
|
||||
echo "🚀 Testing Webhook Catcher: $BASE_URL"
|
||||
|
||||
# 1. Health Check
|
||||
echo "1. Health Check"
|
||||
HEALTH=$(curl -s "$BASE_URL/healthz")
|
||||
echo "✅ Health: $HEALTH"
|
||||
|
||||
# 2. Send Test Webhook
|
||||
echo "2. Sending Test Webhook"
|
||||
WEBHOOK_RESULT=$(curl -s -X POST "$BASE_URL/webhook" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d "{\"event\": \"bash-test\", \"message\": \"Hello from bash!\", \"timestamp\": \"$(date -Iseconds)\"}")
|
||||
echo "✅ Webhook: $WEBHOOK_RESULT"
|
||||
|
||||
# 3. List Webhooks
|
||||
echo "3. Listing Webhooks"
|
||||
WEBHOOKS=$(curl -s "$BASE_URL/webhooks")
|
||||
echo "✅ Webhooks: $WEBHOOKS"
|
||||
|
||||
# 4. Get latest webhook ID and replay
|
||||
LATEST_ID=$(echo "$WEBHOOKS" | jq -r '.webhooks[0].id // empty')
|
||||
if [ ! -z "$LATEST_ID" ]; then
|
||||
echo "4. Replaying webhook ID: $LATEST_ID"
|
||||
REPLAY_RESULT=$(curl -s -X POST "$BASE_URL/replay/$LATEST_ID?target_url=https://httpbin.org/post" \
|
||||
-H "X-Admin-Token: $ADMIN_TOKEN")
|
||||
echo "✅ Replay: $REPLAY_RESULT"
|
||||
fi
|
||||
|
||||
echo "🎉 Test complete! Check your webhook UI at: $BASE_URL"
|
||||
```
|
||||
|
||||
## 🌐 Web Interface Testing
|
||||
|
||||
1. Visit: `https://YOUR-DEPLOYMENT-URL.up.railway.app/`
|
||||
2. Check logs: `https://YOUR-DEPLOYMENT-URL.up.railway.app/logs/view`
|
||||
3. Send test webhook using the built-in form
|
||||
4. Try search, export, and replay features
|
||||
5. Test admin operations (clear, replay) with/without protection
|
||||
|
||||
## ✅ Expected Results
|
||||
|
||||
- All webhook tests return `{"status": "success", ...}`
|
||||
- Webhooks appear in real-time on the web interface
|
||||
- `/webhooks` endpoint lists available webhook IDs
|
||||
- Search and export functions work
|
||||
- Health check returns `{"status": "ok", "admin_protected": true/false}`
|
||||
- Admin operations respect token protection if enabled
|
||||
- Replay works with correct webhook IDs from `/webhooks` endpoint
|
||||
|
||||
## 🚨 Common Issues & Solutions
|
||||
|
||||
### Issue: "Webhook not found" during replay
|
||||
**Solution**: Use `GET /webhooks` to see available webhook IDs first
|
||||
|
||||
### Issue: "Internal Server Error" during replay
|
||||
**Solution**: Check that the target URL is valid (starts with http:// or https://)
|
||||
|
||||
### Issue: Admin token not working
|
||||
**Solution**: Ensure ADMIN_TOKEN environment variable is set correctly
|
||||
|
||||
### Issue: No webhooks showing up
|
||||
**Solution**: Send a test webhook first using the `/webhook` endpoint
|
||||
|
||||
## 🏆 Key Features to Evaluate
|
||||
|
||||
- **Multi-service architecture** (if FORWARD_WEBHOOK_URL is configured)
|
||||
- **Real-time web interface** with live updates
|
||||
- **Multiple webhook formats** (JSON, plain text, form data)
|
||||
- **Production features** (search, export, replay, admin protection)
|
||||
- **Security features** (admin token protection for sensitive operations)
|
||||
- **Cross-platform compatibility** (Unix, Windows CMD, PowerShell)
|
||||
- **Error handling** (proper HTTP status codes and error messages)
|
||||
|
||||
Total testing time: ~5 minutes
|
||||
|
||||
---
|
||||
|
||||
## 📝 Quick Setup
|
||||
|
||||
⚡ This project is optimized for Railway, but you can deploy it anywhere you like.
|
||||
|
||||
1. Deploy using your preferred platform (Railway recommended for easiest setup)
|
||||
2. Copy your deployment URL from your hosting dashboard
|
||||
3. Replace `YOUR-DEPLOYMENT-URL` in commands above
|
||||
4. Run tests to evaluate the webhook catcher
|
||||
5. Test on your preferred platform (Unix/Windows/PowerShell)
|
||||
6. Use `/webhooks` endpoint to get valid IDs before replay testing
|
||||
|
|
@ -0,0 +1,654 @@
|
|||
from fastapi import FastAPI, Request, HTTPException, Query, Depends
|
||||
from fastapi.responses import HTMLResponse, Response
|
||||
from fastapi.templating import Jinja2Templates
|
||||
from fastapi.security import HTTPBasic, HTTPBasicCredentials
|
||||
from fastapi.staticfiles import StaticFiles
|
||||
from datetime import datetime
|
||||
import sqlite3
|
||||
import json
|
||||
import httpx
|
||||
import os
|
||||
import csv
|
||||
import base64
|
||||
from io import StringIO
|
||||
from urllib.parse import urlparse
|
||||
import asyncio
|
||||
import logging
|
||||
|
||||
logging.basicConfig(level=logging.INFO)
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
|
||||
app = FastAPI(title="Webhook Catcher")
|
||||
|
||||
app.mount(
|
||||
"/static",
|
||||
StaticFiles(directory=os.path.join(BASE_DIR, "static")),
|
||||
name="static"
|
||||
)
|
||||
|
||||
templates = Jinja2Templates(
|
||||
directory=os.path.join(BASE_DIR, "templates")
|
||||
)
|
||||
|
||||
templates.env.filters["tojson"] = lambda value, indent=2: json.dumps(value, indent=indent)
|
||||
|
||||
SENSITIVE_HEADERS = {'authorization', 'cookie', 'x-api-key', 'api-key'}
|
||||
security = HTTPBasic()
|
||||
|
||||
FORWARD_WEBHOOK_URL = os.getenv("FORWARD_WEBHOOK_URL")
|
||||
FORWARD_WEBHOOK_TOKEN = os.getenv("FORWARD_WEBHOOK_TOKEN")
|
||||
ADMIN_TOKEN = os.getenv("ADMIN_TOKEN")
|
||||
FRONTEND_PASSWORD = os.getenv("FRONTEND_PASSWORD")
|
||||
|
||||
# Database configuration - single source of truth for DB path
|
||||
DATA_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "data")
|
||||
DB_PATH = os.path.join(DATA_DIR, "webhooks.db")
|
||||
|
||||
def verify_admin_token(request: Request) -> bool:
|
||||
"""Verify admin token from header or query parameter"""
|
||||
if not ADMIN_TOKEN or ADMIN_TOKEN.strip() == "":
|
||||
logger.info("No ADMIN_TOKEN set or empty, allowing access")
|
||||
return True
|
||||
|
||||
token = request.headers.get("X-Admin-Token")
|
||||
if token and token == ADMIN_TOKEN:
|
||||
logger.info("Valid admin token from header")
|
||||
return True
|
||||
|
||||
token = request.query_params.get("admin_token")
|
||||
if token and token == ADMIN_TOKEN:
|
||||
logger.info("Valid admin token from query")
|
||||
return True
|
||||
|
||||
logger.warning("Admin token verification failed")
|
||||
return False
|
||||
|
||||
def require_admin(request: Request):
|
||||
"""Dependency to require admin authentication"""
|
||||
if not verify_admin_token(request):
|
||||
logger.warning("Admin access denied")
|
||||
raise HTTPException(
|
||||
status_code=401,
|
||||
detail="Admin token required. Set X-Admin-Token header or admin_token query parameter.",
|
||||
headers={"WWW-Authenticate": "Bearer"}
|
||||
)
|
||||
return True
|
||||
|
||||
def get_optional_credentials(request: Request):
|
||||
"""Get HTTP Basic credentials if provided, or None if not."""
|
||||
auth_header = request.headers.get("Authorization")
|
||||
if not auth_header or not auth_header.startswith("Basic "):
|
||||
return None
|
||||
try:
|
||||
credentials = base64.b64decode(auth_header[6:]).decode("utf-8")
|
||||
username, _, password = credentials.partition(":")
|
||||
return HTTPBasicCredentials(username=username, password=password)
|
||||
except Exception:
|
||||
return None
|
||||
|
||||
def verify_frontend_password(request: Request):
|
||||
"""Dependency to require frontend password via HTTP Basic Auth.
|
||||
|
||||
If FRONTEND_PASSWORD is not set, access is allowed without authentication.
|
||||
Username can be anything; only the password is checked.
|
||||
"""
|
||||
if not FRONTEND_PASSWORD or FRONTEND_PASSWORD.strip() == "":
|
||||
return True # No protection if password not set
|
||||
|
||||
credentials = get_optional_credentials(request)
|
||||
if credentials and credentials.password == FRONTEND_PASSWORD:
|
||||
return True
|
||||
|
||||
raise HTTPException(
|
||||
status_code=401,
|
||||
detail="Invalid password",
|
||||
headers={"WWW-Authenticate": "Basic realm=\"Webhook Catcher\""}
|
||||
)
|
||||
|
||||
def sanitize_headers(headers):
|
||||
"""Redact sensitive header values"""
|
||||
return {k: '***REDACTED***' if k.lower() in SENSITIVE_HEADERS else v
|
||||
for k, v in headers.items()}
|
||||
|
||||
def validate_url(url: str) -> bool:
|
||||
"""Basic URL validation to prevent SSRF"""
|
||||
try:
|
||||
result = urlparse(url)
|
||||
return all([result.scheme in ['http', 'https'], result.netloc])
|
||||
except:
|
||||
return False
|
||||
|
||||
def try_json(data: str):
|
||||
"""Safely parse JSON data"""
|
||||
try:
|
||||
return json.loads(data)
|
||||
except:
|
||||
return None
|
||||
|
||||
def extract_metadata(headers: dict) -> dict:
|
||||
"""Extract useful metadata from headers"""
|
||||
return {
|
||||
"ip": headers.get("x-real-ip") or headers.get("x-forwarded-for") or "Unknown",
|
||||
"user_agent": headers.get("user-agent", "Unknown"),
|
||||
"source": headers.get("x-webhook-source", "Unknown"),
|
||||
"timestamp": headers.get("x-request-start", None)
|
||||
}
|
||||
|
||||
def format_timestamp(timestamp):
|
||||
"""Format timestamp consistently with relative time"""
|
||||
try:
|
||||
dt = datetime.fromisoformat(timestamp)
|
||||
return {
|
||||
"iso": dt.isoformat(),
|
||||
"display": dt.strftime("%Y-%m-%d %H:%M:%S")
|
||||
}
|
||||
except:
|
||||
return {
|
||||
"iso": timestamp,
|
||||
"display": timestamp
|
||||
}
|
||||
|
||||
def init_db():
|
||||
# Ensure data directory exists
|
||||
os.makedirs(DATA_DIR, exist_ok=True)
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
c.execute('''
|
||||
CREATE TABLE IF NOT EXISTS webhooks
|
||||
(id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
timestamp TEXT,
|
||||
headers TEXT,
|
||||
body TEXT)
|
||||
''')
|
||||
conn.commit()
|
||||
conn.close()
|
||||
|
||||
@app.on_event("startup")
|
||||
async def startup_event():
|
||||
init_db()
|
||||
|
||||
@app.get("/", response_class=HTMLResponse)
|
||||
async def home(request: Request, _: bool = Depends(verify_frontend_password)):
|
||||
return templates.TemplateResponse("index.html", {"request": request})
|
||||
|
||||
@app.get("/healthz")
|
||||
async def health_check():
|
||||
"""Simple health check endpoint"""
|
||||
try:
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
conn.close()
|
||||
return {"status": "ok", "admin_protected": bool(ADMIN_TOKEN and ADMIN_TOKEN.strip())}
|
||||
except Exception as e:
|
||||
logger.error(f"Health check failed: {e}")
|
||||
return {"status": "error", "error": str(e)}
|
||||
|
||||
async def forward_webhook(headers: dict, body: str, original_url: str) -> dict:
|
||||
"""Forward webhook to configured endpoint if enabled"""
|
||||
if not FORWARD_WEBHOOK_URL:
|
||||
return {"status": "disabled", "message": "Forwarding not configured"}
|
||||
|
||||
try:
|
||||
forward_headers = {
|
||||
"Content-Type": "application/json",
|
||||
"X-Forwarded-From": original_url,
|
||||
"X-Original-Timestamp": datetime.now().isoformat()
|
||||
}
|
||||
|
||||
if FORWARD_WEBHOOK_TOKEN:
|
||||
forward_headers["Authorization"] = f"Bearer {FORWARD_WEBHOOK_TOKEN}"
|
||||
|
||||
safe_headers = {k: v for k, v in headers.items()
|
||||
if k.lower() not in SENSITIVE_HEADERS}
|
||||
forward_headers.update({f"X-Original-{k}": v for k, v in safe_headers.items()})
|
||||
|
||||
async with httpx.AsyncClient(timeout=10.0) as client:
|
||||
response = await client.post(
|
||||
FORWARD_WEBHOOK_URL,
|
||||
content=body,
|
||||
headers=forward_headers
|
||||
)
|
||||
|
||||
return {
|
||||
"status": "success",
|
||||
"target_url": FORWARD_WEBHOOK_URL,
|
||||
"response_status": response.status_code,
|
||||
"response_time_ms": int(response.elapsed.total_seconds() * 1000)
|
||||
}
|
||||
except Exception as e:
|
||||
return {
|
||||
"status": "error",
|
||||
"target_url": FORWARD_WEBHOOK_URL,
|
||||
"error": str(e)
|
||||
}
|
||||
|
||||
@app.post("/webhook")
|
||||
async def webhook(request: Request):
|
||||
try:
|
||||
body = await request.body()
|
||||
headers = dict(request.headers)
|
||||
|
||||
body_str = ""
|
||||
if body:
|
||||
try:
|
||||
body_str = body.decode('utf-8')
|
||||
except UnicodeDecodeError:
|
||||
body_str = body.decode('utf-8', errors='replace')
|
||||
else:
|
||||
body_str = "{}"
|
||||
|
||||
parsed_json = None
|
||||
try:
|
||||
if body_str.strip():
|
||||
parsed_json = json.loads(body_str)
|
||||
except json.JSONDecodeError:
|
||||
pass
|
||||
|
||||
print(f"Received webhook: {body_str}")
|
||||
print(f"Headers: {headers}")
|
||||
|
||||
forward_task = None
|
||||
if FORWARD_WEBHOOK_URL:
|
||||
forward_task = asyncio.create_task(
|
||||
forward_webhook(headers, body_str, str(request.url))
|
||||
)
|
||||
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
|
||||
print("Inserting into database...")
|
||||
c.execute(
|
||||
"INSERT INTO webhooks (timestamp, headers, body) VALUES (?, ?, ?)",
|
||||
(datetime.now().isoformat(), json.dumps(headers), body_str)
|
||||
)
|
||||
conn.commit()
|
||||
conn.close()
|
||||
print("Database insert complete")
|
||||
|
||||
forwarding_result = None
|
||||
if forward_task:
|
||||
try:
|
||||
forwarding_result = await forward_task
|
||||
print(f"Forwarding result: {forwarding_result}")
|
||||
except Exception as e:
|
||||
print(f"Forwarding failed: {e}")
|
||||
forwarding_result = {"status": "error", "error": str(e)}
|
||||
|
||||
response_data = {
|
||||
"status": "success",
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
"received_body": body_str,
|
||||
"is_json": parsed_json is not None,
|
||||
"forwarding": forwarding_result
|
||||
}
|
||||
|
||||
return response_data
|
||||
except Exception as e:
|
||||
print(f"Error processing webhook: {str(e)}")
|
||||
raise HTTPException(
|
||||
status_code=500,
|
||||
detail=f"Failed to process webhook: {str(e)}"
|
||||
)
|
||||
|
||||
def get_webhook_logs(offset: int = 0, limit: int = 20, search: str = None):
|
||||
"""Helper function to fetch webhook logs"""
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
|
||||
try:
|
||||
if search:
|
||||
search = search.strip()
|
||||
search_terms = [f"%{term}%" for term in search.split()]
|
||||
where_clauses = []
|
||||
params = []
|
||||
|
||||
for term in search_terms:
|
||||
where_clauses.extend([
|
||||
"body LIKE ?",
|
||||
"headers LIKE ?",
|
||||
"timestamp LIKE ?"
|
||||
])
|
||||
params.extend([term, term, term])
|
||||
|
||||
where_sql = " OR ".join(where_clauses)
|
||||
|
||||
c.execute(f"SELECT COUNT(*) FROM webhooks WHERE {where_sql}", params)
|
||||
total_count = c.fetchone()[0]
|
||||
|
||||
c.execute(f"""
|
||||
SELECT * FROM webhooks
|
||||
WHERE {where_sql}
|
||||
ORDER BY timestamp DESC LIMIT ? OFFSET ?
|
||||
""", params + [limit, offset])
|
||||
else:
|
||||
c.execute("SELECT COUNT(*) FROM webhooks")
|
||||
total_count = c.fetchone()[0]
|
||||
c.execute("""
|
||||
SELECT * FROM webhooks
|
||||
ORDER BY timestamp DESC
|
||||
LIMIT ? OFFSET ?
|
||||
""", (limit, offset))
|
||||
|
||||
logs = [
|
||||
{
|
||||
"id": row[0],
|
||||
"timestamp": format_timestamp(row[1]),
|
||||
"headers": sanitize_headers(json.loads(row[2])),
|
||||
"metadata": extract_metadata(json.loads(row[2])),
|
||||
"body": row[3],
|
||||
"parsed_body": try_json(row[3]),
|
||||
"matches": highlight_search_matches(row[3], search) if search else None
|
||||
}
|
||||
for row in c.fetchall()
|
||||
]
|
||||
|
||||
return logs, total_count, (offset + len(logs)) < total_count
|
||||
|
||||
finally:
|
||||
conn.close()
|
||||
|
||||
def highlight_search_matches(text: str, search: str) -> list:
|
||||
"""Find and highlight search matches in text"""
|
||||
if not search:
|
||||
return []
|
||||
|
||||
matches = []
|
||||
try:
|
||||
search_terms = search.lower().split()
|
||||
text_lower = text.lower()
|
||||
|
||||
for term in search_terms:
|
||||
start = 0
|
||||
while True:
|
||||
pos = text_lower.find(term, start)
|
||||
if pos == -1:
|
||||
break
|
||||
|
||||
context_start = max(0, pos - 20)
|
||||
context_end = min(len(text), pos + len(term) + 20)
|
||||
|
||||
matches.append({
|
||||
"term": term,
|
||||
"context": f"...{text[context_start:context_end]}..."
|
||||
})
|
||||
|
||||
start = pos + len(term)
|
||||
|
||||
return matches
|
||||
except:
|
||||
return []
|
||||
|
||||
@app.get("/logs/view", response_class=HTMLResponse)
|
||||
async def view_logs(request: Request, _: bool = Depends(verify_frontend_password)):
|
||||
"""Full logs page view"""
|
||||
logs, total_count, has_more = get_webhook_logs(limit=10)
|
||||
return templates.TemplateResponse("logs.html", {
|
||||
"request": request,
|
||||
"logs": logs,
|
||||
"count": len(logs),
|
||||
"total_count": total_count,
|
||||
"has_more": has_more,
|
||||
"offset": 0,
|
||||
"limit": 10
|
||||
})
|
||||
|
||||
@app.get("/logs")
|
||||
async def get_logs(
|
||||
request: Request,
|
||||
search: str = Query(None),
|
||||
offset: int = Query(0),
|
||||
limit: int = Query(20),
|
||||
_: bool = Depends(verify_frontend_password)
|
||||
):
|
||||
"""Partial logs view for HTMX updates"""
|
||||
try:
|
||||
logs, total_count, has_more = get_webhook_logs(offset, limit, search)
|
||||
print(f"Retrieved logs: count={len(logs)}, total={total_count}")
|
||||
|
||||
template_data = {
|
||||
"request": request,
|
||||
"logs": logs,
|
||||
"count": total_count,
|
||||
"total_count": total_count,
|
||||
"has_more": has_more,
|
||||
"offset": offset,
|
||||
"limit": limit,
|
||||
"empty": len(logs) == 0
|
||||
}
|
||||
|
||||
if "application/json" in request.headers.get("accept", ""):
|
||||
return {
|
||||
"logs": logs,
|
||||
"count": total_count,
|
||||
"total_count": total_count,
|
||||
"has_more": has_more,
|
||||
"empty": len(logs) == 0
|
||||
}
|
||||
|
||||
return templates.TemplateResponse("logs_list.html", template_data)
|
||||
except Exception as e:
|
||||
print(f"Error retrieving logs: {str(e)}")
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
@app.get("/export")
|
||||
async def export_logs(request: Request, format: str = Query("json", enum=["json", "csv"]), _: bool = Depends(verify_frontend_password)):
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT * FROM webhooks ORDER BY timestamp DESC")
|
||||
logs = [{"id": row[0], "timestamp": row[1], "headers": json.loads(row[2]), "body": row[3]}
|
||||
for row in c.fetchall()]
|
||||
conn.close()
|
||||
|
||||
if format == "csv":
|
||||
output = StringIO()
|
||||
writer = csv.DictWriter(output, fieldnames=["id", "timestamp", "headers", "body"])
|
||||
writer.writeheader()
|
||||
writer.writerows(logs)
|
||||
return Response(
|
||||
content=output.getvalue(),
|
||||
media_type="text/csv",
|
||||
headers={"Content-Disposition": "attachment; filename=webhooks.csv"}
|
||||
)
|
||||
|
||||
return Response(
|
||||
content=json.dumps(logs, indent=2, ensure_ascii=False),
|
||||
media_type="application/json",
|
||||
headers={
|
||||
"Content-Disposition": "attachment; filename=webhooks.json",
|
||||
"X-Total-Count": str(len(logs))
|
||||
}
|
||||
)
|
||||
|
||||
@app.post("/test")
|
||||
async def test_webhook(request: Request):
|
||||
try:
|
||||
body = await request.body()
|
||||
|
||||
if not body or body == b'{}':
|
||||
payload = {
|
||||
"event": "test",
|
||||
"timestamp": datetime.now().isoformat(),
|
||||
"message": "Test webhook payload"
|
||||
}
|
||||
else:
|
||||
try:
|
||||
payload = json.loads(body)
|
||||
except json.JSONDecodeError:
|
||||
raise HTTPException(
|
||||
status_code=400,
|
||||
detail="Invalid JSON payload. Example: {'event': 'test', 'message': 'Hello'}"
|
||||
)
|
||||
|
||||
base_url = str(request.base_url)
|
||||
if base_url.startswith('http:'):
|
||||
base_url = 'https:' + base_url[5:]
|
||||
webhook_url = base_url + "webhook"
|
||||
|
||||
async with httpx.AsyncClient() as client:
|
||||
response = await client.post(
|
||||
webhook_url,
|
||||
json=payload,
|
||||
headers={"Content-Type": "application/json"}
|
||||
)
|
||||
|
||||
return {
|
||||
"status": "sent",
|
||||
"response_status": response.status_code,
|
||||
"url": webhook_url,
|
||||
"payload": payload
|
||||
}
|
||||
except HTTPException:
|
||||
raise
|
||||
except Exception as e:
|
||||
raise HTTPException(
|
||||
status_code=500,
|
||||
detail=f"Failed to send test webhook: {str(e)}"
|
||||
)
|
||||
|
||||
@app.post("/replay/{webhook_id}")
|
||||
async def replay_webhook(webhook_id: int, request: Request, target_url: str = Query(None)):
|
||||
"""Replay webhook with optional admin protection - accepts target_url from query or body"""
|
||||
if ADMIN_TOKEN and not verify_admin_token(request):
|
||||
raise HTTPException(
|
||||
status_code=401,
|
||||
detail="Admin token required for replay operations",
|
||||
headers={"WWW-Authenticate": "Bearer"}
|
||||
)
|
||||
|
||||
if not target_url:
|
||||
try:
|
||||
body = await request.body()
|
||||
if body:
|
||||
body_data = json.loads(body)
|
||||
target_url = body_data.get("target_url")
|
||||
except (json.JSONDecodeError, AttributeError):
|
||||
pass
|
||||
|
||||
if not target_url:
|
||||
raise HTTPException(
|
||||
status_code=400,
|
||||
detail="target_url is required. Provide it as a query parameter (?target_url=...) or in request body as JSON {\"target_url\": \"...\"}"
|
||||
)
|
||||
|
||||
if not validate_url(target_url):
|
||||
raise HTTPException(
|
||||
status_code=400,
|
||||
detail="Invalid target URL. Must be http(s)://..."
|
||||
)
|
||||
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT headers, body FROM webhooks WHERE id = ?", (webhook_id,))
|
||||
row = c.fetchone()
|
||||
conn.close()
|
||||
|
||||
if not row:
|
||||
raise HTTPException(status_code=404, detail=f"Webhook {webhook_id} not found")
|
||||
|
||||
headers = json.loads(row[0])
|
||||
body = row[1]
|
||||
|
||||
replay_headers = {k: v for k, v in headers.items()
|
||||
if k.lower() not in ['host', 'content-length', 'connection']}
|
||||
|
||||
try:
|
||||
async with httpx.AsyncClient(timeout=30.0) as client:
|
||||
response = await client.post(
|
||||
target_url,
|
||||
headers=replay_headers,
|
||||
content=body
|
||||
)
|
||||
|
||||
return {
|
||||
"status": "replayed",
|
||||
"response_status": response.status_code,
|
||||
"target_url": target_url,
|
||||
"webhook_id": webhook_id
|
||||
}
|
||||
except Exception as e:
|
||||
raise HTTPException(
|
||||
status_code=500,
|
||||
detail=f"Failed to replay webhook: {str(e)}"
|
||||
)
|
||||
|
||||
@app.post("/clear")
|
||||
async def clear_logs(request: Request):
|
||||
"""Clear logs with optional admin protection"""
|
||||
if ADMIN_TOKEN and not verify_admin_token(request):
|
||||
raise HTTPException(
|
||||
status_code=401,
|
||||
detail="Admin token required for clear operations",
|
||||
headers={"WWW-Authenticate": "Bearer"}
|
||||
)
|
||||
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
c.execute("DELETE FROM webhooks")
|
||||
conn.commit()
|
||||
conn.close()
|
||||
return {"status": "cleared"}
|
||||
|
||||
@app.get("/config")
|
||||
async def get_config():
|
||||
"""Get current configuration status"""
|
||||
return {
|
||||
"forwarding_enabled": bool(FORWARD_WEBHOOK_URL),
|
||||
"forwarding_url": FORWARD_WEBHOOK_URL if FORWARD_WEBHOOK_URL else None,
|
||||
"authentication_enabled": bool(FORWARD_WEBHOOK_TOKEN),
|
||||
"admin_protection_enabled": bool(ADMIN_TOKEN and ADMIN_TOKEN.strip()),
|
||||
"total_webhooks": get_total_webhook_count()
|
||||
}
|
||||
|
||||
def get_total_webhook_count():
|
||||
"""Get total count of webhooks received"""
|
||||
try:
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
c.execute("SELECT COUNT(*) FROM webhooks")
|
||||
count = c.fetchone()[0]
|
||||
conn.close()
|
||||
return count
|
||||
except:
|
||||
return 0
|
||||
|
||||
@app.get("/webhooks")
|
||||
async def list_webhooks(request: Request, limit: int = Query(50), _: bool = Depends(verify_frontend_password)):
|
||||
"""List available webhooks for replay testing"""
|
||||
conn = sqlite3.connect(DB_PATH)
|
||||
c = conn.cursor()
|
||||
|
||||
c.execute("SELECT COUNT(*) FROM webhooks")
|
||||
total_count = c.fetchone()[0]
|
||||
|
||||
c.execute("""
|
||||
SELECT id, timestamp, body, headers
|
||||
FROM webhooks
|
||||
ORDER BY timestamp DESC
|
||||
LIMIT ?
|
||||
""", (limit,))
|
||||
|
||||
webhooks = []
|
||||
for row in c.fetchall():
|
||||
webhook_id, timestamp, body, headers = row
|
||||
|
||||
body_preview = body[:100] + "..." if len(body) > 100 else body
|
||||
|
||||
headers_dict = json.loads(headers)
|
||||
content_type = headers_dict.get("content-type", "unknown")
|
||||
|
||||
webhooks.append({
|
||||
"id": webhook_id,
|
||||
"timestamp": timestamp,
|
||||
"body_preview": body_preview,
|
||||
"content_type": content_type,
|
||||
"size_bytes": len(body)
|
||||
})
|
||||
|
||||
conn.close()
|
||||
|
||||
return {
|
||||
"webhooks": webhooks,
|
||||
"count": len(webhooks),
|
||||
"total_count": total_count
|
||||
}
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
/* =========================
|
||||
Base / Reset
|
||||
========================= */
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: background-color 0.3s ease,
|
||||
color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Dark Mode Base
|
||||
========================= */
|
||||
|
||||
html.dark,
|
||||
html.dark body {
|
||||
background-color: #111827 !important;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.dark * {
|
||||
text-shadow: none !important;
|
||||
-webkit-text-stroke: none !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Background Overrides
|
||||
========================= */
|
||||
|
||||
.dark .bg-white {
|
||||
background-color: #1f2937 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.dark .bg-gray-50,
|
||||
.dark .bg-gray-100 {
|
||||
background-color: #374151 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Text Colors
|
||||
========================= */
|
||||
|
||||
.dark .text-gray-800 { color: #ffffff !important; }
|
||||
.dark .text-gray-700 { color: #e5e7eb !important; }
|
||||
.dark .text-gray-600 { color: #d1d5db !important; }
|
||||
.dark .text-gray-500,
|
||||
.dark .text-gray-400 { color: #9ca3af !important; }
|
||||
|
||||
/* =========================
|
||||
Borders
|
||||
========================= */
|
||||
|
||||
.dark .border,
|
||||
.dark .border-gray-200 {
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
.dark .border-gray-700 {
|
||||
border-color: #4b5563 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Forms
|
||||
========================= */
|
||||
|
||||
.dark input,
|
||||
.dark textarea,
|
||||
.dark select {
|
||||
background-color: #374151 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #4b5563 !important;
|
||||
}
|
||||
|
||||
.dark input::placeholder,
|
||||
.dark textarea::placeholder {
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Code / Prism
|
||||
========================= */
|
||||
|
||||
.dark pre {
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dark pre code {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.dark code {
|
||||
background-color: #374151 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Hover Fixes (Tailwind Escaped)
|
||||
========================= */
|
||||
|
||||
.dark .hover\:bg-gray-50:hover {
|
||||
background-color: #374151 !important;
|
||||
}
|
||||
|
||||
.dark .hover\:bg-gray-200:hover {
|
||||
background-color: #4b5563 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Headers / Buttons
|
||||
========================= */
|
||||
|
||||
.dark h1,
|
||||
.dark h2,
|
||||
.dark h3,
|
||||
.dark h4,
|
||||
.dark h5,
|
||||
.dark h6,
|
||||
.dark button,
|
||||
.dark a {
|
||||
color: #ffffff !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Sticky Header
|
||||
========================= */
|
||||
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(8px);
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.dark .sticky-header {
|
||||
background-color: rgba(31, 41, 55, 0.95) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Cards / Sections
|
||||
========================= */
|
||||
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark .card {
|
||||
background: rgba(30, 41, 59, 0.9);
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
background: white;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dark .content-section {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Glass Effect
|
||||
========================= */
|
||||
|
||||
.glass-bg {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.dark .glass-bg {
|
||||
background: rgba(31, 41, 55, 0.8);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Layout Helpers
|
||||
========================= */
|
||||
|
||||
.content-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.section-spacing {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Animations
|
||||
========================= */
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.fade-up {
|
||||
animation: fadeUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.loading-pulse {
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Webhook Items
|
||||
========================= */
|
||||
|
||||
.dark .webhook-item {
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Highlight
|
||||
========================= */
|
||||
|
||||
.highlight {
|
||||
background-color: #fef08a;
|
||||
}
|
||||
|
||||
.dark .highlight {
|
||||
background-color: #92400e !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,601 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Webhook Catcher</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/ui.css?v=2026-01-13">
|
||||
|
||||
</head>
|
||||
<body class="min-h-screen bg-gray-100 dark:bg-gray-900">
|
||||
<div id="admin-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full mx-4">
|
||||
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Admin Authentication Required</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-4">This operation requires admin privileges. Please enter your admin token:</p>
|
||||
<input
|
||||
type="password"
|
||||
id="admin-token-input"
|
||||
placeholder="Enter admin token..."
|
||||
class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white mb-4 focus:ring-2 focus:ring-blue-500 outline-none">
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button
|
||||
onclick="cancelAdminModal()"
|
||||
class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onclick="submitAdminToken()"
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky-header">
|
||||
<div class="max-w-6xl mx-auto flex justify-between items-center">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-4xl font-bold text-blue-600">Webhook Catcher 🚀</h1>
|
||||
<a href="/logs/view" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">📋 Logs</a>
|
||||
<span id="admin-status" class="px-2 py-1 text-xs rounded hidden">
|
||||
🔒 Admin Protected
|
||||
</span>
|
||||
</div>
|
||||
<button onclick="toggleDarkMode()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg transition-colors flex items-center gap-2">
|
||||
<span class="dark:hidden">🌙</span>
|
||||
<span class="hidden dark:inline">☀️</span>
|
||||
<span class="dark:hidden">Dark</span>
|
||||
<span class="hidden dark:inline">Light</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-8">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">🚀 Webhook Catcher Status</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300 mb-1">Webhook URL</div>
|
||||
<code class="text-sm bg-gray-100 dark:bg-gray-600 p-1 rounded block truncate" id="webhook-url-display"></code>
|
||||
</div>
|
||||
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300 mb-1">Total Received</div>
|
||||
<span id="total-count" class="text-lg font-bold text-blue-600 dark:text-blue-400">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">📥 Your Webhook URL</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<code class="bg-gray-100 dark:bg-gray-700 p-3 rounded flex-1 text-sm" id="webhook-url"></code>
|
||||
<button onclick="copyWebhookUrl()" class="px-4 py-3 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
||||
📋 Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
||||
<details class="group">
|
||||
<summary class="text-xl font-semibold mb-4 cursor-pointer hover:text-blue-600 transition-colors">
|
||||
📚 Quick Start Guide
|
||||
</summary>
|
||||
<div class="mt-4 space-y-4">
|
||||
<h3 class="text-lg font-medium">Test with cURL</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
|
||||
<h4 class="text-sm font-medium mb-2">PowerShell/Terminal:</h4>
|
||||
<pre class="text-sm overflow-x-auto"><code>curl -X POST <span id="curl-url-powershell"></span>/webhook -H "Content-Type: application/json" -d "{\"event\": \"test\", \"message\": \"Hello World!\"}"</code></pre>
|
||||
<button onclick="copyCurlCommand('powershell')" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
||||
📋 Copy Command
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-medium mt-6">Common Use Cases</h3>
|
||||
<ul class="list-disc pl-5 space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<li>GitHub repository events and CI/CD pipelines</li>
|
||||
<li>Discord/Slack bot development and testing</li>
|
||||
<li>Payment processing (Stripe, PayPal) notifications</li>
|
||||
<li>IoT device updates and monitoring</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="text-lg font-medium mt-6">How to Use</h3>
|
||||
<ol class="list-decimal pl-5 space-y-2 text-gray-700 dark:text-gray-300">
|
||||
<li>Copy your webhook URL from above</li>
|
||||
<li>Add it to your service (GitHub, Discord, Stripe, etc.)</li>
|
||||
<li>Send webhooks and view them in real-time below</li>
|
||||
<li>Use search, replay, or export features as needed</li>
|
||||
</ol>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
||||
<h2 class="text-xl font-semibold mb-4">🧪 Test Your Setup</h2>
|
||||
<div class="mb-4">
|
||||
<textarea
|
||||
id="test-payload"
|
||||
class="w-full p-3 border rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
||||
rows="4"
|
||||
placeholder='{"event": "test", "message": "Hello World!", "timestamp": "2025-01-31T12:00:00Z"}'
|
||||
></textarea>
|
||||
</div>
|
||||
<button
|
||||
onclick="sendTestWebhook()"
|
||||
class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
|
||||
🚀 Send Test Webhook
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6">
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
|
||||
<h2 class="text-xl font-semibold">📋 Webhook Logs</h2>
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="🔍 Search logs..."
|
||||
class="px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
||||
hx-get="/logs"
|
||||
hx-trigger="keyup changed delay:500ms"
|
||||
hx-target="#logs">
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a href="/export?format=json" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
|
||||
📥 JSON
|
||||
</a>
|
||||
<a href="/export?format=csv" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
|
||||
📥 CSV
|
||||
</a>
|
||||
<button
|
||||
onclick="clearLogsWithModal()"
|
||||
class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
||||
🗑️ Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log-count text-sm text-gray-600 dark:text-gray-400 mb-2">Loading logs...</div>
|
||||
|
||||
<div id="logs"
|
||||
class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
|
||||
hx-get="/logs"
|
||||
hx-trigger="load, every 5s">
|
||||
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<div class="animate-spin h-8 w-8 mx-auto mb-4">
|
||||
<svg class="text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Loading webhooks...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
dayjs.extend(window.dayjs_plugin_relativeTime);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const webhookUrl = document.getElementById('webhook-url');
|
||||
const curlUrl = document.getElementById('curl-url');
|
||||
if (webhookUrl) webhookUrl.textContent = window.location.origin + '/webhook';
|
||||
if (curlUrl) curlUrl.textContent = window.location.origin;
|
||||
|
||||
const baseUrl = window.location.origin;
|
||||
['unix', 'windows', 'powershell'].forEach(type => {
|
||||
const el = document.getElementById(`curl-url-${type}`);
|
||||
if (el) el.textContent = baseUrl;
|
||||
});
|
||||
|
||||
const webhookUrlDisplay = document.getElementById('webhook-url-display');
|
||||
if (webhookUrlDisplay) {
|
||||
webhookUrlDisplay.textContent = window.location.origin + '/webhook';
|
||||
}
|
||||
|
||||
loadConfigStatus();
|
||||
|
||||
setInterval(loadConfigStatus, 30000);
|
||||
});
|
||||
|
||||
function copyWebhookUrl() {
|
||||
const url = window.location.origin + '/webhook';
|
||||
navigator.clipboard.writeText(url);
|
||||
const btn = event.target;
|
||||
btn.innerText = '✅ Copied!';
|
||||
setTimeout(() => btn.innerText = '📋 Copy', 2000);
|
||||
}
|
||||
|
||||
function formatJSON(str) {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(str), null, 2);
|
||||
} catch {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
async function executeAdminOperation(operation, operationName) {
|
||||
try {
|
||||
let result = await operation();
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.log(`Operation ${operationName} failed:`, error);
|
||||
|
||||
const is401 = error.status === 401 ||
|
||||
(error.response && error.response.status === 401) ||
|
||||
(error.message && error.message.includes('401')) ||
|
||||
(error.message && error.message.includes('Admin token required'));
|
||||
|
||||
if (is401) {
|
||||
console.log('401 detected, showing admin modal');
|
||||
return new Promise((resolve, reject) => {
|
||||
pendingAdminOperation = async () => {
|
||||
try {
|
||||
console.log('Retrying operation with token:', currentAdminToken ? 'provided' : 'missing');
|
||||
const result = await operation(currentAdminToken);
|
||||
resolve(result);
|
||||
} catch (retryError) {
|
||||
console.log('Retry failed:', retryError);
|
||||
const isRetry401 = retryError.status === 401 ||
|
||||
(retryError.response && retryError.response.status === 401) ||
|
||||
(retryError.message && retryError.message.includes('401')) ||
|
||||
(retryError.message && retryError.message.includes('Admin token required'));
|
||||
|
||||
if (isRetry401) {
|
||||
alert('❌ Invalid admin token. Please try again.');
|
||||
currentAdminToken = null;
|
||||
showAdminModal(pendingAdminOperation);
|
||||
} else {
|
||||
alert(`❌ ${operationName} failed: ${retryError.message}`);
|
||||
reject(retryError);
|
||||
}
|
||||
}
|
||||
};
|
||||
showAdminModal(pendingAdminOperation);
|
||||
});
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function replayWebhook(btn) {
|
||||
if (!btn) return;
|
||||
|
||||
const targetUrl = btn.previousElementSibling?.value?.trim();
|
||||
const webhookId = btn.closest('.webhook-item')?.dataset?.id;
|
||||
|
||||
if (!targetUrl) {
|
||||
alert('Please enter a target URL');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!webhookId) {
|
||||
console.error('No webhook ID found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Attempting to replay webhook ${webhookId} to ${targetUrl}`);
|
||||
|
||||
btn.innerHTML = '⏳ Sending...';
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
await executeAdminOperation(async (token) => {
|
||||
console.log('Executing replay operation, token provided:', !!token);
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
if (token) {
|
||||
headers['X-Admin-Token'] = token;
|
||||
console.log('Added admin token to headers');
|
||||
}
|
||||
|
||||
const response = await fetch(`/replay/${webhookId}?target_url=${encodeURIComponent(targetUrl)}`, {
|
||||
method: 'POST',
|
||||
headers: headers
|
||||
});
|
||||
|
||||
console.log('Replay response status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `HTTP ${response.status}`;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
errorMessage = errorData.detail || errorMessage;
|
||||
} catch (e) {
|
||||
errorMessage = response.statusText || errorMessage;
|
||||
}
|
||||
|
||||
const err = new Error(errorMessage);
|
||||
err.status = response.status;
|
||||
err.response = response;
|
||||
|
||||
console.log('Throwing error with status:', err.status);
|
||||
throw err;
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}, 'Replay webhook');
|
||||
|
||||
console.log('Replay successful');
|
||||
btn.innerHTML = '✅ Sent!';
|
||||
btn.className = 'px-4 py-2 bg-green-500 text-white rounded';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Final replay error:', error);
|
||||
if (!error.status || error.status !== 401) {
|
||||
btn.innerHTML = '❌ Failed!';
|
||||
btn.className = 'px-4 py-2 bg-red-500 text-white rounded';
|
||||
alert(`Replay failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '🔄 Replay';
|
||||
btn.className = 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
async function sendTestWebhook() {
|
||||
const textarea = document.getElementById('test-payload');
|
||||
let payload = textarea.value.trim();
|
||||
|
||||
try {
|
||||
if (!payload) {
|
||||
payload = '{}';
|
||||
}
|
||||
|
||||
JSON.parse(payload);
|
||||
|
||||
const response = await fetch('/test', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: payload
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(result.detail || 'Failed to send webhook');
|
||||
}
|
||||
|
||||
alert(`✅ Test webhook sent!\nStatus: ${result.response_status}\nURL: ${result.url}`);
|
||||
|
||||
} catch (error) {
|
||||
if (error instanceof SyntaxError) {
|
||||
alert('❌ Invalid JSON format. Example: {"event": "test", "message": "Hello"}');
|
||||
} else {
|
||||
alert(`❌ ${error.message || 'Failed to send test webhook'}`);
|
||||
}
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
function highlightSearch(text, search) {
|
||||
if (!search) return text;
|
||||
const regex = new RegExp(`(${search})`, 'gi');
|
||||
return text.replace(regex, '<span class="highlight">$1</span>');
|
||||
}
|
||||
|
||||
function formatRelativeTime(timestamp) {
|
||||
return dayjs(timestamp).fromNow();
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
const html = document.documentElement;
|
||||
const isDark = html.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', isDark);
|
||||
|
||||
const currentScroll = window.scrollY;
|
||||
requestAnimationFrame(() => window.scrollTo(0, currentScroll));
|
||||
}
|
||||
|
||||
async function loadConfigStatus() {
|
||||
try {
|
||||
const response = await fetch('/config');
|
||||
const config = await response.json();
|
||||
|
||||
document.getElementById('total-count').textContent = config.total_webhooks;
|
||||
|
||||
const adminStatus = document.getElementById('admin-status');
|
||||
if (config.admin_protection_enabled) {
|
||||
adminStatus.classList.remove('hidden');
|
||||
adminStatus.classList.add('bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
|
||||
} else {
|
||||
adminStatus.classList.add('hidden');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to load config:', error);
|
||||
document.getElementById('total-count').textContent = '0';
|
||||
}
|
||||
}
|
||||
|
||||
if (localStorage.getItem('darkMode') === null) {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('darkMode', 'true');
|
||||
}
|
||||
} else if (localStorage.getItem('darkMode') === 'true') {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
if (localStorage.getItem('darkMode') === null) {
|
||||
document.documentElement.classList.toggle('dark', e.matches);
|
||||
}
|
||||
});
|
||||
|
||||
function getDefaultReplayUrl() {
|
||||
return `${window.location.origin}/webhook`;
|
||||
}
|
||||
|
||||
document.addEventListener('htmx:afterSwap', function(event) {
|
||||
const target = event.detail.target;
|
||||
if (!target) return;
|
||||
|
||||
const logCount = document.querySelector('.log-count');
|
||||
const webhookItems = target.querySelectorAll('.webhook-item');
|
||||
if (logCount && webhookItems) {
|
||||
const total = webhookItems.length;
|
||||
logCount.textContent = `Showing ${total} log${total !== 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
target.querySelectorAll('input[type="url"]').forEach(input => {
|
||||
if (!input.value) {
|
||||
input.value = window.location.origin + '/webhook';
|
||||
}
|
||||
});
|
||||
|
||||
const searchTerm = document.querySelector('input[name="search"]')?.value;
|
||||
target.querySelectorAll('pre code').forEach((el) => {
|
||||
let content = el.textContent;
|
||||
try {
|
||||
content = JSON.stringify(JSON.parse(content), null, 2);
|
||||
} catch (e) {
|
||||
// JSON parsing failed - display as-is (may be invalid JSON or plain text)
|
||||
}
|
||||
el.textContent = content;
|
||||
if (searchTerm) {
|
||||
el.innerHTML = highlightSearch(content, searchTerm);
|
||||
}
|
||||
try {
|
||||
Prism.highlightElement(el);
|
||||
} catch (e) {
|
||||
console.error('Prism highlighting error:', e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function copyCurlCommand(type) {
|
||||
const baseUrl = window.location.origin;
|
||||
const curlCmd = `curl -X POST ${baseUrl}/webhook -H "Content-Type: application/json" -d "{\\"event\\": \\"test\\", \\"message\\": \\"Hello World\\"}"`;
|
||||
|
||||
navigator.clipboard.writeText(curlCmd);
|
||||
const btn = event.target;
|
||||
btn.innerText = '✅ Copied!';
|
||||
setTimeout(() => btn.innerText = '📋 Copy Command', 2000);
|
||||
}
|
||||
|
||||
let currentAdminToken = null;
|
||||
let pendingAdminOperation = null;
|
||||
|
||||
function showAdminModal(operation) {
|
||||
pendingAdminOperation = operation;
|
||||
document.getElementById('admin-modal').classList.remove('hidden');
|
||||
document.getElementById('admin-token-input').focus();
|
||||
}
|
||||
|
||||
function cancelAdminModal() {
|
||||
document.getElementById('admin-modal').classList.add('hidden');
|
||||
document.getElementById('admin-token-input').value = '';
|
||||
pendingAdminOperation = null;
|
||||
currentAdminToken = null;
|
||||
}
|
||||
|
||||
function submitAdminToken() {
|
||||
const token = document.getElementById('admin-token-input').value.trim();
|
||||
if (!token) {
|
||||
alert('Please enter a token');
|
||||
return;
|
||||
}
|
||||
|
||||
currentAdminToken = token;
|
||||
document.getElementById('admin-modal').classList.add('hidden');
|
||||
document.getElementById('admin-token-input').value = '';
|
||||
|
||||
if (pendingAdminOperation) {
|
||||
pendingAdminOperation();
|
||||
pendingAdminOperation = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function clearLogsWithModal() {
|
||||
const confirmed = confirm('Are you sure you want to clear all webhook logs? This action cannot be undone.');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
console.log('Attempting to clear logs');
|
||||
|
||||
const response = await fetch('/clear', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
console.log('Clear response status:', response.status);
|
||||
|
||||
if (response.status === 401) {
|
||||
console.log('Got 401, showing admin modal for clear');
|
||||
showAdminModal(async () => {
|
||||
console.log('Retrying clear with admin token');
|
||||
try {
|
||||
const retryResponse = await fetch('/clear', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Admin-Token': currentAdminToken
|
||||
}
|
||||
});
|
||||
|
||||
if (retryResponse.ok) {
|
||||
alert('✅ Logs cleared successfully!');
|
||||
document.getElementById('logs').innerHTML = `
|
||||
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<div class="text-6xl mb-4">📭</div>
|
||||
<h3 class="text-xl font-bold mb-2">No webhooks yet</h3>
|
||||
<p>Send a test webhook to get started!</p>
|
||||
</div>
|
||||
`;
|
||||
loadConfigStatus();
|
||||
} else {
|
||||
alert('❌ Clear failed - invalid admin token');
|
||||
}
|
||||
} catch (retryError) {
|
||||
alert('❌ Clear failed: ' + retryError.message);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
alert('✅ Logs cleared successfully!');
|
||||
document.getElementById('logs').innerHTML = `
|
||||
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<div class="text-6xl mb-4">📭</div>
|
||||
<h3 class="text-xl font-bold mb-2">No webhooks yet</h3>
|
||||
<p>Send a test webhook to get started!</p>
|
||||
</div>
|
||||
`;
|
||||
loadConfigStatus();
|
||||
} else {
|
||||
alert('❌ Clear failed: HTTP ' + response.status);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Clear error:', error);
|
||||
alert('❌ Network error: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && !document.getElementById('admin-modal').classList.contains('hidden')) {
|
||||
cancelAdminModal();
|
||||
}
|
||||
if (e.key === 'Enter' && !document.getElementById('admin-modal').classList.contains('hidden')) {
|
||||
submitAdminToken();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,388 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Webhook Logs - Webhook Catcher</title>
|
||||
|
||||
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="/static/css/ui.css?v=2026-01-13">
|
||||
|
||||
</head>
|
||||
<body class="min-h-screen bg-gray-100 dark:bg-gray-900">
|
||||
<div id="admin-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full mx-4">
|
||||
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Admin Authentication Required</h3>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-4">This operation requires admin privileges. Please enter your admin token:</p>
|
||||
<input
|
||||
type="password"
|
||||
id="admin-token-input"
|
||||
placeholder="Enter admin token..."
|
||||
class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white mb-4 focus:ring-2 focus:ring-blue-500 outline-none">
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button
|
||||
onclick="cancelAdminModal()"
|
||||
class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onclick="submitAdminToken()"
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky-header w-full bg-white/90 dark:bg-gray-800/90 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/" class="text-4xl font-bold text-blue-600 hover:text-blue-700 dark:text-blue-400 transition-colors">
|
||||
Webhook Catcher 🚀
|
||||
</a>
|
||||
<a href="/" class="px-3 py-1.5 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors">
|
||||
← Back
|
||||
</a>
|
||||
<span class="px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
|
||||
📋 Logs
|
||||
</span>
|
||||
<span id="admin-status" class="px-2 py-1 text-xs rounded hidden">
|
||||
🔒 Admin Protected
|
||||
</span>
|
||||
</div>
|
||||
<button onclick="toggleDarkMode()" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex items-center gap-2">
|
||||
<span class="dark:hidden">🌙</span>
|
||||
<span class="hidden dark:inline">☀️</span>
|
||||
<span class="dark:hidden">Dark</span>
|
||||
<span class="hidden dark:inline">Light</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-6xl mx-auto p-8">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8 w-full">
|
||||
<div class="flex flex-col lg:flex-row justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="🔍 Search webhooks..."
|
||||
class="w-full px-4 py-3 text-lg border rounded-lg bg-white dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
hx-get="/logs"
|
||||
hx-trigger="keyup changed delay:500ms"
|
||||
hx-target="#webhook-list">
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a href="/export?format=json"
|
||||
class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2">
|
||||
<span>Export JSON</span>
|
||||
<span>📥</span>
|
||||
</a>
|
||||
<a href="/export?format=csv"
|
||||
class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2">
|
||||
<span>Export CSV</span>
|
||||
<span>📥</span>
|
||||
</a>
|
||||
<button
|
||||
onclick="clearLogsWithModal()"
|
||||
class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors inline-flex items-center gap-2">
|
||||
<span>Clear All</span>
|
||||
<span>🗑️</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="webhook-list"
|
||||
class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden w-full"
|
||||
hx-get="/logs"
|
||||
hx-trigger="load, every 5s">
|
||||
<div class="p-12 text-center">
|
||||
<div class="animate-spin h-10 w-10 mx-auto mb-4">
|
||||
<svg class="text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-lg">Loading webhooks...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
dayjs.extend(window.dayjs_plugin_relativeTime);
|
||||
});
|
||||
|
||||
function toggleDarkMode() {
|
||||
const html = document.documentElement;
|
||||
html.classList.toggle('dark');
|
||||
document.body.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', html.classList.contains('dark'));
|
||||
}
|
||||
|
||||
if (localStorage.getItem('darkMode') === 'true') {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
document.addEventListener('htmx:afterSwap', function(evt) {
|
||||
if (!evt.target) return;
|
||||
|
||||
evt.target.querySelectorAll('[data-timestamp]').forEach(el => {
|
||||
el.textContent = dayjs(el.dataset.timestamp).fromNow();
|
||||
});
|
||||
|
||||
evt.target.querySelectorAll('pre code').forEach(block => {
|
||||
Prism.highlightElement(block);
|
||||
});
|
||||
});
|
||||
|
||||
async function executeAdminOperation(operation, operationName) {
|
||||
try {
|
||||
let result = await operation();
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.log(`Operation ${operationName} failed:`, error);
|
||||
|
||||
const is401 = error.status === 401 ||
|
||||
(error.response && error.response.status === 401) ||
|
||||
(error.message && error.message.includes('401')) ||
|
||||
(error.message && error.message.includes('Admin token required'));
|
||||
|
||||
if (is401) {
|
||||
console.log('401 detected, showing admin modal');
|
||||
return new Promise((resolve, reject) => {
|
||||
pendingAdminOperation = async () => {
|
||||
try {
|
||||
console.log('Retrying operation with token:', currentAdminToken ? 'provided' : 'missing');
|
||||
const result = await operation(currentAdminToken);
|
||||
resolve(result);
|
||||
} catch (retryError) {
|
||||
console.log('Retry failed:', retryError);
|
||||
const isRetry401 = retryError.status === 401 ||
|
||||
(retryError.response && retryError.response.status === 401) ||
|
||||
(retryError.message && retryError.message.includes('401')) ||
|
||||
(retryError.message && retryError.message.includes('Admin token required'));
|
||||
|
||||
if (isRetry401) {
|
||||
alert('❌ Invalid admin token. Please try again.');
|
||||
currentAdminToken = null;
|
||||
showAdminModal(pendingAdminOperation);
|
||||
} else {
|
||||
alert(`❌ ${operationName} failed: ${retryError.message}`);
|
||||
reject(retryError);
|
||||
}
|
||||
}
|
||||
};
|
||||
showAdminModal(pendingAdminOperation);
|
||||
});
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.replayWebhook = async function(btn) {
|
||||
try {
|
||||
const webhookItem = btn.closest('.webhook-item');
|
||||
if (!webhookItem) {
|
||||
console.error('Could not find webhook item');
|
||||
return;
|
||||
}
|
||||
|
||||
const webhookId = webhookItem.dataset.id;
|
||||
const targetUrl = btn.previousElementSibling.value;
|
||||
|
||||
if (!webhookId) {
|
||||
console.error('No webhook ID found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!targetUrl) {
|
||||
alert('Please enter a target URL');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`Attempting to replay webhook ${webhookId} to ${targetUrl}`);
|
||||
|
||||
btn.innerHTML = '⏳ Sending...';
|
||||
btn.disabled = true;
|
||||
|
||||
await executeAdminOperation(async (token) => {
|
||||
console.log('Executing replay operation, token provided:', !!token);
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
if (token) {
|
||||
headers['X-Admin-Token'] = token;
|
||||
console.log('Added admin token to headers');
|
||||
}
|
||||
|
||||
const response = await fetch(`/replay/${webhookId}?target_url=${encodeURIComponent(targetUrl)}`, {
|
||||
method: 'POST',
|
||||
headers: headers
|
||||
});
|
||||
|
||||
console.log('Replay response status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `HTTP ${response.status}`;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
errorMessage = errorData.detail || errorMessage;
|
||||
} catch (e) {
|
||||
errorMessage = response.statusText || errorMessage;
|
||||
}
|
||||
|
||||
const err = new Error(errorMessage);
|
||||
err.status = response.status;
|
||||
err.response = response;
|
||||
|
||||
console.log('Throwing error with status:', err.status);
|
||||
throw err;
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
}, 'Replay webhook');
|
||||
|
||||
console.log('Replay successful');
|
||||
btn.innerHTML = '✅ Sent!';
|
||||
btn.classList.remove('bg-blue-500', 'bg-red-500');
|
||||
btn.classList.add('bg-green-500');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Final replay error:', error);
|
||||
if (!error.status || error.status !== 401) {
|
||||
btn.innerHTML = '❌ Failed!';
|
||||
btn.classList.remove('bg-blue-500', 'bg-green-500');
|
||||
btn.classList.add('bg-red-500');
|
||||
alert(`Replay failed: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = '🔄 Replay';
|
||||
btn.classList.remove('bg-green-500', 'bg-red-500');
|
||||
btn.classList.add('bg-blue-500', 'hover:bg-blue-600');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
let currentAdminToken = null;
|
||||
let pendingAdminOperation = null;
|
||||
|
||||
function showAdminModal(operation) {
|
||||
pendingAdminOperation = operation;
|
||||
document.getElementById('admin-modal').classList.remove('hidden');
|
||||
document.getElementById('admin-token-input').focus();
|
||||
}
|
||||
|
||||
function cancelAdminModal() {
|
||||
document.getElementById('admin-modal').classList.add('hidden');
|
||||
document.getElementById('admin-token-input').value = '';
|
||||
pendingAdminOperation = null;
|
||||
currentAdminToken = null;
|
||||
}
|
||||
|
||||
function submitAdminToken() {
|
||||
const token = document.getElementById('admin-token-input').value.trim();
|
||||
if (!token) {
|
||||
alert('Please enter a token');
|
||||
return;
|
||||
}
|
||||
|
||||
currentAdminToken = token;
|
||||
document.getElementById('admin-modal').classList.add('hidden');
|
||||
document.getElementById('admin-token-input').value = '';
|
||||
|
||||
if (pendingAdminOperation) {
|
||||
pendingAdminOperation();
|
||||
pendingAdminOperation = null;
|
||||
}
|
||||
}
|
||||
|
||||
window.clearLogsWithModal = async function() {
|
||||
const confirmed = confirm('Are you sure you want to clear all webhook logs?\n\nThis action cannot be undone and will remove all stored webhooks.');
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
console.log('Attempting to clear logs');
|
||||
|
||||
const response = await fetch('/clear', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
|
||||
console.log('Clear response status:', response.status);
|
||||
|
||||
if (response.status === 401) {
|
||||
console.log('Got 401, showing admin modal for clear');
|
||||
showAdminModal(async () => {
|
||||
console.log('Retrying clear with admin token');
|
||||
try {
|
||||
const retryResponse = await fetch('/clear', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Admin-Token': currentAdminToken
|
||||
}
|
||||
});
|
||||
|
||||
if (retryResponse.ok) {
|
||||
alert('✅ Logs cleared successfully!');
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('❌ Clear failed - invalid admin token');
|
||||
}
|
||||
} catch (retryError) {
|
||||
alert('❌ Clear failed: ' + retryError.message);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
alert('✅ Logs cleared successfully!');
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert('❌ Clear failed: HTTP ' + response.status);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Clear error:', error);
|
||||
alert('❌ Network error: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
try {
|
||||
const response = await fetch('/config');
|
||||
const config = await response.json();
|
||||
|
||||
const adminStatus = document.getElementById('admin-status');
|
||||
if (config.admin_protection_enabled) {
|
||||
adminStatus.classList.remove('hidden');
|
||||
adminStatus.classList.add('bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load config:', error);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && !document.getElementById('admin-modal').classList.contains('hidden')) {
|
||||
cancelAdminModal();
|
||||
}
|
||||
if (e.key === 'Enter' && !document.getElementById('admin-modal').classList.contains('hidden')) {
|
||||
submitAdminToken();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-blue-50 dark:bg-blue-900/50 rounded-lg">
|
||||
<span class="text-3xl">📋</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Webhook Logs</h2>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
|
||||
{{ total_count }} webhook{{ 's' if total_count != 1 else '' }} received
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if total_count > 0 and logs %}
|
||||
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{% for log in logs %}
|
||||
<div class="webhook-item p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all" data-id="{{ log.id }}">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-mono px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-lg">
|
||||
#{{ log.id }}
|
||||
</span>
|
||||
<span class="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-white">
|
||||
{{ log.metadata.ip }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-300 font-mono relative-time"
|
||||
data-timestamp="{{ log.timestamp.iso }}"
|
||||
title="{{ log.timestamp.display }}">
|
||||
{{ log.timestamp.display }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if log.parsed_body %}
|
||||
<pre class="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg shadow-inner overflow-x-auto">
|
||||
<code class="language-json text-sm text-gray-800 dark:text-white">{{ log.parsed_body | tojson(indent=2) }}</code>
|
||||
</pre>
|
||||
{% else %}
|
||||
<pre class="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg shadow-inner overflow-x-auto">
|
||||
<code class="text-sm text-gray-800 dark:text-white">{{ log.body }}</code>
|
||||
</pre>
|
||||
{% endif %}
|
||||
|
||||
{% if log.matches %}
|
||||
<div class="mt-2 space-y-1">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-300">Search matches:</p>
|
||||
{% for match in log.matches %}
|
||||
<div class="text-sm bg-yellow-50 dark:bg-yellow-900/30 p-2 rounded">
|
||||
<span class="font-medium text-yellow-800 dark:text-yellow-200">{{ match.term }}:</span>
|
||||
<span class="text-gray-700 dark:text-white">{{ match.context }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-4 flex gap-2">
|
||||
<input type="url"
|
||||
placeholder="Target URL"
|
||||
class="flex-1 px-3 py-2 text-sm border rounded bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value="{{ request.base_url }}webhook">
|
||||
<button onclick="replayWebhook(this)"
|
||||
class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors">
|
||||
🔄 Replay
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if has_more %}
|
||||
<div class="p-6 text-center border-t border-gray-200 dark:border-gray-700">
|
||||
<button
|
||||
class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors inline-flex items-center gap-2"
|
||||
hx-get="/logs?offset={{ offset + limit }}"
|
||||
hx-target="#webhook-list"
|
||||
hx-swap="beforeend">
|
||||
<span>Load More</span>
|
||||
<span>↓</span>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="py-16 px-8 text-center">
|
||||
<div class="max-w-sm mx-auto">
|
||||
<div class="text-7xl mb-6">📭</div>
|
||||
<h3 class="text-2xl font-bold mb-2 text-gray-800 dark:text-white">No webhooks yet</h3>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300">Send a test webhook to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -0,0 +1,17 @@
|
|||
# ================================
|
||||
# Webhook Catcher Configuration
|
||||
# ================================
|
||||
|
||||
# Optional: Forward incoming webhooks to another service
|
||||
FORWARD_WEBHOOK_URL=
|
||||
|
||||
# Optional: Authentication token for forwarded webhooks
|
||||
FORWARD_WEBHOOK_TOKEN=
|
||||
|
||||
# Optional: Admin token for sensitive operations (replay, clear logs)
|
||||
# Leave empty to disable admin protection (development mode)
|
||||
ADMIN_TOKEN=
|
||||
|
||||
# Optional: Protect the web UI with HTTP Basic Auth
|
||||
# Leave empty to make UI public
|
||||
FRONTEND_PASSWORD=
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
fastapi==0.128.0
|
||||
uvicorn==0.40.0
|
||||
jinja2==3.1.6
|
||||
httpx==0.28.1
|
||||
python-multipart==0.0.21
|
||||
aiofiles==25.1.0
|
||||
Loading…
Reference in New Issue