SubscribersMonitor

Basic Usage

import { SubscribersMonitor } from '@edge-stream/observability-react';

function DevPanel() {
  return (
    <SubscribersMonitor
      showSettings={true}
      pollInterval={500}
      maxLogs={100}
    />
  );
}

Props

What SubscribersMonitor Displays

Live Monitor Tab

• Stats bar: Total Deliveries, Delivered (green), Failed (red), Pending (yellow)
• Topic breakdown: Badge for each topic seen with delivery count — instant traffic overview
• Filter input: Filter rows by topic (case-insensitive substring)
• Delivery log: One row per subscriber delivery — color dot, timestamp, group name (derived from topic), full topic, status
• Detail panel: Click a row to see the parent message's full subscriber delivery trace: message ID, topic, and each subscriber's status + duration + error

Settings Tab

• Checkbox to enable/disable subscriber logging via LogSettings.isSubscriberLoggingEnabled()

Subscriber Log Data

// Each subscriberLog entry in a MessageActivityLog:
interface SubscriberLog {
  topic: string;
  status: 'delivered' | 'error' | 'queued';
  processingTime?: number;  // ms — time for subscriber callback to complete
  error?: Error;            // set if status === 'error'
  timestamp: Date;
}

Topic Grouping

SubscribersMonitor groups deliveries by topic to show traffic distribution at a glance:

// If your app has these subscriptions:
stream.subscribe('bas', 'workflow.*', workflowHandler);
stream.subscribe('bas', 'hil.*', hilHandler);
stream.subscribe('bas', 'notifications.*', notifyHandler);

// SubscribersMonitor will show topic badges like:
// workflow.taskCompleted  12
// hil.approvalRequired     3
// notifications.badge      8

Diagnosing Slow Subscribers

// Click a delivery row with a long processingTime to see:
// Message Delivery Summary
//   Message ID: msg-abc123
//   Topic: workflow.taskCompleted
//   Subscriber Deliveries: 2
//
//   Delivery Details:
//   ● workflowHandler  delivered  142ms
//   ● auditHandler     delivered   8ms

// A subscriber taking 142ms is slow — the pipeline may back up
// under high message volume. Consider async processing or
// moving heavy work off the callback thread.