Automatically reconnect EventSource on disconnect

src/App.vue

@@ -8,6 +8,13 @@
       <code>saltutil.find_job</code>
       jobs <input type="checkbox" v-model="hideFindJob"
     /></label>
+    {{
+      !evtSource || evtSource.readyState == evtSource.CLOSED
+        ? 'Disconnected'
+        : evtSource.readyState == evtSource.OPEN
+        ? 'Connected'
+        : 'Connecting'
+    }}
     <Job
       v-for="(jobEvents, jid) in jobs"
       :key="jid"
@@ -36,6 +43,7 @@ export default class App extends Vue {
   jobs: { [key: string]: salt.JobEvent[] } = {};
   showRawEvents: boolean = false;
   hideFindJob: boolean = true;
+  evtSourceTimeout: number | null = null;
 
   mounted(): void {
     fetch(BASE_URL + 'login', {
@@ -44,9 +52,22 @@ export default class App extends Vue {
       body: JSON.stringify(credentials),
     })
       .then(r => r.json())
-      .then(r => {
-        const token: string = r.return[0].token;
+      .then(r => this.connectEventSource(r.return[0].token));
+  }
+
+  connectEventSource(token: string): void {
+    if (this.evtSourceTimeout) {
+      this.evtSourceTimeout = null;
+    }
+
+    console.info('Connecting to eventSource.');
     this.evtSource = new EventSource(BASE_URL + 'events?token=' + token);
+
+    this.evtSource.onopen = e => {
+      console.info('Connected to eventSource.');
+      this.$forceUpdate(); // evtSource.readyState won't be detected otherwise
+    };
+
     this.evtSource.onmessage = e => {
       const event = JSON.parse(e.data);
       event.splitTag = event.tag.split('/');
@@ -58,7 +79,20 @@ export default class App extends Vue {
         this.jobs[event.data.jid].push(event);
       }
     };
-      });
+
+    this.evtSource.onerror = e => {
+      if (!this.evtSourceTimeout) {
+        console.info('Lost eventSource, reconnecting');
+        console.info(e);
+        this.$forceUpdate(); // evtSource.readyState won't be detected otherwise
+        this.evtSource.close();
+        this.evtSourceTimeout = window.setTimeout(
+          this.connectEventSource,
+          1000,
+          token
+        );
+      }
+    };
   }
 
   isEventType<T extends salt.SaltEvent['splitTag'][1]>(