added basic error handling

.env.development

@@ -1 +1 @@
-VITE_EO_SERVICES_URL=http://localhost:9000
+VITE_EO_SERVICES_URL=http://localhost:3000

src/ReferenceID.vue

@@ -1,31 +1,42 @@
 <script setup>
 import { ref } from 'vue'
+
 import ContactTable from './components/ContactTable.vue'
 import ContactsSummary from './components/ContactsSummary.vue';
+import Error from './components/Error.vue';
 
 const referenceId = ref('')
 const contactData = ref(null)
+const errorMessage = ref(null)
 
 function onInput(e) {
   referenceId.value = e.target.value
 }
 
-async function fetchData() {
+function fetchData() {
+  //clear errors
+  errorMessage.value = null
   contactData.value = null
-  const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
+  fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
       credentials: "include" // fetch won't send cookies unless you set credentials
-    })
-    contactData.value = await res.json()
-    console.log(contactData.value)
+    }).then (async response => {
+      const data = await response.json();
+
+      // check for error response
+      if (!response.ok) {
+        // get error message from body or default to response statusText
+        const error = data  || response.statusText;
+        return Promise.reject(error);
+      }
+    contactData.value = await data;
+    }).catch(error => {
+      errorMessage.value = error;
+    });
 }
 
 </script>
 <template>
   <div id="app">
-    <!-- <header>
-      <h1>Message Tracking Time</h1>
-    </header> -->
-
     <div>
       <label for="referenceId">Reference ID: </label>
       <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
@@ -35,8 +46,11 @@ async function fetchData() {
     <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
     <div v-else>No Contacts Found</div>
     <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
-    
+    <Error v-if="errorMessage" :errorMessage="errorMessage" />
+
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+
+</style>
 

src/components/Error.vue

@@ -0,0 +1,12 @@
+<script setup>
+
+// eslint-disable-next-line
+defineProps(["errorMessage"]);
+</script>
+<template>
+    <p v-if="errorMessage">Error: {{ errorMessage }}</p>
+</template>
+
+<style>
+
+</style>