From 62d59151333991f48c4c4e6570454da1e5dc9298 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Fri, 21 Nov 2025 22:34:24 +0000
Subject: [PATCH] feat: Add detailed, expandable error messages to Article
 component

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 webclient/src/Article.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/webclient/src/Article.js b/webclient/src/Article.js
index 007acd6..34e8bd6 100644
--- a/webclient/src/Article.js
+++ b/webclient/src/Article.js
@@ -10,7 +10,7 @@ function Article({ cache }) {
 	if (id in cache) console.log('cache hit');
 
 	const [story, setStory] = useState(cache[id] || false);
-	const [error, setError] = useState(false);
+	const [error, setError] = useState('');
 	const [pConv, setPConv] = useState([]);
 
 	useEffect(() => {
@@ -24,14 +24,20 @@ function Article({ cache }) {
 			);
 
 		fetch('/api/' + id)
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) {
+					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+				}
+				return res.json();
+			})
 			.then(
 				(result) => {
 					setStory(result.story);
 					localForage.setItem(id, result.story);
 				},
 				(error) => {
-					setError(true);
+					const errorMessage = `Failed to fetch article content (ID: ${id}). Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
+					setError(errorMessage);
 				}
 			);
 	}, [id]);
@@ -51,7 +57,12 @@ function Article({ cache }) {
 
 	return (
 		<div className='article-container'>
-			{error && <p>Connection error?</p>}
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+				</details>
+			}
 			{story ?
 				<div className='article'>
 					<Helmet>