Real-Time Webhook Monitoring with WebSockets

When a webhook fails, every second counts. If you're polling an API or refreshing a dashboard manually, you might not notice a problem for minutes. With real-time monitoring, you see failures the instant they happen.

HookWatch uses WebSockets to push live event updates directly to your dashboard. Here's how it works and why it matters.

Why Real-Time Monitoring?

Traditional webhook monitoring relies on periodic checks:

Polling approach:
  [Check] ──── 30s ──── [Check] ──── 30s ──── [Check]
                                    ↑
                            Failure happened here
                            (noticed 30s later)

Real-time approach:
  [Event] → [Dashboard update] → [You see it instantly]

The difference is critical during incidents. With real-time monitoring, you can:

• Spot failures immediately instead of discovering them minutes later
• Watch delivery attempts in real-time as retries happen
• Verify fixes instantly after deploying a change
• Debug payload issues by inspecting events as they arrive

How HookWatch Real-Time Works

Architecture

HookWatch's real-time pipeline uses Redis Pub/Sub to broadcast events to connected WebSocket clients:

┌──────────┐    ┌──────────┐    ┌───────────┐    ┌───────────┐
│ Webhook  │ →  │  Redis   │ →  │ WebSocket │ →  │ Dashboard │
│ Service  │    │ Pub/Sub  │    │  Service  │    │ (Browser) │
└──────────┘    └──────────┘    └───────────┘    └───────────┘

1. The webhook service receives an event and publishes it to Redis
2. The WebSocket service subscribes to Redis channels per endpoint
3. Connected dashboard clients receive the event in real-time
4. The dashboard UI updates instantly—no page refresh needed

Connection Flow

When you open the HookWatch dashboard, a WebSocket connection is established:

// Simplified client-side connection
const ws = new WebSocket('wss://ws.hookwatch.dev');

ws.onopen = () => {
  // Subscribe to events for specific endpoints
  ws.send(JSON.stringify({
    type: 'subscribe',
    endpoints: ['ep_abc123', 'ep_def456']
  }));
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);

  switch (data.type) {
    case 'event.received':
      addEventToList(data.event);
      break;
    case 'event.delivered':
      updateEventStatus(data.eventId, 'delivered');
      break;
    case 'event.failed':
      updateEventStatus(data.eventId, 'failed');
      showAlert(data.event);
      break;
  }
};

Event Types

The WebSocket stream includes several event types:

Real-Time Dashboard Features

Live Event Stream

The dashboard shows events flowing in real-time:

┌─────────────────────────────────────────────────┐
│  Events - payment-webhook                  LIVE │
├─────────────────────────────────────────────────┤
│  ● evt_012  POST  1.2KB  delivered   just now   │
│  ● evt_011  POST  856B   delivered   2s ago     │
│  ● evt_010  POST  2.1KB  retrying    5s ago     │
│  ● evt_009  POST  1.1KB  delivered   8s ago     │
│  ● evt_008  POST  944B   delivered   12s ago    │
│                                                 │
│  ▼ Loading older events...                      │
└─────────────────────────────────────────────────┘

New events appear at the top of the list with a subtle animation. Status badges update in place as delivery progresses from "received" to "delivered" or "failed."

Delivery Timeline

For each event, you can see the full delivery timeline updating in real-time:

Event evt_010
  14:23:11  Received (POST, 2.1KB)
  14:23:11  Forwarding to https://api.myapp.com/webhooks
  14:23:13  ✗ Failed (503 Service Unavailable, 2.3s)
  14:23:13  Scheduling retry #1 in 60s
  14:24:13  Retrying...
  14:24:14  ✓ Delivered (200 OK, 0.8s)     ← live update

Status Indicators

The dashboard shows real-time health for each endpoint:

Endpoints
  ● payment-webhook    healthy    12 events/min
  ● github-ci          healthy     3 events/min
  ◐ order-processor    degraded    8 events/min (2 retrying)
  ○ slack-alerts       inactive    0 events/min

Status updates propagate instantly when delivery patterns change.

Debugging with Real-Time Data

Scenario: Investigating Failed Deliveries

Without real-time monitoring, you'd need to:

1. Notice that something is wrong (maybe from a user report)
2. Log in to the dashboard
3. Search for failed events
4. Check logs for error details
5. Fix the issue
6. Wait and hope it worked

With real-time monitoring:

1. See the failure appear in your dashboard instantly
2. Click the event to inspect headers and payload
3. Check the response body for error details
4. Fix the issue
5. Watch the next delivery succeed in real-time

Scenario: Verifying a Deploy

After deploying a fix for webhook handling:

Before fix:
  ● evt_100  POST  retrying  (503 Service Unavailable)
  ● evt_099  POST  retrying  (503 Service Unavailable)
  ● evt_098  POST  failed    (503 Service Unavailable)

Deploy fix...

After fix (watching live):
  ● evt_103  POST  delivered  ✓ (200 OK, 0.3s)
  ● evt_102  POST  delivered  ✓ (200 OK, 0.4s)
  ● evt_101  POST  delivered  ✓ (200 OK, 0.2s)
  ● evt_100  POST  delivered  ✓ (retried, 200 OK)

You see the improvement immediately, with no waiting or page refreshing.

Authentication and Security

WebSocket connections are authenticated using JWT tokens:

// Connection includes auth token
const ws = new WebSocket(
  'wss://ws.hookwatch.dev?token=eyJhbG...'
);

• Tokens are validated on connection
• Each user only sees events for their own endpoints
• Connections are terminated when tokens expire
• All traffic is encrypted over WSS (TLS)

Performance Considerations

HookWatch's WebSocket service is designed for high throughput:

• Per-endpoint channels: You only receive events for endpoints you're viewing
• Efficient serialization: Events are sent as compact JSON
• Automatic reconnection: The client handles disconnects gracefully
• Backpressure handling: If the client falls behind, older events are dropped (you can always fetch them via the API)

Getting Started

Real-time monitoring is built into the HookWatch dashboard. Open any endpoint's event view, and you'll see events flowing in live—no configuration required.

Combine real-time monitoring with alerts to catch issues before your users do.