Improve error handling, backend isn't providing correct data

src/lib/ldb/staff/staff-ldb.svelte

@@ -5,12 +5,14 @@
   import { detailInit, defineDetail } from './train-detail';
   import TrainDetail from './train-detail.svelte';
   import { fetchStaffLdb } from './fetch';
+  import { error } from '@sveltejs/kit';
 
   export let station: string;
   export let title: string | undefined = 'Loading...';
-  export let error = {
+
-    state: false,
+  let errorDetail = {
-    name: 'none'
+    code: '',
+    message: '',
   };
 
   let detail = detailInit();
@@ -29,6 +31,8 @@
       title = data.data.locationName;
       return data.data;
     }
+    errorDetail.code = data.obStatus.toString() || "UNKNOWN";
+    errorDetail.message = data.obMsg || "An unknown error occoured";
     throw new Error('Unable to Fetch Data');
   }
 </script>
@@ -59,11 +63,17 @@
     {/if}
   {/if}
 {:catch}
-  Error Loading Data
+  <h2>Error</h2>
+  <p>ERR-CODE: {errorDetail.code}</p>
+  <p>Message:<br>{errorDetail.message}</p>
 {/await}
 
-{#if error.state}
+<style>
-  {#if error.name === 'unauthorized'}
+  .transport-mode {
-    <p>Error: {error.name.toLocaleUpperCase()}</p>
+    padding-top: 20px;
-  {/if}
+    height: 17px;
-{/if}
+  }
+  .table-head-text {
+    color: white;
+  }
+</style>

src/lib/ldb/staff/train-detail.ts

@@ -1,3 +1,4 @@
+// Contains the details required to lookup train details
 export interface Detail {
   show: boolean;
   headcode: string;
@@ -5,6 +6,7 @@ export interface Detail {
   uid: string;
 }
 
+// Initiates/Resets a `Detail` interface
 export function detailInit(): Detail {
   const detail: Detail = {
     show: false,
@@ -15,6 +17,7 @@ export function detailInit(): Detail {
   return detail;
 }
 
+// Initiates/Updates a `Detail` interface using the given values
 export function defineDetail(rid: string, uid: string, tid: string) {
   const detail: Detail = {
     rid: rid,