Fix #623 Add global error handling toaster

discojs/discojs-core/src/client/event_connection.ts

@@ -127,7 +127,7 @@ export class WebSocketServer implements EventConnection {
 
     return await new Promise((resolve, reject) => {
       ws.onerror = (err: isomorphic.ErrorEvent) =>
-        reject(new Error(`connecting server: ${err.message}`)) // eslint-disable-line @typescript-eslint/restrict-template-expressions
+        reject(new Error(`Server unreachable: ${err.message}`)) // eslint-disable-line @typescript-eslint/restrict-template-expressions
       ws.onopen = () => resolve(server)
     })
   }

web-client/src/main.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import VueApexCharts from 'vue3-apexcharts'
-import Toaster from '@meforma/vue-toaster'
+import { createToaster, Toaster } from '@meforma/vue-toaster'
 
 import App from '@/components/App.vue'
 import { router } from '@/router'
@@ -18,6 +18,22 @@ tf.ready()
 
 // create vue app
 const app = createApp(App)
+
+// Global error handler
+app.config.errorHandler = (err, instance, info) => {
+  if (err instanceof TypeError) {
+    // Implementation bug
+    const toaster = createToaster({ duration: 5000 })
+    toaster.error('Sorry, something went wrong on our side. Please reach out on slack.')
+    console.error(err, instance, info)
+  } else {
+    // Unknown error
+    const toaster = createToaster({ duration: 5000 })
+    toaster.error('Something went wrong. Please try again later or reach out on slack.')
+    console.error(err, instance, info)
+  }
+}
+
 const pinia = createPinia()
 const i18n = createCustomI18n()
 app

web-client/src/store/tasks.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { shallowRef } from 'vue'
 import { Map } from 'immutable'
-
+import { useToaster } from '@/composables/toaster'
 import { TaskID, Task, fetchTasks } from '@epfml/discojs'
 
 import { CONFIG } from '@/config'
@@ -22,10 +22,10 @@ export const useTasksStore = defineStore('tasks', () => {
       const tasks = await fetchTasks(CONFIG.serverUrl)
       tasks.forEach(addTask)
     } catch (e) {
-      console.error(
-        'Fetching of tasks failed with error',
-        e instanceof Error ? e.message : e.toString()
-      )
+      console.error('Fetching of tasks failed with error',
+        e instanceof Error ? e.message : e.toString())
+      const toaster = useToaster()
+      toaster.error('The server is unreachable. \n Please try again later or reach out on slack.')
     }
   }