Observability Package Family

Package Hierarchy

@edge-stream/observability-core        ← base interfaces + LoggingService
    ↑
@edge-stream/observability-hooks-js    ← external platform hooks (Splunk, Datadog, etc.)
    ↑
@edge-stream/observability-react       ← React monitor components (HooksMonitor, etc.)
@edge-stream/observability-react-native ← React Native monitor components
    ↑
@edge-stream/observability-ui          ← Shared UI components for monitor UIs

@edge-stream/observability-core

pnpm add @edge-stream/observability-core

import { getLoggingService, getLogSettings } from '@edge-stream/observability-core';
// Also re-exported from 'edge-stream-js'

// Base interfaces: ILoggingService, MessageActivityLog, HookLog, SubscriberLog, LogFilter
// Singleton: getLoggingService() — in-memory ring buffer of message activity

@edge-stream/observability-hooks-js

pnpm add @edge-stream/observability-hooks-js

import {
  BaseLogHook,        // abstract base for batching observability hooks
  WebMcpHook,         // any REST endpoint
  SplunkLogHook,      // Splunk HEC
  ElasticsearchHook,  // Elasticsearch
  DatadogHook,        // Datadog Logs API
  NewRelicHook,       // New Relic Logs API
  SumoLogicHook,      // Sumo Logic
  GraylogHook,        // Graylog GELF
} from '@edge-stream/observability-hooks-js';

// All hooks use batching: batchSize (default 100) + flushInterval (default 5000ms)
server.incomingPipeline.addHook(new DatadogHook({
  apiKey: env.DATADOG_KEY,
  site: 'datadoghq.com',
}));

@edge-stream/observability-react

pnpm add @edge-stream/observability-react

import {
  HooksMonitor,          // real-time hook execution log
  SubscribersMonitor,    // real-time subscriber delivery log
  ActivityStreamMonitor, // full activity stream (overview + timeline)
  ActivityStreamPage,    // page-level wrapper for ActivityStreamMonitor
} from '@edge-stream/observability-react';

// Props shared by all monitor components:
// pollInterval: number (default 500ms)
// maxLogs: number (default 100)
// showSettings: boolean (default true)

@edge-stream/observability-react-native

pnpm add @edge-stream/observability-react-native

// Same components as observability-react, adapted for React Native
// Uses RN StyleSheet instead of CSS, FlatList instead of overflow:auto div
import { HooksMonitor, SubscribersMonitor } from '@edge-stream/observability-react-native';

Minimum Setup for Dev Monitoring

// 1. Enable in-process observability
import { HookActivityLogger } from 'edge-stream-js';
server.incomingPipeline.addHook(new HookActivityLogger());

// 2. Mount a monitor component (dev only)
import { HooksMonitor } from '@edge-stream/observability-react';
{import.meta.env.DEV && <HooksMonitor />}