Merge pull request #175 from htrc/error-messages

Error messages

Author: dkudeki

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.4] – 2025-05-19
+
+### Added
+- Dialog component that displays error messages to the user to explain why widgets aren't loading
+- Error message for loading a shared link to a dashbaord using private workset while unauthenticated
+- Error message for when the workset an authenticated user has been working on has been removed since they last logged in.
+- Error message when trying to load a workset where none of the HTIDs are in TORCHLITE
+- Error message for when Analytics Gateway is inaccessible
+
+### Fixed
+- Bug where logging out while viewing a private workset would try to load the same workset while unauthenticated. Now logouts redirect to the default URL.
+
 ## [0.2.3] – 2025-02-26
 
 ### Changed
@@ -48,7 +60,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - This CHANGELOG file.
 - Share button and popup [#61](https://github.com/htrc/torchlite-app/issues/61)
 
-[unreleased]: https://github.com/htrc/torchlite-frontend/compare/0.2.3...HEAD
+[unreleased]: https://github.com/htrc/torchlite-frontend/compare/0.2.4...HEAD
+[0.2.4]: https://github.com/htrc/torchlite-frontend/compare/0.2.3...0.2.4
 [0.2.3]: https://github.com/htrc/torchlite-frontend/compare/0.2.2...0.2.3
 [0.2.2]: https://github.com/htrc/torchlite-frontend/compare/0.2.1...0.2.2
 [0.2.1]: https://github.com/htrc/torchlite-frontend/compare/0.2.0...0.2.1

src/components/AlertDialog.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Dialog, Button, DialogActions, DialogContent, DialogContentText } from '@mui/material';
+
+interface CustomAlert {
+  message: string;
+}
+
+const AlertDialog = ({message}: CustomAlert) => {
+  const [open, setOpen] = useState<boolean>(true);
+
+  const handleClose = () => {
+    setOpen(false);
+  }
+
+  return (
+    <Dialog 
+      open={open} 
+      onClose={handleClose}
+    >
+      <DialogContent>
+        <DialogContentText>
+          {message}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>
+          OK
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default AlertDialog;

src/contexts/AppContext.tsx

@@ -1,13 +1,15 @@
 'use client';
 import { createContext, ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { NextApiResponse } from 'next';
 import qs from 'qs';
 
 // types
 import { DashboardContextProps, DashboardState, DashboardStatePatch, WorksetList } from 'types/torchlite';
 import { useSession } from 'next-auth/react';
 import { getAvailableDashboards, getAvailableWorksets, getDashboardState, updateDashboardState } from 'services';
 import CustomBackdrop from 'components/Backdrop';
+import AlertDialog from 'components/AlertDialog';
 
 // initial state
 const initialState: DashboardContextProps = {
@@ -32,6 +34,8 @@ function AppProvider({ children }: AppProviderProps) {
   const [widgetLoadingState, setWidgetLoadingState] = useState<any>({});
   const router = useRouter();
   const [loading, setLoading] = useState<boolean>(true);
+  const [errorAlert, setErrorAlert] = useState<boolean>(false);
+  const [errorText, setErrorText] = useState<string>("");
   const { data: session, status } = useSession();
 
   const initializeWidgetLoadingState = (dashboardWidgets: any) => {
@@ -68,16 +72,47 @@ function AppProvider({ children }: AppProviderProps) {
         let dashboardState: DashboardState;
         if (status === 'unauthenticated') {
           if (dashboardId) {
-            dashboardState = await getDashboardState(dashboardId);
+            try {
+              dashboardState = await getDashboardState(dashboardId);
+            } catch (err) {
+              console.error(`Error loading available dashboards while unauthenticated: ${err}`);
+              setErrorAlert(true);
+              setErrorText('The workset you are trying to access had been deleted or been made private. Contact the workset owner to check the workset status. Worksets must me public in order to have access to it in the dashboard.');
+              dashboardState = { id: (dashboardId ? dashboardId : ""), worksetId: "", filters: {}, widgets: [], isShared: true, importedId: "", worksetInfo: { id: "", name: "", author: "", isPublic: true, numVolumes: 0, volumes: []} }
+            }
           } else {
-            const dashboards = await getAvailableDashboards();
-            dashboardState = dashboards[0];
+            try {
+              const dashboards = await getAvailableDashboards();
+              dashboardState = dashboards[0];
+            } catch (err: any) {
+              console.error(`Error loading available worksets while unauthenticated: ${err}`);
+              setErrorAlert(true);
+              setErrorText('Worksets are currently unavailable, please try again later.')
+              dashboardState = { id: (dashboardId ? dashboardId : ""), worksetId: "", filters: {}, widgets: [], isShared: true, importedId: "", worksetInfo: { id: "", name: "", author: "", isPublic: true, numVolumes: 0, volumes: []} }
+            }
           }
 
           sessionStorage.setItem('dashboard_id', dashboardState.id);
         } else {
-          const dashboards = await getAvailableDashboards(dashboardId);
-          dashboardState = dashboards[0];
+          try {
+            const dashboards = await getAvailableDashboards(dashboardId);
+            dashboardState = dashboards[0];
+          } catch (err: any) {
+            console.error(`Error loading available dashboards while authenticated: ${err}`);
+            setErrorAlert(true);
+
+            if (err.status == 404) {
+              setErrorText('The workset you are trying to access had been deleted or been made private. Contact the workset owner to check the workset status. Worksets must be public in order to have access to it in the dashboard.');
+            } else if (err.status == 422) {
+              setErrorText('The selected workset contains invalid htids. The workset cannot be loaded into the dashboard. Please select a different workset. For more information about valid htids, review the documentation.')
+            } else if (err.status == 503) {
+              setErrorText('Worksets are currently unavailable, please try again later.');
+            } else {
+              setErrorText('Internal server error');
+            }
+
+            dashboardState = { id: (dashboardId ? dashboardId : ""), worksetId: "", filters: {}, widgets: [], isShared: true, importedId: "", worksetInfo: { id: "", name: "", author: "", isPublic: true, numVolumes: 0, volumes: []} }
+          }
 
           if (dashboardId) {
             sessionStorage.removeItem('dashboard_id');
@@ -99,10 +134,16 @@ function AppProvider({ children }: AppProviderProps) {
               }
             }
           }
-          await updateDashboardState(dashboardState.id, {
-            importedId: selectedWorksetId,
-            filters: appliedFilters
-          });
+          try {
+            await updateDashboardState(dashboardState.id, {
+              importedId: selectedWorksetId,
+              filters: appliedFilters
+            });
+          } catch (err) {
+            console.error(`Error loading workset from URL: ${err}`);
+            setErrorAlert(true);
+            setErrorText('This dashboard’s workset is private. Contact the workset’s owner to make the workset is public to see their dashboard.');
+          }
           dashboardState = await getDashboardState(dashboardState.id);
         } else {
           selectedWorksetId = dashboardState.importedId;
@@ -166,13 +207,16 @@ function AppProvider({ children }: AppProviderProps) {
   const onChangeDashboardState = async (newDashboardState: DashboardStatePatch) => {
     try {
       if (dashboardState) {
+        setErrorAlert(false);
         setLoading(true);
         await updateDashboardState(dashboardState.id, newDashboardState);
         const updatedState = await getDashboardState(dashboardState.id);
         setDashboardState(updatedState);
       }
     } catch (error) {
       console.error(error);
+      setErrorAlert(true);
+      setErrorText('The selected workset contains invalid htids. The workset cannot be loaded into the dashboard. Please select a different workset. For more information about valid htids, review the documentation.');
     } finally {
       setLoading(false);
     }
@@ -200,6 +244,11 @@ function AppProvider({ children }: AppProviderProps) {
       }}
     >
       <CustomBackdrop loading={loading} />
+      {!loading && errorAlert ? 
+        <AlertDialog 
+          message={errorText} 
+        /> : <></>
+      }
       {children}
     </AppContext.Provider>
   );

src/layout/MainLayout/Header/HeaderContent/Profile/index.tsx

@@ -41,12 +41,7 @@ const Profile = () => {
   const router = useRouter();
 
   const handleLogout = () => {
-    signOut({ redirect: true });
-
-    router.push({
-      pathname: APP_DEFAULT_PATH,
-      query: {}
-    });
+    signOut({ callbackUrl: APP_DEFAULT_PATH, redirect: true });
   };
 
   const anchorRef = useRef<any>(null);

src/pages/api/dashboards/[id]/index.ts

@@ -7,10 +7,12 @@ import { DashboardState, DashboardStatePatch, DashboardStatePatchSchema, Dashboa
 import { getSessionAuthInfo } from 'utils/database';
 import { isValidBody } from 'utils/helpers';
 
-async function getDashboard(dashboardId: string, headers: any): Promise<DashboardState> {
-  const dashboardSummary = await axios.get<DashboardSummary>(`/dashboards/${dashboardId}`, {
+async function getDashboard(dashboardId: string | null, headers: any): Promise<DashboardState> {
+  const request_url = `/dashboards/${dashboardId ? dashboardId : 'private'}`;
+  const dashboardSummary = await axios.get<DashboardSummary>(request_url, {
     headers: headers
   });
+
   const worksetInfo = await axios.get<WorksetInfo>(`/worksets/${dashboardSummary.importedId}/metadata`, {
     headers: headers
   });
@@ -43,7 +45,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     switch (req.method) {
       case 'GET':
-        const dashboardState = await getDashboard(dashboardId, headers);
+        const dashboardState = await getDashboard(session ? null : dashboardId, headers);
         res.status(200).json(dashboardState);
         break;
 
@@ -55,10 +57,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         break;
     }
   } catch (err: any) {
-    console.log(err);
+    console.error(`${req.method} /dashboards/${req.query.id}`);
+    console.error(err);
     if (err.status == 400) {
       res.status(400).end();
     }
+    else if (err.status == 404) {
+      res.status(404).end();
+    }
+    else if (err.status == 422) {
+      res.status(422).end();
+    }
     else {
       res.status(500).json({ message: 'Internal server error' });
     }

src/pages/api/dashboards/[id]/widgets/[type]/data.ts

@@ -29,6 +29,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     });
     res.status(200).json(widgetData);
   } catch (err) {
+    console.error(`${req.method} /dashboards/${req.query.id}/widgets/${req.query.type}/data`);
     console.error(err);
     res.status(500).json({ message: 'Internal server error' });
   }

src/pages/api/dashboards/index.ts

@@ -103,8 +103,20 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const dashboardState: DashboardState = { ...dashboardSummary, worksetInfo: worksetInfo };
     res.status(200).json([dashboardState]);
-  } catch (err) {
+  } catch (err: any) {
+    console.error(`${req.method} /dashboards/`);
     console.error(err);
-    res.status(500).json({ message: 'Internal server error' });
+    if (err.status == 404) {
+      res.status(404).end();
+    }
+    else if (err.status == 422) {
+      res.status(422).end();
+    }
+    else if (err.status == 503) {
+      res.status(503).end();
+    }
+    else {
+      res.status(500).json({ message: 'Internal server error' });
+    }
   }
 }

src/pages/api/worksets/index.ts

@@ -28,6 +28,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     });
     res.status(200).json(worksets);
   } catch (err) {
+    console.error(`${req.method} /worksets/`);
     console.error(err);
     res.status(500).json({ message: 'Internal server error' });
   }