Add some crude error display stuff

3 files changed, 26 insertions, 7 deletions

diff --git a/frontend/components/Marquees/Marquee.module.css b/frontend/components/Marquees/Marquee.module.css
index 0fb8ece..40763f3 100644
--- a/frontend/components/Marquees/Marquee.module.css
+++ b/frontend/components/Marquees/Marquee.module.css
@@ -2,8 +2,6 @@
   height: 100vh;
   overflow: hidden;
   position: relative;
-  background: #fefefe;
-  color: #333;
   z-index: 10;
 }
 
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 6193488..633269f 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -9,6 +9,7 @@ const socket = io(config.backendUrl);
 
 const Home = (): ReactElement => {
     const [value, setValue] = useState<number | undefined>(undefined);
+    const [error, setError] = useState<string>("");
     const [papers, setPapers] = useState<MarqueeLink[]>([]);
 
     useEffect(() => {
@@ -16,7 +17,9 @@ const Home = (): ReactElement => {
             console.log("connected:", socket.id);
         });
         socket.on("disconnect", (reason: string) => {
-            console.log("disconnected, reason:", reason);
+            const err = `disconnected, reason: ${reason}`;
+            console.error(err);
+            setError(err);
         });
         socket.on("update", (arg: number) => {
             setValue(arg);
@@ -25,10 +28,14 @@ const Home = (): ReactElement => {
 
     useEffect(() => {
         async function fetchPapers() {
-            const resp = await fetch(`${config.backendUrl}/api/papers`);
-            const data = await resp.json();
-
-            setPapers(data);
+            try {
+                const resp = await fetch(`${config.backendUrl}/api/papers`);
+                const data = await resp.json();
+                setPapers(data);
+            } catch (err) {
+                console.error(err);
+                setError(String(err));
+            }
         }
         fetchPapers();
     }, []);
@@ -56,6 +63,7 @@ const Home = (): ReactElement => {
                     <img src="/tomi_sq.png" alt="" />
                 </div>
             </button>
+            <div id={styles.errorContainer}>{error}</div>
             <Marquees links={papers} />
         </div>
     );
diff --git a/frontend/styles/Home.module.css b/frontend/styles/Home.module.css
index 814ebba..b4a553f 100644
--- a/frontend/styles/Home.module.css
+++ b/frontend/styles/Home.module.css
@@ -41,3 +41,16 @@
   font-size: 175%;
   text-align: center;
 }
+
+#errorContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  z-index: 15;
+  color: red;
+}
\ No newline at end of file