Google Analyticsを入れる

.env.development

@@ -1 +1,2 @@
 VUE_APP_ACCOUNTS_BASE_URL=http://localhost:3000
+VUE_APP_GOOGLE_ANALYTICS_ID=UA-00000000-0

.env.production

@@ -1 +1,2 @@
 VUE_APP_ACCOUNTS_BASE_URL=https://accounts.prolab.club
+VUE_APP_GOOGLE_ANALYTICS_ID=UA-00000000-0

.travis.yml

@@ -2,6 +2,9 @@ language: node_js
 node_js:
   - 'stable'
 
+before_install:
+  - echo $GOOGLE_ANALYTICS_ID > .env.production.local
+
 script:
   - npm run build && npm run lint
 

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.18.0",
     "rxjs": "^6.4.0",
     "vue": "^2.6.10",
+    "vue-analytics": "^5.16.4",
     "vue-meta": "^1.6.0",
     "vue-multiselect": "^2.1.4",
     "vue-router": "^3.0.5",

src/main.js

@@ -1,13 +1,20 @@
 import Vue from 'vue';
 import Meta from 'vue-meta';
 import VueRx from 'vue-rx';
+import VueAnalytics from 'vue-analytics';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 
 Vue.config.productionTip = false;
 Vue.use(Meta);
 Vue.use(VueRx);
+Vue.use(
+  VueAnalytics, {
+    id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID,
+    router,
+  },
+);
 
 new Vue({
   router,

src/router.js

@@ -98,7 +98,7 @@ const router = new Router({
 router.beforeEach(async (to, from, next) => {
   store.commit('criticalError/clearError');
   if (to.matched.length === 0) {
-    store.commit('criticalError/createError', {
+    store.dispatch('criticalError/createError', {
       response: {
         status: 404,
         data: {
@@ -116,7 +116,7 @@ router.beforeEach(async (to, from, next) => {
   }
 
   if (to.matched.some(record => record.meta.requiresAdmin) && !store.getters['user/isAdmin']) {
-    store.commit('criticalError/createError', {
+    store.dispatch('criticalError/createError', {
       response: {
         status: 404,
         data: {

src/store/modules/achievement/index.js

@@ -29,11 +29,11 @@ export default {
   },
   /* eslint-enable no-param-reassign */
   actions: {
-    async getAchievements({ commit }, sessionID) {
+    async getAchievements({ commit, dispatch }, sessionID) {
       try {
         commit('setAchievements', await achievementClient.getAchievements(sessionID));
       } catch (e) {
-        commit('criticalError/createError', e, { root: true });
+        dispatch('criticalError/createError', e, { root: true });
       }
     },
     async saveAchievement({ commit, dispatch }, { sessionID, achievement, image }) {

src/store/modules/criticalError/index.js

@@ -1,3 +1,5 @@
+import { exception } from 'vue-analytics';
+
 export default {
   namespaced: true,
   state: {
@@ -6,14 +8,9 @@ export default {
   },
   /* eslint-disable no-param-reassign */
   mutations: {
-    createError(state, error) {
-      if (!error.response) {
-        state.number = '';
-        state.message = 'Connection refused';
-        return;
-      }
-      state.number = error.response.status;
-      state.message = error.response.data.message || error.response.statusText;
+    setError(state, { number, message }) {
+      state.number = number;
+      state.message = message;
     },
     clearError(state) {
       state.number = null;
@@ -26,4 +23,22 @@ export default {
       return state.number !== null || state.message !== null;
     },
   },
+  actions: {
+    createError({ commit }, error) {
+      if (!error.response) {
+        const number = '';
+        const message = 'Connection refused';
+        exception(message);
+        commit('setError', { number, message });
+        return;
+      }
+
+      const number = error.response.status;
+      const message = error.response.data.message || error.response.statusText;
+      if (number >= 500 && number < 600) {
+        exception(error);
+      }
+      commit('setError', { number, message });
+    },
+  },
 };

src/store/modules/invitation/index.js

@@ -20,11 +20,11 @@ export default {
   },
   /* eslint-enable no-param-reassign */
   actions: {
-    async listInvitations({ commit }, sessionID) {
+    async listInvitations({ commit, dispatch }, sessionID) {
       try {
         commit('setInvitations', await invitationClient.listInvitations(sessionID));
       } catch (e) {
-        commit('criticalError/createError', e, { root: true });
+        dispatch('criticalError/createError', e, { root: true });
       }
     },
     async invite({ commit, dispatch }, { sessionID, rawEmails }) {

src/store/modules/session/index.js

@@ -33,12 +33,12 @@ export default {
       }
     },
 
-    async logout({ commit }, sessionID) {
+    async logout({ commit, dispatch }, sessionID) {
       try {
         await sessionClient.deleteSession(sessionID);
         commit('clearSessionID');
       } catch (e) {
-        commit('criticalError/createError', e);
+        dispatch('criticalError/createError', e);
       }
     },
   },

src/views/ConfirmEmail.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { mapMutations, mapActions, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 
 export default {
   name: 'confirmEmail',
@@ -37,7 +37,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('criticalError', [
+    ...mapActions('criticalError', [
       'createError',
     ]),
     ...mapActions('emailConfirmations', [

src/views/Registration.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { mapMutations, mapActions, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import ErrorMessage from '@/components/ErrorMessage.vue';
 
 export default {
@@ -81,7 +81,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('criticalError', [
+    ...mapActions('criticalError', [
       'createError',
     ]),
     ...mapActions('user', [

src/views/memberIntroduction/Profile.vue

@@ -81,7 +81,7 @@ dd.small {
 </style>
 
 <script>
-import { mapMutations, mapActions, mapState } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import utils from '@/utils';
 
 const { IdToURLHelper } = utils;
@@ -110,7 +110,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('criticalError', [
+    ...mapActions('criticalError', [
       'createError',
     ]),
     ...mapActions('memberIntroduction/memberProfile', [