AgentEyesAgentEyes

React Hooks

API reference for useAgentEyes, useAgentEvents, and useAgentSnapshot.

All hooks require AgentEyesProvider to be mounted above them in the component tree.

useAgentEyes

Returns the AgentEyes instance directly.

import { useAgentEyes } from '@everkers/agent-eyes/react';

function MyComponent() {
  const eyes = useAgentEyes();

  // Access the full API
  eyes.getEvents('network');
  eyes.getRecent(10);
  eyes.clear();
  eyes.snapshot();
}

Return type

PropertyTypeDescription
start()voidStart all collectors
stop()voidStop all collectors
getEvents(type?)AgentEvent[]Get events, optionally filtered by type
getRecent(n?)AgentEvent[]Get last N events
subscribe(fn)() => voidSubscribe to real-time events
clear()voidClear all events
snapshot()objectFull app state snapshot
toJSON()stringSerialized snapshot
isRunningbooleanWhether collectors are active
enabledbooleanWhether agent-eyes is enabled

useAgentEvents

Subscribe to events of a specific type. Returns a live-updating array.

import { useAgentEvents } from '@everkers/agent-eyes/react';

function ErrorList() {
  const errors = useAgentEvents('error');

  return (
    <ul>
      {errors.map((err, i) => (
        <li key={i}>{err.message}</li>
      ))}
    </ul>
  );
}

Parameters

ParameterTypeDescription
typeAgentEvent['type']Event type to filter: 'log', 'network', 'error', 'dom-snapshot', 'performance', 'react-component'

Return type

AgentEvent[] — array of events matching the specified type, updated in real-time.

useAgentSnapshot

Returns a full application state snapshot, updated in real-time.

import { useAgentSnapshot } from '@everkers/agent-eyes/react';

function Dashboard() {
  const snapshot = useAgentSnapshot();

  return (
    <div>
      <p>Logs: {snapshot.logs.length}</p>
      <p>Network: {snapshot.network.length}</p>
      <p>Errors: {snapshot.errors.length}</p>
    </div>
  );
}

Return type

{
  logs: AgentEvent[];
  network: AgentEvent[];
  errors: AgentEvent[];
  dom: AgentEvent[];
  performance: AgentEvent[];
  components: AgentEvent[];
  meta: {
    url: string;
    timestamp: number;
    eventCount: number;
  };
}

On this page