useStoreMetrics
functionsignature
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
| Name | Type | Description |
|---|---|---|
storeId | null | string | The store ID to query, or null to disable. |
| Name | Type | Description |
|---|---|---|
options? | UseStoreMetricsOptions | Optional 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>
);
}