Gabriel Kaszewski
e805028d46
- Implemented a custom tracing layer (`AppLogLayer`) to capture log events and broadcast them to SSE clients. - Created admin routes for streaming server logs and listing recent activity logs. - Added an activity log repository interface and SQLite implementation for persisting activity events. - Integrated activity logging into user authentication and channel CRUD operations. - Developed frontend components for displaying server logs and activity logs in the admin panel. - Enhanced the video player with a stats overlay for monitoring streaming metrics.
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { api } from "@/lib/api";
|
|
import type { ActivityEvent, LogLine } from "@/lib/types";
|
|
|
|
const API_BASE =
|
|
process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000/api/v1";
|
|
|
|
export function useActivityLog(token: string | null) {
|
|
return useQuery<ActivityEvent[]>({
|
|
queryKey: ["activity-log"],
|
|
queryFn: () => api.admin.activity(token!),
|
|
enabled: !!token,
|
|
refetchInterval: 10_000,
|
|
});
|
|
}
|
|
|
|
export function useServerLogs(token: string | null) {
|
|
const [lines, setLines] = useState<LogLine[]>([]);
|
|
const [connected, setConnected] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
|
|
const url = `${API_BASE}/admin/logs?token=${encodeURIComponent(token)}`;
|
|
const es = new EventSource(url);
|
|
|
|
es.onopen = () => setConnected(true);
|
|
|
|
es.onmessage = (e) => {
|
|
try {
|
|
const line = JSON.parse(e.data) as LogLine;
|
|
setLines((prev) => [...prev.slice(-999), line]);
|
|
} catch {
|
|
// ignore malformed lines
|
|
}
|
|
};
|
|
|
|
es.onerror = () => {
|
|
setConnected(false);
|
|
};
|
|
|
|
return () => {
|
|
es.close();
|
|
setConnected(false);
|
|
};
|
|
}, [token]);
|
|
|
|
return { lines, connected };
|
|
}
|