Client Hooks

React Client Hooks Reference

Logix includes React client hooks for live SSE log streaming and historical query fetching.

1. getStream(filters?)

Establishes a persistent SSE stream to display incoming tail logs in real time. It features automatic reconnection and caps memory buffer at 5,000 logs.

'use client';

import { getStream } from '@chefu-tech/logix-next';

export default function TerminalStream() {
  const { data: logs, connected, isLoading, disconnect } = getStream({
    type: 'error',
    search: 'auth_failed',
  });

  return (
    <div>
      <div>Status: {connected ? 'LIVE' : 'DISCONNECTED'}</div>
      {logs.map((log) => (
        <div key={log.id}>[{log.ts}] {log.level}: {log.message}</div>
      ))}
    </div>
  );
}

2. getLogs(filters?)

Executes analytical queries against ClickHouse. Includes built-in request deduplication to handle React 18 Strict Mode double mounts.

'use client';

import { getLogs } from '@chefu-tech/logix-next';

export default function HistoricalQueryComponent() {
  const { data: logs, isLoading, refetch } = getLogs({
    search: 'checkout',
    appName: 'web-storefront',
    limit: 50,
  });

  if (isLoading) return <div>Querying ClickHouse database...</div>;

  return (
    <div>
      <button onClick={() => refetch()}>Refresh Data</button>
      {logs?.map((log: any, idx: number) => (
        <div key={idx}>{log.message}</div>
      ))}
    </div>
  );
}

← Next.js Integration Guide Webhooks & Verification →