fix: better handle network related errors

Signed-off-by: Craig Bassett <[email protected]>

src/App.vue

@@ -32,19 +32,18 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
-import EventBus from '@/eventBus'
+import { EventBus, FlashMessage } from '@/eventBus'
 import StateMixin from './mixins/state'
 import { Waits } from './globals'
-import { FlashMessage as FlashMessageType } from '@/types'
 
 @Component({})
 export default class App extends Mixins(StateMixin) {
   drawer = false
   showUpdateUI = false
 
-  flashMessage: FlashMessageType = {
+  flashMessage: FlashMessage = {
     open: false,
-    text: '',
+    text: undefined,
     type: undefined
   }
 
@@ -126,7 +125,7 @@ export default class App extends Mixins(StateMixin) {
 
   mounted () {
     // this.onLoadLocale(this.$i18n.locale)
-    EventBus.$on('flashMessage', (payload: FlashMessageType) => {
+    EventBus.bus.$on('flashMessage', (payload: FlashMessage) => {
       this.flashMessage.text = (payload && payload.text) || undefined
       this.flashMessage.type = (payload && payload.type) || undefined
       this.flashMessage.timeout = (payload && payload.timeout !== undefined) ? payload.timeout : undefined

src/components/common/FlashMessage.vue

@@ -3,14 +3,16 @@
     v-model="open"
     :color="type"
     :timeout="timeout"
+    elevation="24"
+    multi-line
     top
+    centered
   >
-    {{ text }}
+    <span v-html="text"></span>
 
     <template v-slot:action="{ attrs }">
       <app-btn
         dark
-        text
         v-bind="attrs"
         @click="open = false"
       >
@@ -29,13 +31,13 @@ export default class FlashMessage extends Vue {
   @Prop({ type: Boolean })
   value!: boolean;
 
-  @Prop({ type: String, default: 'success' })
+  @Prop({ type: String, default: 'dark' })
   type!: string;
 
-  @Prop({ type: String, required: true })
+  @Prop({ type: String, default: 'Saved!' })
   text!: string;
 
-  @Prop({ type: Number, default: 3000 })
+  @Prop({ type: Number, default: 1500 })
   timeout!: number;
 
   get open () {
@@ -47,3 +49,10 @@ export default class FlashMessage extends Vue {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+  ::v-deep .v-snack__wrapper .v-snack__content {
+    overflow: hidden;
+    overflow-wrap: break-word;
+  }
+</style>

src/eventBus.ts

@@ -1,2 +1,30 @@
 import Vue from 'vue'
-export default new Vue()
+
+export const EventBus = {
+  bus: new Vue(),
+  $emit: (text?: string, type?: FlashMessageTypes, timeout?: number): void => {
+    const opts: FlashMessage = {
+      open: true
+    }
+    if (text) opts.text = text
+    if (type) opts.type = type
+    if (timeout) opts.timeout = timeout
+
+    EventBus.bus.$emit('flashMessage', opts) // custom message
+  }
+}
+
+export interface FlashMessage {
+  type?: FlashMessageTypes;
+  open: boolean;
+  text?: string;
+  timeout?: number;
+}
+
+export enum FlashMessageTypes {
+  success = 'success',
+  error = 'error',
+  warning = 'warning',
+  primary = 'primary',
+  secondary = 'secondary'
+}

src/mixins/files.ts

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
 import { getThumb } from '@/store/helpers'
 import { AxiosRequestConfig } from 'axios'
-import EventBus from '@/eventBus'
+// import { EventBus, FlashMessageTypes } from '@/eventBus'
 
 @Component
 export default class FilesMixin extends Vue {
@@ -72,10 +72,15 @@ export default class FilesMixin extends Vue {
       encodeURI(this.apiUrl + '/server/files/' + filepath + '?date=' + new Date().getTime()),
       o
     )
-      .then((response) => {
-        this.$store.dispatch('files/removeFileDownload')
+      .then(response => {
         return response
       })
+      .catch(e => {
+        return e
+      })
+      .finally(() => {
+        this.$store.dispatch('files/removeFileDownload')
+      })
   }
 
   /**
@@ -155,9 +160,14 @@ export default class FilesMixin extends Vue {
         }
       )
       .then((response) => {
-        this.$store.dispatch('files/removeFileUpload', filepath)
         return response
       })
+      .catch(e => {
+        return e
+      })
+      .finally(() => {
+        this.$store.dispatch('files/removeFileUpload', filepath)
+      })
   }
 
   // Upload some files.
@@ -186,7 +196,8 @@ export default class FilesMixin extends Vue {
       try {
         await this.uploadFile(file, path, root, andPrint)
       } catch (e) {
-        EventBus.$emit('flashMessage', { type: 'error', text: `Error uploading ${file.name}<br />${e}` })
+        return e
+        // EventBus.$emit('flashMessage', { type: 'error', text: `Error uploading ${file.name}<br />${e}` })
       }
     }
   }

src/plugins/axios.ts

@@ -1,8 +1,45 @@
 import _Vue from 'vue'
-import Axios, { AxiosStatic } from 'axios'
+import Axios, { AxiosResponse, AxiosStatic } from 'axios'
+import { EventBus, FlashMessageTypes } from '@/eventBus'
 
 export function AxiosPlugin<AxiosPlugOptions> (Vue: typeof _Vue): void {
-  // do stuff with options
+  const responseInterceptor = (response: AxiosResponse) => {
+    switch (response.status) {
+      case 200:
+        // Works!
+        break
+      default:
+    }
+    return response
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  const errorInterceptor = (error: any) => {
+    // Check if its a network / server error.
+    if (!error.response) {
+      // Network / Server Error.
+      console.error('Network error')
+      return Promise.reject(error)
+    }
+
+    // All other errors
+    let message: string | undefined
+    if (error.response.data) message = error.response.data
+    switch (error.response.status) {
+      case 400:
+        console.error(error.response.status, error.message, message)
+        EventBus.$emit(message || 'Server error', FlashMessageTypes.error, 5000)
+        break
+      default:
+        console.error(error.response.status, error.message)
+        EventBus.$emit(message || 'Server error', FlashMessageTypes.error, -1)
+    }
+
+    return Promise.reject(error)
+  }
+
+  Axios.interceptors.response.use(responseInterceptor, errorInterceptor)
+
   Vue.prototype.$http = Axios
   Vue.$http = Axios
 }

src/store/socket/actions.ts

@@ -5,7 +5,7 @@ import { SocketState } from './types'
 import { RootState } from '../types'
 import { Globals } from '@/globals'
 import { SocketActions } from '@/socketActions'
-import EventBus from '@/eventBus'
+import { EventBus, FlashMessageTypes } from '@/eventBus'
 
 let retryTimeout: number
 
@@ -82,7 +82,7 @@ export const actions: ActionTree<SocketState, RootState> = {
         message = payload.message
       }
 
-      EventBus.$emit('flashMessage', { type: 'error', text: message })
+      EventBus.$emit(message, FlashMessageTypes.error, 5000)
     }
     if (payload.code === 503) {
       // This indicates klippy is non-responsive, or there's a configuration error