feat: handle error after release

env/env.dev

@@ -1,3 +1,4 @@
 VITE_API_URL = /
 VITE_TIMEOUT = 20000
 VITE_EXPIRED = 30
+VITE_STORAGE_ERROR_PAGE = erpg

env/env.prod

@@ -1,3 +1,4 @@
 VITE_API_URL = /
 VITE_TIMEOUT = 20000
 VITE_EXPIRED = 30
+VITE_STORAGE_ERROR_PAGE = erpg

package.json

@@ -80,6 +80,7 @@
     "@iconify/json": "^1.1.390",
     "@intlify/vite-plugin-vue-i18n": "^2.4.0",
     "@rollup/plugin-yaml": "^3.1.0",
+    "@types/js-cookie": "^2.2.7",
     "@vitejs/plugin-legacy": "^1.5.1",
     "@vitejs/plugin-vue": "^1.4.0",
     "@vue/compiler-sfc": "^3.2.4",
@@ -94,6 +95,7 @@
     "dotenv-cli": "^4.0.0",
     "element-plus": "1.0.2-beta.44",
     "husky": "^7.0.1",
+    "js-cookie": "^3.0.0",
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
     "rimraf": "^3.0.2",

src/modules/About/router.ts

@@ -2,7 +2,12 @@ const routes: {}[] = [
   {
     path: '/about',
     name: 'about.index',
-    component: () => import('./views/about.vue')
+    component: (): Promise<any> => {
+      return new Promise((resolve, reject) => {
+        resolve(import('./views/about.vue'))
+        reject(new Error('Failed to load page'))
+      })
+    }
   }
 ]
 

src/modules/Home/router.ts

@@ -2,7 +2,12 @@ const routes: {}[] = [
   {
     path: '/',
     name: 'home.index',
-    component: () => import('./views/home.vue')
+    component: (): Promise<any> => {
+      return new Promise((resolve, reject) => {
+        resolve(import('./views/home.vue'))
+        reject(new Error('Failed to load page'))
+      })
+    }
   }
 ]
 

src/utils/filters.ts

@@ -0,0 +1,3 @@
+export const isUndefined = (value: number | string | {} | [] | {}[]): boolean => {
+  return value === undefined
+}

src/utils/routerGuard.ts

@@ -1,5 +1,10 @@
 import { Router } from 'vue-router'
 import { useNProgress } from '@vueuse/integrations'
+import {
+  setErrorPage,
+  getErrorPage,
+  delErrorPage
+} from './storage'
 
 const { start, done } = useNProgress(null, {
   showSpinner: false
@@ -16,14 +21,33 @@ const routerGuard: Function = (router: Router) => {
   })
 
   router.afterEach(() => {
+    /**
+     * DESC:
+     * navigate to the page that is
+     * defined after router.onError
+     */
+    const errorPage = getErrorPage()
+    if (errorPage.length) {
+      router.push({ name: errorPage })
+      delErrorPage()
+    }
+
     /**
      * DESC:
      * end progress bar
      */
     done()
   })
 
-  router.onError(() => {
+  router.onError((error, to) => {
+    /**
+     * DESC:
+     * force users to reload their browser and
+     * navigate it to the page that they want to visit
+     * to achieve smooth code update after release
+     */
+    console.error(error)
+    setErrorPage(String(to.name))
     location.reload()
   })
 

src/utils/storage.ts

@@ -0,0 +1,22 @@
+import cookie from 'js-cookie'
+import { isUndefined } from './filters'
+
+const expired = Number(import.meta.env.VITE_EXPIRED)
+const storageErrorPage = String(import.meta.env.VITE_STORAGE_ERROR_PAGE)
+
+export const setErrorPage = (
+  name: string,
+  expires = expired
+): void => {
+  if (!isUndefined(name)) {
+    cookie.set(storageErrorPage, name, { expires })
+  }
+}
+
+export const getErrorPage = (): string => {
+  return cookie.get(storageErrorPage) || ''
+}
+
+export const delErrorPage = (): void => {
+  cookie.remove(storageErrorPage)
+}