Log table error states

src/hooks/useGetLogStreamSchema.ts

@@ -6,17 +6,19 @@ import { Field } from '@/@types/parseable/dataType';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsProvider';
 import { useStreamStore, streamStoreReducers } from '@/pages/Stream/providers/StreamProvider';
+import { AxiosError } from 'axios';
+import _ from 'lodash';
 
-const {setStreamSchema} = streamStoreReducers;
-const {setTableHeaders} = logsStoreReducers;
+const { setStreamSchema } = streamStoreReducers;
+const { setTableHeaders } = logsStoreReducers;
 
 export const useGetLogStreamSchema = () => {
 	const [data, setData] = useMountedState<LogStreamSchemaData | null>(null);
 	const [error, setError] = useMountedState<string | null>(null);
 	const [loading, setLoading] = useMountedState<boolean>(false);
 	const [currentStream] = useAppStore((store) => store.currentStream);
-	const [, setLogsStore] = useLogsStore(_store => null);
-	const [, setStreamStore] = useStreamStore(_store => null);
+	const [, setLogsStore] = useLogsStore((_store) => null);
+	const [, setStreamStore] = useStreamStore((_store) => null);
 
 	const getDataSchema = async (stream: string | null = currentStream) => {
 		try {
@@ -31,16 +33,19 @@ export const useGetLogStreamSchema = () => {
 					const schema = res.data;
 
 					setData(schema);
-					setStreamStore(store => setStreamSchema(store, schema))
-					setLogsStore(store => setTableHeaders(store, schema))
+					setStreamStore((store) => setStreamSchema(store, schema));
+					setLogsStore((store) => setTableHeaders(store, schema));
 					break;
 				}
 				default: {
-					setError('Failed to get log schema');
+					const errorMessage = res?.data;
+					setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to fetch schema');
 				}
 			}
-		} catch {
-			setError('Failed to get log schema');
+		} catch (e) {
+			const axiosError = e as AxiosError;
+			const errorMessage = axiosError?.response?.data;
+			setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to fetch schema');
 		} finally {
 			setLoading(false);
 		}

src/hooks/useQueryLogs.ts

@@ -8,6 +8,7 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { useQueryResult } from './useQueryResult';
 import _ from 'lodash';
 import { useStreamStore } from '@/pages/Stream/providers/StreamProvider';
+import { AxiosError } from 'axios';
 
 const { setData, setTotalCount } = logsStoreReducers;
 
@@ -40,7 +41,7 @@ export const useQueryLogs = () => {
 		},
 	});
 	const [currentStream] = useAppStore((store) => store.currentStream);
-	const [schema] = useStreamStore(store => store.schema)
+	const [schema] = useStreamStore((store) => store.schema);
 	const [
 		{
 			timeRange,
@@ -97,8 +98,10 @@ export const useQueryLogs = () => {
 				return setLogsStore((store) => setData(store, [], schema));
 			}
 			setError('Failed to query log');
-		} catch {
-			setError('Failed to query log');
+		} catch (e) {
+			const axiosError = e as AxiosError;
+			const errorMessage = axiosError?.response?.data;
+			setError(_.isString(errorMessage) && !_.isEmpty(errorMessage) ? errorMessage : 'Failed to query log');
 			return setLogsStore((store) => setData(store, [], schema));
 		} finally {
 			setLoading(false);

src/pages/Stream/Views/Explore/StaticLogTable.tsx

@@ -372,8 +372,7 @@ const LogTable = (props: { schemaLoading: boolean }) => {
 	}, [currentOffset]);
 
 	const [pageData] = useLogsStore((store) => store.tableOpts.pageData);
-	const [headers] = useLogsStore((store) => store.tableOpts.headers);
-	const hasContentLoaded = props.schemaLoading === false && logsLoading === false && headers.length !== 0;
+	const hasContentLoaded = props.schemaLoading === false && logsLoading === false;
 	const errorMessage = logsError;
 	const hasNoData = hasContentLoaded && !errorMessage && pageData.length === 0;
 	const showTable = hasContentLoaded && !hasNoData && !errorMessage;

src/pages/Stream/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Stack, rem } from '@mantine/core';
 import { useDocumentTitle } from '@mantine/hooks';
-import { FC, useEffect } from 'react';
+import { FC, useCallback, useEffect } from 'react';
 import StaticLogTable from './Views/Explore/StaticLogTable';
 import LiveLogTable from './Views/LiveTail/LiveLogTable';
 import ViewLog from './components/ViewLog';
@@ -15,9 +15,26 @@ import { PRIMARY_HEADER_HEIGHT, SECONDARY_SIDEBAR_WIDTH } from '@/constants/them
 import PrimaryToolbar from './components/PrimaryToolbar';
 import { useParams } from 'react-router-dom';
 import { STREAM_VIEWS } from '@/constants/routes';
+import { Text } from '@mantine/core';
+import { RetryBtn } from '@/components/Button/Retry';
 
 const { streamChangeCleanup } = streamStoreReducers;
 
+const SchemaErrorView = (props: { error: string; fetchSchema: () => void }) => {
+	return (
+		<Stack style={{ border: '1px solid', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
+			<Stack gap={0}>
+				<Text c="red.8" style={{ fontWeight: 400, textAlign: 'center' }}>
+					{props.error || 'Error'}
+				</Text>
+				<Box>
+					<RetryBtn onClick={props.fetchSchema} mt="md" />
+				</Box>
+			</Stack>
+		</Stack>
+	);
+};
+
 const Logs: FC = () => {
 	useDocumentTitle('Parseable | Stream');
 	const { view } = useParams();
@@ -26,10 +43,15 @@ const Logs: FC = () => {
 	const [sideBarOpen, setStreamStore] = useStreamStore((store) => store.sideBarOpen);
 
 	const { getDataSchema, loading, error } = useGetLogStreamSchema();
+
+	const fetchSchema = useCallback(() => {
+		setStreamStore(streamChangeCleanup);
+		getDataSchema();
+	}, []);
+
 	useEffect(() => {
 		if (!_.isEmpty(currentStream)) {
-			setStreamStore(streamChangeCleanup);
-			getDataSchema();
+			fetchSchema();
 		}
 	}, [currentStream]);
 
@@ -57,7 +79,11 @@ const Logs: FC = () => {
 				<PrimaryToolbar />
 				{view === 'explore' && <SecondaryToolbar />}
 				{view === 'explore' ? (
-					<StaticLogTable schemaLoading={isSchemaLoading} />
+					error ? (
+						<SchemaErrorView error={error} fetchSchema={fetchSchema} />
+					) : (
+						<StaticLogTable schemaLoading={isSchemaLoading} />
+					)
 				) : view === 'live-tail' ? (
 					<LiveLogTable />
 				) : (