EdgeStreamProvider

Basic Setup

import React from 'react';
import { createEdgeStream, NormalizationHook } from 'edge-stream-js';
import { EdgeStreamProvider } from 'edge-stream-js-react';

// Create and configure EdgeStream outside React (module scope)
const stream = createEdgeStream({ logLevel: 'info' });

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

const server = stream.server('bas')!;
server.incomingPipeline.addHook(new NormalizationHook());

// Provide to React tree
function App() {
  return (
    <EdgeStreamProvider
      edgeStreamClient={stream}
      onError={(error) => console.error('EdgeStream error:', error)}
      onConnectionStatusChange={(status) => console.log('Status:', status)}
    >
      <Router />
    </EdgeStreamProvider>
  );
}

Props

What the Provider Does

// On mount (simplified internal logic):
// 1. Sets connectionStatus = 'connecting'
// 2. Calls edgeStreamClient.start() if status === 'idle'
// 3. On success: sets connectionStatus = 'connected', isInitialized = true
// 4. Subscribes to: stream:started, stream:stopped, stream:error
// 5. Provides { client, connectionStatus, health } via EdgeStreamContext

// On unmount:
// 1. Sets isMounted = false (prevents state updates after unmount)
// 2. Unsubscribes from stream:started, stream:stopped, stream:error
// Note: does NOT call stop() — transport manages itself

Context Value

interface EdgeStreamContextValue {
  client: IEdgeStream;          // the EdgeStream instance
  connectionStatus: ConnectionStatus; // 'connecting' | 'connected' | 'disconnected' | 'error' | 'checking'
  health: HealthStatus | null;  // health metrics
}

interface HealthStatus {
  connectionStatus: ConnectionStatus;
  lastHeartbeat: Date | null;
  messageCount: number;
  errorCount: number;
  reconnectAttempts: number;
  uptime: number;  // milliseconds
}

Connection Status Transitions