error-page

src/App.vue

@@ -1,9 +1,25 @@
 <template>
   <div id="app">
-    <router-view/>
+    <error-page v-if="isError"/>
+    <router-view v-else/>
   </div>
 </template>
 
+<script>
+import { mapGetters } from 'vuex';
+import ErrorPage from './views/errors/ErrorPage.vue';
+
+export default {
+  components: {
+    ErrorPage,
+  },
+  computed: {
+    ...mapGetters('criticalError', ['isError']),
+  },
+};
+</script>
+
+
 <style>
   html { height: 100%; }
   body {

src/router.js

@@ -48,6 +48,7 @@ const router = new Router({
 
 router.beforeEach(async (to, from, next) => {
   await store.dispatch('session/updateSession');
+  store.dispatch('criticalError/clearError');
   if (to.matched.some(record => record.meta.requiresAuth) && !store.getters['session/loggedIn']) {
     next({ path: '/login', query: { redirect: to.fullPath } });
   } else {

src/store/index.js

@@ -4,6 +4,7 @@ import createPersistedState from 'vuex-persistedstate';
 import oauthLogin from './modules/oauth/login';
 import oauthConsent from './modules/oauth/consent';
 import session from './modules/session';
+import criticalError from './modules/criticalError';
 
 Vue.use(Vuex);
 
@@ -13,6 +14,7 @@ export default new Vuex.Store({
     oauthLogin,
     oauthConsent,
     session,
+    criticalError,
   },
   plugins: [
     createPersistedState({

src/store/modules/criticalError/index.js

@@ -0,0 +1,33 @@
+export default {
+  namespaced: true,
+  state: {
+    number: null,
+    message: null,
+  },
+  /* eslint-disable no-param-reassign */
+  mutations: {
+    setNumber(state, number) {
+      state.number = number;
+    },
+    setMessage(state, message) {
+      state.message = message;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+  actions: {
+    createError({ commit, getters }, { number, message }) {
+      if (getters.isError) return;
+      commit('setNumber', number);
+      commit('setMessage', message);
+    },
+    clearError({ commit }) {
+      commit('setNumber', null);
+      commit('setMessage', null);
+    },
+  },
+  getters: {
+    isError({ number, message }) {
+      return number !== null || message !== null;
+    },
+  },
+};

src/views/errors/ErrorPage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="container">
+    <div id="error">
+        <h1 id="title">{{ number }}</h1>
+        <p id="message">{{ message }}</p>
+        <router-link to="/" exact>
+            Go to home page
+        </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+#error {
+  margin: auto;
+}
+#title {
+  font-size: 5em;
+  text-align: center;
+}
+#message {
+  font-size: 2em;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState('criticalError', [
+      'number',
+      'message',
+    ]),
+  },
+};
+</script>