observability-react Package — Observability

Package Exports

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

// Page-level wrappers (used in DevTools app)
import {
  ActivityStreamPage,
} from '@edge-stream/observability-react';

Components At a Glance

Component	Focus	Key Features
`HooksMonitor`	Hook execution pipeline	Stats, filter by name, timing, error detail, toggle hook logging
`SubscribersMonitor`	Subscriber delivery	Stats, topic grouping, filter by topic, error detail, toggle subscriber logging
`ActivityStreamMonitor`	Full message lifecycle	Overview + Timeline tabs, filter by status/server/search, export JSON, clear logs

ActivityStreamMonitor

The most comprehensive component — shows every message that flowed through EdgeStream with full filter and export capabilities:

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

function DevDashboard() {
  return (
    <ActivityStreamMonitor
      pollInterval={1000}
      maxLogs={100}
      showSettings={true}
    />
  );
}

// Features:
// Overview tab: stats (total, success, failed, avg processing time),
//               topic tags, status/server/text filters, export + clear
// Timeline tab: chronological message list with color-coded status bars
// Settings tab: activity stream configuration

ActivityStreamMonitor — Available Filters

Filter	Type	Matches On
Status	Dropdown: all / completed / failed / processing	`log.status`
Server ID	Text input	`log.serverId`
Search	Text input	`log.messageId`, `log.messageType`, `log.topic`

Export and Clear

// Export button: calls loggingService.exportLogsAsJSON()
// Downloads a .json file named: activity-logs-{ISO timestamp}.json

// Clear button: calls loggingService.clearAllLogs()
// Confirmation dialog before clearing

No EdgeStreamProvider Required

The observability components read from the LoggingService singleton — they do not consume the React EdgeStreamContext. Mount them anywhere:

// Works without EdgeStreamProvider
function StandaloneMonitorPage() {
  return (
    <div>
      <h1>EdgeStream Debug</h1>
      <HooksMonitor />
      <SubscribersMonitor />
    </div>
  );
}

// Also works inside EdgeStreamProvider
function AppWithProvider() {
  return (
    <EdgeStreamProvider client={edgeStreamClient}>
      <App />
      {import.meta.env.DEV && <HooksMonitor />}
    </EdgeStreamProvider>
  );
}

All Three Components Poll Independently Each component sets its own setInterval in a useEffect. Mounting all three simultaneously triples the polling load on LoggingService. In production dev panels, mount only the component you need — or consolidate into ActivityStreamMonitor which covers all use cases in one component.

← observability-hooks-js Next: Mobile Dashboard →