feat(extension): better error handling

extension/src/ash.css

@@ -239,3 +239,16 @@ tr.code-bad {
 td.code-bad {
     text-decoration: line-through;
 }
+
+.error {
+    display: flex;
+    align-items: center;
+    gap: .5em;
+}
+
+.error::before {
+    content: "! ";
+    color: red;
+    font-weight: 900;
+    font-size: 2em;
+}

extension/src/background.js

@@ -56,7 +56,7 @@ function interceptSubmit(details) {
             code: activity.code,
             success: codeCorrect,
         }),
-    }).then(res => console.log('submitted code: ', res)).error(e => console.error('failed to submit code', e));
+    }).then(res => console.log('submitted code: ', res)).catch(e => console.error('failed to submit code', e));
 }
 
 function interceptCode(details) {

extension/src/popup.js

@@ -44,14 +44,34 @@
         return root;
     }
 
-    const res = await fetch(SERVER_URL + '/api/codes');
+    function message(message, error = false) {
+        const ele = document.createElement('p');
+        if (error) {
+            ele.classList.add('error');
+            const s = document.createElement('span');
+            s.innerText = message;
+            ele.appendChild(s);
+        } else {
+            ele.innerText = message;
+        }
+        root.appendChild(ele);
+    }
+
+    const res = await fetch(SERVER_URL + '/api/codes').catch((e) => {
+        message(`Something went wrong: ` + e);
+        console.error(e);
+    });
     if (!res.ok) {
-        // TODO: Handle error
+        message('Server returned error code ' + res.status + ': ' + res.statusText, true);
         return;
     }
     const { activities } = await res.json();
-    activities.sort(activity => activity.time);
-    for (const activity of activities) {
-        root.appendChild(activityEle(activity));
+    if (activities.length === 0) {
+        message('No codes are available right now :/');
+    } else {
+        activities.sort(activity => activity.time);
+        for (const activity of activities) {
+            root.appendChild(activityEle(activity));
+        }
     }
 })();