diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx index 8befdbf4d09..15f852408ca 100644 --- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx +++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx @@ -74,7 +74,7 @@ export function LogViewer({ ? moment(endDate).endOf("day").utc().format("YYYY-MM-DD HH:mm:ss") : moment().utc().format("YYYY-MM-DD HH:mm:ss"); - const { data: fullLogResponse, isFetching: isFetchingFullLog } = useQuery({ + const { data: fullLogResponse, isFetching: isFetchingFullLog, isError: isFullLogError } = useQuery({ queryKey: ["spend-log-by-request", selectedRequestId, startTime, endTime], queryFn: async () => { if (!accessToken || !selectedRequestId) return null; @@ -198,6 +198,7 @@ export function LogViewer({ onClose={handleCloseDrawer} logEntry={selectedLog} logEntryLoading={isFetchingFullLog} + logEntryError={isFullLogError} accessToken={accessToken} allLogs={selectedLog ? [selectedLog] : []} startTime={startTime} diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx index 16d4a77dd33..6c61185d9d8 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.test.tsx @@ -125,7 +125,7 @@ describe("LogDetailsDrawer session sidebar sorting", () => { }); describe("LogDetailsDrawer without a resolved log", () => { - const renderDrawer = (props: { logEntry: LogEntry | null; logEntryLoading?: boolean }) => { + const renderDrawer = (props: { logEntry: LogEntry | null; logEntryLoading?: boolean; logEntryError?: boolean }) => { const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } }); return render( @@ -140,6 +140,13 @@ describe("LogDetailsDrawer without a resolved log", () => { expect(screen.getByText(/Log details are unavailable for this request/i)).toBeDefined(); }); + it("blames the failed request rather than the date range when the lookup errored", () => { + renderDrawer({ logEntry: null, logEntryError: true }); + + expect(screen.getByText(/Loading the details for this request failed/i)).toBeDefined(); + expect(screen.queryByText(/outside the selected date range/i)).toBeNull(); + }); + it("shows a spinner while the log is still being fetched", () => { renderDrawer({ logEntry: null, logEntryLoading: true }); diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx index 23530479d4b..a9945c7cc3a 100644 --- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx @@ -21,6 +21,7 @@ export interface LogDetailsDrawerProps { onClose: () => void; logEntry: LogEntry | null; logEntryLoading?: boolean; + logEntryError?: boolean; sessionId?: string | null; accessToken?: string | null; allLogs?: LogEntry[]; @@ -114,6 +115,7 @@ export function LogDetailsDrawer({ onClose, logEntry, logEntryLoading = false, + logEntryError = false, sessionId, accessToken, allLogs = [], @@ -126,7 +128,7 @@ export function LogDetailsDrawer({ const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [copiedLeftPanelId, setCopiedLeftPanelId] = useState(false); - const { data: sessionData, isFetching: isFetchingSession } = useQuery({ + const { data: sessionData, isFetching: isFetchingSession, isError: isSessionError } = useQuery({ queryKey: ["sessionLogs", sessionId], queryFn: async () => { if (!sessionId || !accessToken) return { logs: [] as LogEntry[], total: 0 }; @@ -298,6 +300,7 @@ export function LogDetailsDrawer({ if (!open) return null; const isResolvingLog = isSessionMode ? isFetchingSession : logEntryLoading; + const lookupFailed = isSessionMode ? isSessionError : logEntryError; return ( ) : (

- Log details are unavailable for this request. It may have been purged from the spend logs, or it falls - outside the selected date range. + {lookupFailed + ? "Loading the details for this request failed. Check the proxy is reachable and try again." + : "Log details are unavailable for this request. It may have been purged from the spend logs, or it falls outside the selected date range."}

)}