Fault tolerance

package.json

@@ -44,7 +44,10 @@
     "moment-timezone": "^0.5.26",
     "node-sass": "^4.13.1",
     "portal-gun": "git://github.com/claydotio/portal-gun.git",
+    "promise-retry": "^1.1.1",
+    "queued-socket.io": "^1.0.5",
     "sass-loader": "^7.1.0",
+    "socket.io-client": "^2.3.0",
     "style-resources-loader": "^1.2.1",
     "typeface-work-sans": "0.0.72",
     "validator": "^6.3.0",

src/components/App/index.vue

@@ -20,8 +20,6 @@
 <script>
 import { mapState, mapGetters } from "vuex";
 
-import SessionService from "@/services/SessionService";
-
 import "@/scss/main.scss";
 import AppHeader from "./AppHeader";
 import AppSidebar from "./AppSidebar";
@@ -179,9 +177,6 @@ export default {
   },
   sockets: {
     "session-change"(sessionData) {
-      SessionService.currentSession.sessionId = sessionData._id;
-      SessionService.currentSession.data = sessionData;
-
       this.$store.dispatch("user/updateSession", sessionData);
     }
   }

src/main.js

@@ -8,7 +8,7 @@ import vSelect from "vue-select";
 import VuePhoneNumberInput from "vue-phone-number-input";
 import VueStarRating from "vue-star-rating";
 
-import Socket from "socket.io-client";
+import Socket from "queued-socket.io";
 import moment from "moment";
 
 import App from "./components/App";
@@ -20,11 +20,13 @@ import store from "./store";
 Vue.config.productionTip = false;
 
 // Set up SocketIO
-const socket = Socket(process.env.VUE_APP_SOCKET_ADDRESS, {
+const socket = Socket.connect(process.env.VUE_APP_SOCKET_ADDRESS, {
   autoConnect: false
 });
 Vue.use(VueSocketIO, socket);
 
+Vue.prototype.$queuedSocket = Socket;
+
 // Set up Vue Router
 Vue.use(VueRouter);
 

src/services/AuthService.js

@@ -1,7 +1,5 @@
 import Validator from "validator";
 
-import Vue from "vue";
-
 import NetworkService from "./NetworkService";
 import AnalyticsService from "./AnalyticsService";
 
@@ -125,7 +123,7 @@ export default {
 
     const authPromise =
       !context || isGlobal
-        ? NetworkService.userGlobal(Vue)
+        ? NetworkService.userGlobal()
         : NetworkService.user(context);
     return authPromise
       .then(res => {

src/services/NetworkService.js

@@ -1,17 +1,64 @@
 import Vue from "vue";
+import promiseRetry from "promise-retry";
+import errcode from "err-code";
 
 const AUTH_ROOT = `${process.env.VUE_APP_SERVER_ROOT}/auth`;
 const API_ROOT = `${process.env.VUE_APP_SERVER_ROOT}/api`;
 const ELIGIBILITY_API_ROOT = `${process.env.VUE_APP_SERVER_ROOT}/eligibility`;
 const CONTACT_API_ROOT = `${process.env.VUE_APP_SERVER_ROOT}/contact`;
 
+const FAULT_TOLERANT_HTTP_TIMEOUT = 10000;
+const FAULT_TOLERANT_HTTP_MAX_RETRY_TIMEOUT = 100000;
+const FAULT_TOLERANT_HTTP_MAX_RETRIES = 10;
+
 export default {
   _successHandler(res) {
     return Promise.resolve(res);
   },
   _errorHandler(res) {
     return Promise.reject(res);
   },
+  _faultTolerantHttp(http, method, onRetry, url, data) {
+    const promiseToRetry = () => {
+      return (["get", "delete", "head", "jsonp"].indexOf(method) !== -1
+        ? http[method](url, {
+            timeout: FAULT_TOLERANT_HTTP_TIMEOUT
+          })
+        : http[method](url, data, {
+            timeout: FAULT_TOLERANT_HTTP_TIMEOUT
+          })
+      ).then(this._successHandler, this._errorHandler);
+    };
+
+    // object property specifying whether this function is aborted
+    const requestState = { isAborted: false };
+
+    return promiseRetry(
+      retry => {
+        if (requestState.isAborted) {
+          // early exit
+          throw errcode(new Error("Aborted by user"), "EUSERABORTED");
+        }
+
+        return promiseToRetry().catch(res => {
+          if (res.status === 0) {
+            if (onRetry) {
+              onRetry(res, () => {
+                requestState.isAborted = true;
+              });
+            }
+            retry(res);
+          }
+
+          throw res;
+        });
+      },
+      {
+        retries: FAULT_TOLERANT_HTTP_MAX_RETRIES,
+        maxTimeout: FAULT_TOLERANT_HTTP_MAX_RETRY_TIMEOUT
+      }
+    );
+  },
 
   // Server route defintions
   login(context, data) {
@@ -86,7 +133,7 @@ export default {
       .get(`${API_ROOT}/user`)
       .then(this._successHandler, this._errorHandler);
   },
-  userGlobal(Vue) {
+  userGlobal() {
     return Vue.http
       .get(`${API_ROOT}/user`)
       .then(this._successHandler, this._errorHandler);
@@ -126,20 +173,28 @@ export default {
       .get(`${API_ROOT}/volunteers`)
       .then(this._successHandler, this._errorHandler);
   },
-  newSession(context, data) {
-    return context.$http
-      .post(`${API_ROOT}/session/new`, data)
-      .then(this._successHandler, this._errorHandler);
+  newSession(context, data, onRetry) {
+    return this._faultTolerantHttp(
+      context.$http,
+      "post",
+      onRetry,
+      `${API_ROOT}/session/new`,
+      data
+    );
   },
   endSession(context, data) {
     return context.$http
       .post(`${API_ROOT}/session/end`, data)
       .then(this._successHandler, this._errorHandler);
   },
-  checkSession(context, data) {
-    return context.$http
-      .post(`${API_ROOT}/session/check`, data)
-      .then(this._successHandler, this._errorHandler);
+  checkSession(context, data, onRetry) {
+    return this._faultTolerantHttp(
+      context.$http,
+      "post",
+      onRetry,
+      `${API_ROOT}/session/check`,
+      data
+    );
   },
   currentSession(context, data) {
     return context.$http

src/services/SessionService.js

@@ -5,36 +5,39 @@ import errorFromHttpResponse from "../utils/error-from-http-response.js";
 
 export default {
   loading: false,
-  currentSession: {
-    sessionId: null,
-    data: {}
-  },
 
   endSession(context, sessionId) {
     return NetworkService.endSession(context, { sessionId }).then(() => {
+      const currentSessionData = context.$store.state.user.session;
       context.$store.dispatch("user/clearSession");
 
       // analytics: track when a help session has ended
       AnalyticsService.trackSessionEnded(
         context,
-        this.currentSession.data,
+        currentSessionData,
         context.$store.state.user.isFakeUser
       );
-
-      this.currentSession.sessionId = null;
-      this.currentSession.data = {};
     });
   },
 
-  newSession(context, sessionType, sessionSubTopic) {
-    return NetworkService.newSession(context, {
-      sessionType,
-      sessionSubTopic
-    }).then(res => {
+  newSession(context, sessionType, sessionSubTopic, options) {
+    const onRetry = options && options.onRetry;
+
+    return NetworkService.newSession(
+      context,
+      {
+        sessionType,
+        sessionSubTopic
+      },
+      onRetry
+    ).then(res => {
       const data = res.data || {};
       const { sessionId } = data;
 
-      this.currentSession.sessionId = sessionId;
+      const currentSession = {
+        sessionId,
+        data: context.$store.state.user.session
+      };
 
       if (sessionId) {
         const sessionData = {
@@ -50,7 +53,7 @@ export default {
       // analytics: track when a session has started
       AnalyticsService.trackSessionStarted(
         context,
-        this.currentSession,
+        currentSession,
         sessionType,
         sessionSubTopic,
         context.$store.state.user.isFakeUser
@@ -60,14 +63,14 @@ export default {
     });
   },
 
-  useExistingSession(context, sessionId) {
-    return NetworkService.checkSession(context, { sessionId })
+  useExistingSession(context, sessionId, options) {
+    const onRetry = options && options.onRetry;
+
+    return NetworkService.checkSession(context, { sessionId }, onRetry)
       .then(res => {
         const data = res.data || {};
         const { sessionId } = data;
 
-        this.currentSession.sessionId = sessionId;
-
         return sessionId;
       })
       .catch(res => {
@@ -89,16 +92,10 @@ export default {
         const { type, subTopic } = data;
 
         if (type && subTopic && sessionId) {
-          this.currentSession.sessionId = sessionId;
-          this.currentSession.data = data;
-
           return Promise.resolve({ sessionData: data });
         }
       })
       .catch(resp => {
-        this.currentSession.sessionId = null;
-        this.currentSession.data = {};
-
         throw errorFromHttpResponse(resp);
       });
   },

src/store/modules/user.js

@@ -14,7 +14,8 @@ export default {
     session: {},
     latestSession: {},
     volunteerStats: {},
-    isFirstDashboardVisit: false
+    isFirstDashboardVisit: false,
+    isSessionConnectionAlive: false
   },
   mutations: {
     setUser: (state, user = {}) => (state.user = user),
@@ -55,6 +56,10 @@ export default {
 
     setIsFirstDashboardVisit: (state, isFirstDashboardVisit) => {
       state.isFirstDashboardVisit = isFirstDashboardVisit;
+    },
+
+    setIsSessionConnectionAlive: (state, isSessionConnectionAlive) => {
+      state.isSessionConnectionAlive = isSessionConnectionAlive;
     }
   },
   actions: {
@@ -112,6 +117,14 @@ export default {
       commit("setSession", {});
     },
 
+    sessionDisconnected: ({ commit }) => {
+      commit("setIsSessionConnectionAlive", false);
+    },
+
+    sessionConnected: ({ commit }) => {
+      commit("setIsSessionConnectionAlive", true);
+    },
+
     updateSession: ({ commit }, sessionData) => {
       commit("setSession", sessionData);
     },

src/utils/session.js

@@ -23,7 +23,7 @@ export const rejoinSession = (router, sessionPath) => {
  * @param {object} context
  */
 export const endSession = context => {
-  const sessionId = SessionService.currentSession.sessionId;
+  const sessionId = context.$store.state.user.session._id;
   SessionService.endSession(context, sessionId)
     .then(() => {
       context.$socket.disconnect();

src/views/SessionView/ConnectionTroubleModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="ConnectionTroubleModal">
+    <h1 class="ConnectionTroubleModal-title">Connection Problems</h1>
+    <div class="ConnectionTroubleModal-message">
+      {{ modalData.message }}
+    </div>
+    <large-button v-if="mobileMode" primary @click.native="onAccept">{{
+      modalData.acceptText
+    }}</large-button>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import LargeButton from "@/components/LargeButton";
+
+export default {
+  components: { LargeButton },
+  props: {
+    modalData: { type: Object, required: true }
+  },
+  computed: {
+    ...mapGetters({
+      mobileMode: "app/mobileMode",
+      isVolunteer: "user/isVolunteer"
+    })
+  },
+  methods: {
+    onAccept() {
+      this.modalData.abortFunction();
+      this.$router.push("/");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ConnectionTroubleModal {
+  @include flex-container(column);
+  @include child-spacing(top, 24px);
+  @include breakpoint-above("medium") {
+    @include child-spacing(top, 16px);
+  }
+}
+
+.ConnectionTroubleModal-title {
+  @include font-category("display-small");
+  @include breakpoint-above("medium") {
+    margin-top: 24px;
+  }
+}
+
+.ConnectionTroubleModal-message {
+  @include font-category("body");
+}
+</style>