HooksMonitor

Basic Usage

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

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

Props

What HooksMonitor Displays

The component has two tabs: Live Monitor and Settings.

Live Monitor Tab

• Stats bar: Total Hooks executed, Success count (green), Failed count (red)
• Filter input: Filter hook rows by hook name (case-insensitive substring)
• Hook log list: One row per hook execution — color dot (green/red/yellow), hook name, status
• Detail panel: Click any row to see the parent message's full hook trace: message ID, topic, and all hooks with timing and errors

Settings Tab

• Checkbox to enable/disable hook logging via LogSettings
• When disabled, hooks still execute but are not logged — zero overhead in production

Data Flow

// 1. HookActivityLogger records every hook invocation
server.incomingPipeline.addHook(new HookActivityLogger()); // priority 5

// 2. LoggingService stores them in a ring buffer
// (automatic — no additional setup needed)

// 3. HooksMonitor polls and renders
// setInterval(() => {
//   const allLogs = loggingService.getRecentLogs(maxLogs);
//   setLogs(allLogs || []);
// }, pollInterval)

// 4. allHookLogs = logs.flatMap(msg => msg.hookLogs || [])
// Each hookLog has: hookName, status ('success' | 'error' | 'pending'), executionTime, error?

Filtering by Hook Name

// In HooksMonitor, type in the filter box to narrow down:
// "Normal"     → shows only NormalizationHook rows
// "Audit"      → shows only AuditLogHook rows
// "Tenant"     → shows only TenantFilterHook rows

// Filtering is case-insensitive substring match on hookName
const filteredHooks = filter
  ? allHookLogs.filter((log) =>
      log.hookName?.toLowerCase().includes(filter.toLowerCase()))
  : allHookLogs;