Improve running dashboard error handling

server/index.js

@@ -15,6 +15,18 @@ const HUB_DATASET_FILE = process.env.HF_DATASET_FILE || 'runs.json';
 
 app.use(express.json({ limit: '1mb' }));
 
+function getErrorStatus(error) {
+  const status = error?.statusCode || error?.status;
+  return Number.isInteger(status) && status >= 400 && status < 600 ? status : 500;
+}
+
+function getErrorMessage(error) {
+  if (error && typeof error.message === 'string' && error.message.trim()) {
+    return error.message.trim();
+  }
+  return 'Internal server error';
+}
+
 function sortRunsByDateDesc(runs) {
   return [...runs].sort((a, b) => {
     const byDate = (b?.date || '').localeCompare(a?.date || '');
@@ -208,7 +220,7 @@ if (process.env.NODE_ENV === 'production') {
 app.use((error, _req, res, _next) => {
   // eslint-disable-next-line no-console
   console.error(error);
-  res.status(500).json({ error: 'Internal server error' });
+  res.status(getErrorStatus(error)).json({ error: getErrorMessage(error) });
 });
 
 app.listen(PORT, () => {

src/App.js

@@ -11,6 +11,13 @@ import Charts from './components/Charts';
 import RunLog from './components/RunLog';
 import './App.css';
 
+function getUserMessage(error, fallback) {
+  if (error instanceof Error && error.message.trim()) {
+    return error.message.trim();
+  }
+  return fallback;
+}
+
 function App() {
   const [runs, setRuns] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -26,9 +33,9 @@ function App() {
           setRuns(Array.isArray(loaded) ? loaded : []);
           setSyncError('');
         }
-      } catch {
+      } catch (error) {
         if (active) {
-          setSyncError('Could not load shared run data.');
+          setSyncError(`Load failed: ${getUserMessage(error, 'Could not load shared run data.')}`);
         }
       } finally {
         if (active) setIsLoading(false);
@@ -71,8 +78,10 @@ function App() {
       const created = await createRun(runWithId);
       setRuns((prev) => [created, ...prev.filter((run) => run.id !== created.id)]);
       setSyncError('');
-    } catch {
-      setSyncError('Could not save run.');
+      return true;
+    } catch (error) {
+      setSyncError(`Save failed: ${getUserMessage(error, 'Could not save run.')}`);
+      return false;
     }
   }
 
@@ -83,8 +92,10 @@ function App() {
         prev.map((r) => (r.id === id ? updated : r))
       );
       setSyncError('');
-    } catch {
-      setSyncError('Could not update run.');
+      return true;
+    } catch (error) {
+      setSyncError(`Update failed: ${getUserMessage(error, 'Could not update run.')}`);
+      return false;
     }
   }
 
@@ -93,8 +104,10 @@ function App() {
       await deleteRun(id);
       setRuns((prev) => prev.filter((r) => r.id !== id));
       setSyncError('');
-    } catch {
-      setSyncError('Could not delete run.');
+      return true;
+    } catch (error) {
+      setSyncError(`Delete failed: ${getUserMessage(error, 'Could not delete run.')}`);
+      return false;
     }
   }
 

src/components/RunForm.js

@@ -31,7 +31,7 @@ function RunForm({ onAddRun }) {
     Object.fromEntries(INJURY_LOCATIONS.map((loc) => [loc.key, { enabled: false, during: '', after: '' }]))
   );
 
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
     const dist = parseFloat(distance);
     const mins = parseFloat(time);
@@ -54,7 +54,8 @@ function RunForm({ onAddRun }) {
       }
     }
 
-    onAddRun(runData);
+    const saved = await onAddRun(runData);
+    if (!saved) return;
 
     setDistance('');
     setTime('');

src/components/RunLog.js

@@ -76,7 +76,7 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
     }));
   }
 
-  function handleSave() {
+  async function handleSave() {
     const dist = parseFloat(editForm.distance_km);
     const mins = parseFloat(editForm.time_minutes);
     const cadence = editForm.cadence_spm === '' ? null : parseInt(editForm.cadence_spm, 10);
@@ -117,17 +117,19 @@ function RunLog({ runs, onEditRun, onDeleteRun }) {
       }
     }
 
-    onEditRun(editingId, updated);
-    setEditingId(null);
+    const saved = await onEditRun(editingId, updated);
+    if (saved) {
+      setEditingId(null);
+    }
   }
 
   function handleCancel() {
     setEditingId(null);
   }
 
-  function handleDelete(id) {
+  async function handleDelete(id) {
     if (window.confirm('Delete this run?')) {
-      onDeleteRun(id);
+      await onDeleteRun(id);
     }
   }
 

src/utils/storage.js

@@ -8,7 +8,26 @@ async function request(path, options = {}) {
   });
 
   if (!response.ok) {
-    throw new Error(`API ${response.status}: ${response.statusText}`);
+    let message = `API ${response.status}: ${response.statusText}`;
+    const contentType = response.headers.get('content-type') || '';
+
+    try {
+      if (contentType.includes('application/json')) {
+        const payload = await response.json();
+        if (payload && typeof payload.error === 'string' && payload.error.trim()) {
+          message = payload.error.trim();
+        }
+      } else {
+        const text = await response.text();
+        if (text.trim()) {
+          message = text.trim();
+        }
+      }
+    } catch {
+      // Fall back to the HTTP status message when the error body is unreadable.
+    }
+
+    throw new Error(message);
   }
 
   if (response.status === 204) return null;