Integrating into Your App

Complete Setup: Pipeline + Monitor

// 1. Setup: add HookActivityLogger to the pipeline
import { createEdgeStream, HookActivityLogger, NormalizationHook } from 'edge-stream-js';

export const stream = createEdgeStream({ logLevel: 'debug' });

stream.registerServer({
  id: 'bas',
  type: 'bas',
  url: '/hubs/edge-stream',
  transportConfig: { type: 'signalr', url: '/hubs/edge-stream', accessToken: getToken() }
});

const server = stream.server('bas')!;

// Enable observability — must be in the pipeline
server.incomingPipeline.addHook(new HookActivityLogger()); // priority 5
server.incomingPipeline.addHook(new NormalizationHook()); // priority 110

await stream.start();

Dev Panel in React

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

export function EdgeStreamDevPanel() {
  const [activeTab, setActiveTab] = useState<'hooks' | 'subscribers'>('hooks');

  if (!import.meta.env.DEV) return null; // dev-only

  return (
    <div style={{
      position: 'fixed',
      bottom: 0, right: 0,
      width: '600px', height: '400px',
      background: '#1a1a2e',
      border: '1px solid #2d3a4a',
      borderRadius: '8px 0 0 0',
      overflow: 'auto',
      zIndex: 9999,
    }}>
      <div style={{ display: 'flex', gap: '8px', padding: '8px', borderBottom: '1px solid #2d3a4a' }}>
        <button onClick={() => setActiveTab('hooks')}>Hooks</button>
        <button onClick={() => setActiveTab('subscribers')}>Subscribers</button>
      </div>

      {activeTab === 'hooks' && (
        <HooksMonitor pollInterval={1000} maxLogs={50} showSettings={false} />
      )}
      {activeTab === 'subscribers' && (
        <SubscribersMonitor pollInterval={1000} maxLogs={50} showSettings={false} />
      )}
    </div>
  );
}

Admin Dashboard Integration

// Dedicated observability page in an admin area
import { ActivityStreamMonitor } from '@edge-stream/observability-react';

export function EdgeStreamAdminPage() {
  return (
    <AdminLayout title="EdgeStream Monitor">
      <ActivityStreamMonitor
        pollInterval={2000}   // slower refresh for admin dashboards
        maxLogs={200}         // more history for investigation
        showSettings={true}
      />
    </AdminLayout>
  );
}

LoggingService Direct Access

If you need programmatic access to the log data — for custom UIs or server-side reporting — use the LoggingService singleton directly:

import { getLoggingService, getLogSettings } from 'edge-stream-js';

const loggingService = getLoggingService();

// Retrieve recent logs
const logs = loggingService.getRecentLogs(100);

// Query with filters
const failedLogs = loggingService.queryLogs({ status: 'failed' });
const basLogs = loggingService.queryLogs({ serverId: 'bas' });

// Export all logs as JSON string
const json = loggingService.exportLogsAsJSON();

// Clear all logs
loggingService.clearAllLogs();

// Check/set log settings
const settings = getLogSettings();
console.log('Hook logging:', settings.isHookLoggingEnabled());
console.log('Subscriber logging:', settings.isSubscriberLoggingEnabled());

Environment-Conditional Mount

// Only include observability components in development builds
// This ensures zero bundle impact in production

// Vite example
{import.meta.env.DEV && <EdgeStreamDevPanel />}

// Environment variable example
{process.env.NODE_ENV === 'development' && <HooksMonitor />}

// Feature flag example
{featureFlags.edgeStreamDebug && <ActivityStreamMonitor />}