feat: add basic form error handling

Author: serhalp

app/app.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const runs = ref([]);
+const error = ref(null);
 
 const handleRequestFormSubmit = async ({ url }): void => {
   if (!url.startsWith("http")) {
@@ -19,9 +20,13 @@ const handleRequestFormSubmit = async ({ url }): void => {
       cacheHeaders: getCacheHeaders(responseBody.headers),
       durationInMs: responseBody.durationInMs,
     });
+
+    error.value = null;
   } catch (err) {
-    // TODO(serhalp) Proper error handling. ErrorBoundary?
-    console.error("Error fetching URL", err);
+    error.value =
+      err?.data?.message ??
+      err?.toString?.() ??
+      new Error(`Fetch error: ${err}`);
     return;
   }
 };
@@ -45,6 +50,10 @@ const handleClickClear = (): void => {
   <main>
     <RequestForm @submit="handleRequestFormSubmit" />
 
+    <div v-if="error" class="error">
+      {{ error }}
+    </div>
+
     <div class="flex-btwn run-panels">
       <RunPanel v-for="run in runs" v-bind="run" />
     </div>
@@ -76,6 +85,10 @@ main {
   padding-bottom: 3em;
 }
 
+.error {
+  color: var(--red-400);
+}
+
 .run-panels {
   flex-wrap: wrap;
   align-items: stretch;