Error handling

src/modules/usenet/UsenetHistoryList.tsx

@@ -1,4 +1,17 @@
-import { Center, Pagination, Skeleton, Table, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Alert,
+  Center,
+  Code,
+  Group,
+  Pagination,
+  Skeleton,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons';
+import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { FunctionComponent, useState } from 'react';
@@ -16,7 +29,7 @@ const PAGE_SIZE = 10;
 export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
   const [page, setPage] = useState(1);
 
-  const { data, isLoading } = useGetUsenetHistory({
+  const { data, isLoading, isError, error } = useGetUsenetHistory({
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
     serviceId,
@@ -33,10 +46,23 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
     );
   }
 
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
+          Some error has occured while fetching data:
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Title order={3}>Queue is empty</Title>
+        <Title order={3}>History is empty</Title>
       </Center>
     );
   }

src/modules/usenet/UsenetQueueList.tsx

@@ -1,5 +1,8 @@
 import {
+  Alert,
   Center,
+  Code,
+  Group,
   Progress,
   Skeleton,
   Table,
@@ -8,7 +11,8 @@ import {
   Tooltip,
   useMantineTheme,
 } from '@mantine/core';
-import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { FunctionComponent, useState } from 'react';
@@ -26,7 +30,7 @@ const PAGE_SIZE = 10;
 export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ serviceId }) => {
   const theme = useMantineTheme();
   const [page, setPage] = useState(1);
-  const { data, isLoading } = useGetUsenetDownloads({
+  const { data, isLoading, isError, error } = useGetUsenetDownloads({
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
     serviceId,
@@ -42,6 +46,19 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ servi
     );
   }
 
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
+          Some error has occured while fetching data:
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>

src/pages/api/modules/usenet/history.ts

@@ -36,6 +36,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
     if (!service.apiKey) {
       throw new Error(`API Key for service "${service.name}" is missing`);
     }
+
     const history = await new Client(service.url, service.apiKey).history(offset, limit);
 
     const items: UsenetHistoryItem[] = history.slots.map((slot) => ({
@@ -51,7 +52,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
     return res.status(200).json(response);
   } catch (err) {
-    return res.status(401).json(err);
+    return res.status(500).send((err as any).message);
   }
 }
 

src/pages/api/modules/usenet/index.ts

@@ -63,7 +63,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
     return res.status(200).json(response);
   } catch (err) {
-    return res.status(401).json(err);
+    return res.status(500).send((err as any).message);
   }
 }
 

src/tools/hooks/api.ts

@@ -18,6 +18,7 @@ export const useGetUsenetDownloads = (params: UsenetQueueRequestParams) =>
     {
       refetchInterval: 1000,
       keepPreviousData: true,
+      retry: 2,
     }
   );
 
@@ -33,5 +34,6 @@ export const useGetUsenetHistory = (params: UsenetHistoryRequestParams) =>
     {
       refetchInterval: 1000,
       keepPreviousData: true,
+      retry: 2,
     }
   );