Merge pull request #3974 from elizaOS/v2-clear-logs

feat: add clear logs method and api

Author: wtfsayo

packages/cli/src/server/api/index.ts

@@ -603,6 +603,35 @@ export function createApiRouter(
   router.get('/logs', logsHandler);
   router.post('/logs', logsHandler);
 
+  // Handler for clearing logs
+  const logsClearHandler = (_req, res) => {
+    try {
+      // Access the underlying logger instance
+      const destination = (logger as unknown)[Symbol.for('pino-destination')];
+
+      if (!destination?.clear) {
+        return res.status(500).json({
+          error: 'Logger clear method not available',
+          message: 'The logger is not configured to clear logs',
+        });
+      }
+
+      // Clear the logs
+      destination.clear();
+
+      logger.debug('Logs cleared via API endpoint');
+      res.json({ status: 'success', message: 'Logs cleared successfully' });
+    } catch (error) {
+      res.status(500).json({
+        error: 'Failed to clear logs',
+        message: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  };
+
+  // Add DELETE endpoint for clearing logs
+  router.delete('/logs', logsClearHandler);
+
   // Health check endpoints
   router.get('/health', (_req, res) => {
     logger.log({ apiRoute: '/health' }, 'Health check route hit');

packages/client/src/components/log-viewer.tsx

@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useCallback } from 'react';
 import { useAgents } from '../hooks/use-query-hooks';
 import { apiClient } from '../lib/api';
 import PageTitle from './page-title';
 import { ScrollArea } from './ui/scroll-area';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from './ui/button';
 
 interface LogEntry {
   level: number;
@@ -60,9 +62,11 @@ export function LogViewer({ agentName, level, hideTitle }: LogViewerProps = {})
   const [selectedLevel, setSelectedLevel] = useState(level || 'all');
   const [selectedAgentName, setSelectedAgentName] = useState(agentName || 'all');
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
+  const [isClearing, setIsClearing] = useState(false);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const isUserScrolling = useRef(false);
   const lastLogId = useRef<string>('');
+  const queryClient = useQueryClient();
 
   const { data, error, isLoading } = useQuery<LogResponse>({
     queryKey: ['logs', selectedLevel, selectedAgentName],
@@ -78,7 +82,20 @@ export function LogViewer({ agentName, level, hideTitle }: LogViewerProps = {})
   const { data: agents } = useAgents();
   const agentNames = agents?.data?.agents?.map((agent) => agent.name) ?? [];
 
-  const scrollToBottom = () => {
+  const handleClearLogs = async () => {
+    try {
+      setIsClearing(true);
+      await apiClient.deleteLogs();
+      // Invalidate the logs query to trigger a refetch
+      queryClient.invalidateQueries({ queryKey: ['logs'] });
+    } catch (error) {
+      console.error('Failed to clear logs:', error);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
+  const scrollToBottom = useCallback(() => {
     if (!scrollAreaRef.current) return;
 
     const scrollArea = scrollAreaRef.current;
@@ -89,7 +106,7 @@ export function LogViewer({ agentName, level, hideTitle }: LogViewerProps = {})
       top: scrollHeight - clientHeight,
       behavior: 'instant',
     });
-  };
+  }, []);
 
   useEffect(() => {
     if (!data?.logs?.length) return;
@@ -101,7 +118,7 @@ export function LogViewer({ agentName, level, hideTitle }: LogViewerProps = {})
       setTimeout(scrollToBottom, 0);
       lastLogId.current = currentLastLogId;
     }
-  }, [data?.logs, shouldAutoScroll]);
+  }, [data?.logs, shouldAutoScroll, scrollToBottom]);
 
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     if (isUserScrolling.current) return;
@@ -125,7 +142,7 @@ export function LogViewer({ agentName, level, hideTitle }: LogViewerProps = {})
 
   useEffect(() => {
     setTimeout(scrollToBottom, 100);
-  }, [data?.logs]);
+  }, [scrollToBottom]);
 
   const getLevelName = (level: number) => {
     return LOG_LEVEL_NUMBERS[level as keyof typeof LOG_LEVEL_NUMBERS] || 'UNKNOWN';
@@ -164,6 +181,10 @@ export function LogViewer({ agentName, level, hideTitle }: LogViewerProps = {})
       <div className="mb-4 flex items-center justify-between">
         {!hideTitle && <PageTitle title={'System Logs'} />}
         <div className="flex items-center gap-4">
+          <Button variant="destructive" size="sm" onClick={handleClearLogs} disabled={isClearing}>
+            {isClearing ? 'Clearing...' : 'Clear Logs'}
+          </Button>
+
           {!shouldAutoScroll && (
             <button
               type="button"

packages/client/src/lib/api.ts

@@ -369,6 +369,14 @@ export const apiClient = {
     });
   },
 
+  // Method to clear logs
+  deleteLogs: (): Promise<{ status: string; message: string }> => {
+    return fetcher({
+      url: '/logs',
+      method: 'DELETE',
+    });
+  },
+
   getAgentCompletion: (
     agentId: string,
     senderId: string,

packages/core/src/logger.ts

@@ -132,6 +132,15 @@ class InMemoryDestination implements DestinationStream {
   recentLogs(): LogEntry[] {
     return this.logs;
   }
+
+  /**
+   * Clears all logs from memory.
+   *
+   * @returns {void}
+   */
+  clear(): void {
+    this.logs = [];
+  }
 }
 
 const customLevels: Record<string, number> = {
@@ -197,6 +206,11 @@ const options = {
 // Create basic logger initially
 let logger = pino(options);
 
+// Add type for logger with clear method
+interface LoggerWithClear extends pino.Logger {
+  clear: () => void;
+}
+
 // Enhance logger with custom destination in Node.js environment
 if (typeof process !== 'undefined') {
   // Create the destination with in-memory logging
@@ -247,6 +261,14 @@ if (typeof process !== 'undefined') {
         const destination = new InMemoryDestination(prettyStream);
         logger = pino(options, destination);
         (logger as unknown)[Symbol.for('pino-destination')] = destination;
+
+        // Add clear method to logger
+        (logger as unknown as LoggerWithClear).clear = () => {
+          const destination = (logger as unknown)[Symbol.for('pino-destination')];
+          if (destination instanceof InMemoryDestination) {
+            destination.clear();
+          }
+        };
       });
     }
   }
@@ -256,6 +278,14 @@ if (typeof process !== 'undefined') {
     const destination = new InMemoryDestination(stream);
     logger = pino(options, destination);
     (logger as unknown)[Symbol.for('pino-destination')] = destination;
+
+    // Add clear method to logger
+    (logger as unknown as LoggerWithClear).clear = () => {
+      const destination = (logger as unknown)[Symbol.for('pino-destination')];
+      if (destination instanceof InMemoryDestination) {
+        destination.clear();
+      }
+    };
   }
 }