Skip to content

Add Webhook Execution History UI

Display webhook execution history with full audit trail including request/response details.

  • Add "Execution History" tab to integration detail view (Admin/Super Admin only)
  • Paginated table: Timestamp, Triggered By, Status (2xx green, 4xx/5xx red), Duration, expand action
  • Expandable row details: Event ID (linked), request/response payloads (JSON), error message, duration
  • Sort by timestamp descending; auto-refresh on new trigger; manual refresh button

Example:

Execution history table:

┌─ Execution History ─────────────────────────────────────────┐
│ [Refresh]                                             1-10/45 │
├─────────────────────────────────────────────────────────────┤
│ Timestamp           | User      | Status  | Duration | [▼]  │
├─────────────────────────────────────────────────────────────┤
│ 2025-11-06 15:30:00 | John Doe  | ✓ 200   | 245ms    | [▼]  │
│ 2025-11-06 14:15:22 | Jane Smith| ✗ 500   | 1203ms   | [▼]  │
│ 2025-11-06 12:00:15 | John Doe  | ✓ 202   | 180ms    | [▼]  │
└─────────────────────────────────────────────────────────────┘

Expanded row details:

┌─ Execution Details ─────────────────────────────────────────┐
│ Event ID: 7c9e6679-7425-40de-944b-e07fc1f90ae7 [View Event] │
│                                                               │
│ Request Payload:                                              │
│ {                                                             │
│   "eventId": "7c9e6679-7425-40de-944b-e07fc1f90ae7",         │
│   "details": {                                                │
│     "employee_id": "12345",                                   │
│     "action": "sync"                                          │
│   }                                                           │
│ }                                                             │
│                                                               │
│ Response (200):                                               │
│ {                                                             │
│   "status": "success",                                        │
│   "jobId": "abc123"                                           │
│ }                                                             │
│                                                               │
│ Duration: 245ms                                               │
└───────────────────────────────────────────────────────────────┘

Error state example:

┌─ Execution Details ─────────────────────────────────────────┐
│ Error: Network timeout after 30 seconds                      │
│                                                               │
│ Request Payload: {}                                           │
│                                                               │
│ Duration: 30000ms                                             │
└───────────────────────────────────────────────────────────────┘