@bernierllc/webhook-manager-ui

React components for webhook configuration, monitoring, and debugging using Tamagui.

Features

• WebhookDashboard: Main dashboard aggregating all webhook management views
• EndpointList: Display and manage webhook endpoints
• EndpointEditor: Create and edit webhook endpoints with validation
• EventLog: Paginated event history with filtering and retry capabilities
• EventDetails: Detailed view of individual webhook events
• HealthDashboard: Monitor webhook endpoint health and metrics
• WebhookAnalytics: Visualize webhook analytics with charts
• WebhookDebugger: Test webhook endpoints with custom payloads
• SignatureValidator: Validate webhook signatures

Installation

npm install @bernierllc/webhook-manager-ui
# or
pnpm add @bernierllc/webhook-manager-ui

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

Optional peer dependency for type support:

{
  "@bernierllc/webhook-service": "workspace:*"
}

Usage

Basic Dashboard

import { WebhookDashboard } from '@bernierllc/webhook-manager-ui';

function App() {
  return (
    <WebhookDashboard
      apiBaseUrl="/api/webhooks"
      availableSources={['user.created', 'user.updated', 'payment.completed']}
    />
  );
}

With Analytics and Validation

import { WebhookDashboard } from '@bernierllc/webhook-manager-ui';

function App() {
  const analytics = {
    totalEvents: 1000,
    successRate: 0.95,
    averageResponseTime: 150,
    eventsByType: { 'user.created': 500, 'user.updated': 500 },
    eventsByStatus: { delivered: 950, failed: 50 },
    timeline: [
      { timestamp: new Date(), successful: 50, failed: 5 },
    ],
  };

  const handleValidateSignature = async (payload, secret, signature) => {
    // Your validation logic
    return { valid: true };
  };

  const handleDebugRequest = async (url, payload, headers) => {
    // Your debug request logic
    return { success: true, data: 'response' };
  };

  return (
    <WebhookDashboard
      apiBaseUrl="/api/webhooks"
      analytics={analytics}
      onValidateSignature={handleValidateSignature}
      onSendDebugRequest={handleDebugRequest}
    />
  );
}

Individual Components

import {
  EndpointList,
  EndpointEditor,
  EventLog,
  useWebhookManager,
  useEventLog,
} from '@bernierllc/webhook-manager-ui';

function MyWebhookUI() {
  const { endpoints, createEndpoint, updateEndpoint, deleteEndpoint } =
    useWebhookManager({ apiBaseUrl: '/api/webhooks' });

  const { events, total, page, retryEvent } = useEventLog({
    apiBaseUrl: '/api/webhooks',
    page: 1,
    pageSize: 20,
  });

  return (
    <div>
      <EndpointList
        endpoints={endpoints}
        onEdit={(endpoint) => console.log('Edit', endpoint)}
        onDelete={(id) => deleteEndpoint(id)}
      />

      <EventLog
        events={events}
        total={total}
        page={page}
        pageSize={20}
        onRetry={retryEvent}
      />
    </div>
  );
}

API

WebhookDashboard Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiBaseUrl | string | No | Base URL for webhook API (default: /api/webhooks) | | availableSources | string[] | No | Available event sources for endpoint configuration | | health | WebhookHealth[] | No | Health metrics for endpoints | | analytics | WebhookAnalytics | No | Analytics data for visualization | | onValidateSignature | function | No | Signature validation handler | | onSendDebugRequest | function | No | Debug request handler |

Hooks

useWebhookManager

const {
  endpoints,           // Array of webhook endpoints
  isLoading,          // Loading state
  error,              // Error state
  refetch,            // Refetch function
  createEndpoint,     // Create new endpoint
  updateEndpoint,     // Update existing endpoint
  deleteEndpoint,     // Delete endpoint
  testEndpoint,       // Test endpoint
  isCreating,         // Creation loading state
  isUpdating,         // Update loading state
  isDeleting,         // Delete loading state
  isTesting,          // Test loading state
} = useWebhookManager({
  apiBaseUrl: '/api/webhooks',
  onError: (error) => console.error(error),
  onSuccess: (message) => console.log(message),
});

useEventLog

const {
  events,             // Array of webhook events
  total,              // Total event count
  page,               // Current page
  pageSize,           // Page size
  isLoading,          // Loading state
  error,              // Error state
  refetch,            // Refetch function
  retryEvent,         // Retry failed event
  cancelEvent,        // Cancel pending event
  isRetrying,         // Retry loading state
  isCancelling,       // Cancel loading state
} = useEventLog({
  apiBaseUrl: '/api/webhooks',
  endpointId: 'endpoint-123',
  status: 'failed',
  eventType: 'user.created',
  page: 1,
  pageSize: 20,
});

TypeScript Support

This package includes full TypeScript support with exported types:

import type {
  WebhookEndpoint,
  WebhookEndpointInput,
  WebhookEvent,
  WebhookHealth,
  TestResult,
  SignatureValidationResult,
  WebhookAnalytics,
} from '@bernierllc/webhook-manager-ui';

Development

# Install dependencies
pnpm install

# Build
pnpm run build

# Run tests
pnpm run test

# Run tests with coverage
pnpm run test:coverage

# Lint
pnpm run lint

License

SEE LICENSE IN LICENSE

Copyright (c) 2025 Bernier LLC