diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js index 2458c53..66d9841 100644 --- a/webclient/src/Feed.js +++ b/webclient/src/Feed.js @@ -6,7 +6,7 @@ import { sourceLink, infoLine, logos } from './utils.js'; function Feed({ updateCache }) { const [stories, setStories] = useState(() => JSON.parse(localStorage.getItem('stories')) || false); - const [error, setError] = useState(false); + const [error, setError] = useState(''); useEffect(() => { fetch('/api') @@ -48,12 +48,15 @@ function Feed({ updateCache }) { } currentStories.unshift(newStory); } catch (error) { + let errorMessage; if (error.name === 'AbortError') { + errorMessage = `The request to fetch story '${newStory.title}' (${newStory.id}) timed out after 10 seconds. Your connection may be unstable.`; console.log('Fetch timed out for story:', newStory.id); } else { + errorMessage = `An error occurred while fetching story '${newStory.title}' (${newStory.id}): ${error.toString()}`; console.log('Fetch failed for story:', newStory.id, error); } - setError(true); + setError(errorMessage); break; } } @@ -69,7 +72,8 @@ function Feed({ updateCache }) { setStories(finalStories); }, (error) => { - setError(true); + const errorMessage = `Failed to fetch the main story list from the API. Your connection may be down or the server might be experiencing issues. Error: ${error.toString()}`; + setError(errorMessage); } ); }, [updateCache]);