notlogs rocket
notlogs

Frameworks

React Integration Guide

Lightweight, memory-capped React hooks for real-time SSE log streaming and querying in Vite, Remix, Next.js, and CRA.

1. Install Package

bash
npm install @notlogs/react

2. Live Log Streaming with useStream

Stream incoming logs live directly over Server-Sent Events (SSE) into your admin widgets or monitoring dashboards:

components/LiveLogViewer.tsx
tsx
import React from "react";
import { useStream } from "@notlogs/react";

export function LiveLogViewer() {
  const { data: logs, isLoading, connected, error } = useStream({
    appName: "order-service",
    level: "error",
  });

  if (isLoading) return <div>Connecting to live stream...</div>;
  if (error) return <div>Stream failed: {error.message}</div>;

  return (
    <div className="rounded-xl border border-white/10 bg-[#121216] p-4 font-mono text-xs">
      <div className="flex items-center justify-between pb-3 border-b border-white/10">
        <span>Live Stream Feed</span>
        <span className={connected ? "text-emerald-400" : "text-red-400"}>
          {connected ? "🟢 Connected" : "🔴 Disconnected"}
        </span>
      </div>
      <ul className="mt-3 space-y-1.5 max-h-96 overflow-y-auto">
        {logs.map((log) => (
          <li key={log.id} className="flex gap-2">
            <span className="text-slate-500">[{log.ts}]</span>
            <span className="text-amber-400 font-bold">[{log.level.toUpperCase()}]</span>
            <span className="text-slate-200">{log.message}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

3. Querying Past Logs with useLogs

Fetch historical structured events with automatic request deduplication and in-memory caching:

components/LogHistory.tsx
tsx
import React from "react";
import { useLogs } from "@notlogs/react";

export function LogHistory() {
  const { data: logs, isLoading, refetch } = useLogs({
    appName: "order-service",
    subsystem: "db",
  });

  return (
    <div>
      <button
        onClick={() => refetch()}
        className="rounded bg-sky-500 px-3 py-1 text-xs text-white"
      >
        Refresh
      </button>

      {isLoading ? (
        <p>Loading history...</p>
      ) : (
        <pre className="text-xs">{JSON.stringify(logs, null, 2)}</pre>
      )}
    </div>
  );
}
PreviousExpress.js Integration Guide
NextIntroduction