useStoreMetrics

function
devtools-ui/src/hooks/useStoreMetrics.ts:71
signature
useStoreMetrics(storeId, options?): { loading: boolean; metrics: null | { avgProcessingTimeMs: number; connectorCount: number; dedupHits: number; effectCount: number; eventCount: number; eventsPerSecond: number; middlewareCount: number; middlewareRejections: number; queueDepth: number; reducerCount: number; subscriberCount: number }; refresh: () => void }

Fetches and caches performance metrics for a store, with automatic periodic refresh.

Parameters

NameTypeDescription
storeIdnull | stringThe store ID to query, or null to disable.
NameTypeDescription
options?UseStoreMetricsOptionsOptional configuration (see UseStoreMetricsOptions).

Returns

{ loading: boolean; metrics: null | { avgProcessingTimeMs: number; connectorCount: number; dedupHits: number; effectCount: number; eventCount: number; eventsPerSecond: number; middlewareCount: number; middlewareRejections: number; queueDepth: number; reducerCount: number; subscriberCount: number }; refresh: () => void }, An object with metrics (MetricsData or null), loading, and refresh.

Example

example
import { useStoreMetrics } from "@yoltra/devtools-ui";

function MetricsPanel({ storeId }: { storeId: string }) {
  const { metrics, loading, refresh } = useStoreMetrics(storeId, {
    refreshIntervalMs: 5000,
  });
  if (loading || !metrics) return <p>Loading...</p>;
  return (
    <div>
      <pre>{JSON.stringify(metrics, null, 2)}</pre>
      <button onClick={refresh}>Refresh Now</button>
    </div>
  );
}