Show errors in UI

.eslintrc

@@ -8,7 +8,7 @@
         "mocha": true
     },
     "parserOptions": {
-        "ecmaVersion": 2018
+        "ecmaVersion": 2020
     },
     "globals": {
         "SELECT": true,

data-viewer/app/viewer/app.js

@@ -14,6 +14,7 @@ const vue = new Vue ({
   el:'#app',
 
   data: {
+    error: undefined,
     dataSource: storageGet('data-source', 'db'),
     skip: storageGet('skip', 0),
     top: storageGet('top', 20),
@@ -61,19 +62,30 @@ const vue = new Vue ({
     async fetchData () {
       let url = `/Data?entity=${vue.entity.name}&$skip=${vue.skip}&$top=${vue.top}`
       if (vue.dataSource === 'db')  url += `&dataSource=db`
-      const {data} = await GET(url)
 
-      // sort data along column order
-      const columnIndexes = {}
-      vue.columns.forEach((col, i) => columnIndexes[col.name] = i)
-      vue.data = data.value.map(d => d.record
-        .sort((r1, r2) => columnIndexes[r1.column] - columnIndexes[r2.column])
-        .map(r => r.data)
-      )
+      try {
+        const {data} = await GET(url)
+        // sort data along column order
+        const columnIndexes = {}
+        vue.columns.forEach((col, i) => columnIndexes[col.name] = i)
+        vue.data = data.value.map(d => d.record
+          .sort((r1, r2) => columnIndexes[r1.column] - columnIndexes[r2.column])
+          .map(r => r.data)
+        )
+        const row = vue.data.find(data => vue._makeRowKey(data) === vue.rowKey)
+        if (row)  vue._setRowDetails(row)
+        else vue.rowDetails = {}
+        vue.error = undefined
+      } catch (err) {
+        if (err.response?.data?.error) {
+          vue.error = err.response?.data?.error
+        } else {
+          vue.error = err
+        }
+        vue.data = []
+        vue.rowDetails = {}
+      }
 
-      const row = vue.data.find(data => vue._makeRowKey(data) === vue.rowKey)
-      if (row)  vue._setRowDetails(row)
-      else vue.rowDetails = {}
     },
 
     inspectRow (eve) {

data-viewer/app/viewer/index.html

@@ -25,6 +25,7 @@
     .not-sidebar-sub {  max-height: 40vh; overflow-y: scroll; }
     .horizontal label { display: inline; }
     .horizontal input { width: initial; display: inline; }
+    .error { color: red; }
   </style>
 </head>
 
@@ -61,7 +62,7 @@
         <label for="top">Top:</label>
         <input id="top" v-model.lazy="top" title="No. of entries to read" type="number" min="0">
       </div>
-      <div v-if="entity" class="not-sidebar-main">
+      <div v-if="data" class="not-sidebar-main">
         <table id='data' class="hovering striped-table condensed">
           <thead>
             <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
@@ -71,6 +72,9 @@
           </tr>
         </table>
       </div>
+      <div v-if="error" class="not-sidebar-main error">
+        Error: {{ error.code }} &ndash; {{ error.message }}
+      </div>
       <p></p>
       <div v-if="rowDetails"  class="not-sidebar-sub">
         <table id='rowDetails'>