From b3816f7c96f00c26758b3c9bc68e9c4f04a4d050 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 28 Aug 2023 21:25:51 -0300
Subject: [PATCH] Add error 500 view, handle redirect for SSR

---
 server.js                                     | 27 ++++-----
 src/entry-server.js                           |  5 +-
 src/modules/404/router/index.js               |  7 ---
 src/modules/httpErrorPages/router/index.js    | 15 +++++
 .../index.vue => httpErrorPages/view/404.vue} |  0
 src/modules/httpErrorPages/view/500.vue       | 11 ++++
 .../otus/store/actions/loadCachedMap.js       |  9 ---
 src/modules/otus/store/actions/loadCatalog.js | 20 -------
 .../otus/store/actions/loadTaxonomy.js        | 18 ------
 src/modules/otus/store/store.js               | 55 ++++++++++++-------
 src/modules/otus/views/Index.vue              | 13 ++++-
 11 files changed, 92 insertions(+), 88 deletions(-)
 delete mode 100644 src/modules/404/router/index.js
 create mode 100644 src/modules/httpErrorPages/router/index.js
 rename src/modules/{404/view/index.vue => httpErrorPages/view/404.vue} (100%)
 create mode 100644 src/modules/httpErrorPages/view/500.vue
 delete mode 100644 src/modules/otus/store/actions/loadCachedMap.js
 delete mode 100644 src/modules/otus/store/actions/loadCatalog.js
 delete mode 100644 src/modules/otus/store/actions/loadTaxonomy.js

diff --git a/server.js b/server.js
index 6b8cc10..b467e00 100644
--- a/server.js
+++ b/server.js
@@ -76,21 +76,22 @@ export async function createServer(
         render = (await import('./dist/server/entry-server.js')).render
       }
 
-      const [appHtml, appState, preloadLinks, tagMeta] = await render(
-        url,
-        manifest,
-        origin
-      )
+      const [appHtml, appState, preloadLinks, tagMeta, redirectRoute] =
+        await render(url, manifest, origin)
 
-      const html = template
-        .replace(`<!--preload-links-->`, preloadLinks)
-        .replace(`<!--app-state-->`, appState)
-        .replace(`<!--head-tags-->`, tagMeta.headTags)
-        .replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
-        .replace(`<!--body-tags-->`, tagMeta.bodyTags)
-        .replace(makeAppContainer(), makeAppContainer(appHtml))
+      if (redirectRoute) {
+        res.redirect(redirectRoute)
+      } else {
+        const html = template
+          .replace(`<!--preload-links-->`, preloadLinks)
+          .replace(`<!--app-state-->`, appState)
+          .replace(`<!--head-tags-->`, tagMeta.headTags)
+          .replace(`<!--body-tags-open-->`, tagMeta.bodyTagsOpen)
+          .replace(`<!--body-tags-->`, tagMeta.bodyTags)
+          .replace(makeAppContainer(), makeAppContainer(appHtml))
 
-      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+        res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+      }
     } catch (e) {
       vite && vite.ssrFixStacktrace(e)
       console.log(e.stack)
diff --git a/src/entry-server.js b/src/entry-server.js
index f2e99b9..f545e0c 100644
--- a/src/entry-server.js
+++ b/src/entry-server.js
@@ -23,7 +23,10 @@ export async function render(url, manifest, originUrl) {
   // itself on ctx.modules. After the render, ctx.modules would contain all the
   // components that have been instantiated during this render call.
   const ctx = {}
+  const initialRoute = router.currentRoute.value.path
   const html = await renderToString(app, ctx)
+  const latestRoute = router.currentRoute.value.path
+  const redirectRoute = initialRoute !== latestRoute && latestRoute
   const headPayload = await renderSSRHead(getActiveHead())
   const renderState = `
   <script>
@@ -34,7 +37,7 @@ export async function render(url, manifest, originUrl) {
   // which we can then use to determine what files need to be preloaded for this
   // request.
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, renderState, preloadLinks, headPayload]
+  return [html, renderState, preloadLinks, headPayload, redirectRoute]
 }
 
 function renderPreloadLinks(modules, manifest) {
diff --git a/src/modules/404/router/index.js b/src/modules/404/router/index.js
deleted file mode 100644
index 9f9901b..0000000
--- a/src/modules/404/router/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import notFound from '../view/index.vue'
-
-export default {
-  path: '/:pathMatch(.*)*',
-  name: 'notFound',
-  component: notFound
-}
diff --git a/src/modules/httpErrorPages/router/index.js b/src/modules/httpErrorPages/router/index.js
new file mode 100644
index 0000000..ee1040f
--- /dev/null
+++ b/src/modules/httpErrorPages/router/index.js
@@ -0,0 +1,15 @@
+import internalError from '../view/500.vue'
+import notFound from '../view/404.vue'
+
+export default [
+  {
+    path: '/500',
+    name: 'httpError500',
+    component: internalError
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'httpError400',
+    component: notFound
+  }
+]
diff --git a/src/modules/404/view/index.vue b/src/modules/httpErrorPages/view/404.vue
similarity index 100%
rename from src/modules/404/view/index.vue
rename to src/modules/httpErrorPages/view/404.vue
diff --git a/src/modules/httpErrorPages/view/500.vue b/src/modules/httpErrorPages/view/500.vue
new file mode 100644
index 0000000..e2537e8
--- /dev/null
+++ b/src/modules/httpErrorPages/view/500.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="container mx-auto text-center relative top-1/4">
+    <h1 class="text-7xl text-base-lighter">500</h1>
+    <p>Internal Server Error.</p>
+    <p class="m-4 my-10 text-xl">
+      Uh oh, looks like something went wrong!<br />
+      We track these errors automatically, but if the problem persists feel free
+      to contact us.
+    </p>
+  </div>
+</template>
diff --git a/src/modules/otus/store/actions/loadCachedMap.js b/src/modules/otus/store/actions/loadCachedMap.js
deleted file mode 100644
index 7d25cdd..0000000
--- a/src/modules/otus/store/actions/loadCachedMap.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import TaxonWorks from '../../services/TaxonWorks'
-
-export const actionLoadCachedMap = {
-  loadCachedMap(mapId) {
-    TaxonWorks.getCachedMap(mapId).then((response) => {
-      this.distribution.cachedMap = response.data
-    })
-  }
-}
diff --git a/src/modules/otus/store/actions/loadCatalog.js b/src/modules/otus/store/actions/loadCatalog.js
deleted file mode 100644
index 005c760..0000000
--- a/src/modules/otus/store/actions/loadCatalog.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import TaxonWorks from '../../services/TaxonWorks'
-import { useOtuPageRequest } from '../../helpers/useOtuPageRequest'
-
-export const actionLoadCatalog = {
-  async loadCatalog(taxonId, { signal }) {
-    this.catalog.isLoading = true
-
-    const response = await useOtuPageRequest('taxonomy', () =>
-      TaxonWorks.getTaxonNameCitations(taxonId, { signal })
-    )
-
-    this.catalog = {
-      ...response.data,
-      sources: response.data.sources.map(({ cached, url }) =>
-        cached.replace(url, `<a href="${url}">${url}</a>`)
-      ),
-      isLoading: false
-    }
-  }
-}
diff --git a/src/modules/otus/store/actions/loadTaxonomy.js b/src/modules/otus/store/actions/loadTaxonomy.js
deleted file mode 100644
index 87e5798..0000000
--- a/src/modules/otus/store/actions/loadTaxonomy.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import TaxonWorks from '../../services/TaxonWorks'
-
-export const actionLoadTaxonomy = {
-  async loadTaxonomy(otuId, { signal }) {
-    const { data } = await TaxonWorks.getTaxonomy(otuId, {
-      params: {
-        max_descendants_depth: 0,
-        extend: ['common_names']
-      },
-      signal
-    })
-
-    this.taxonomy = {
-      commonNames: data.common_names,
-      synonyms: data.nomenclatural_synonyms
-    }
-  }
-}
diff --git a/src/modules/otus/store/store.js b/src/modules/otus/store/store.js
index 52cd5ca..45a2f84 100644
--- a/src/modules/otus/store/store.js
+++ b/src/modules/otus/store/store.js
@@ -2,11 +2,6 @@ import { defineStore } from 'pinia'
 import TaxonWorks from '../services/TaxonWorks'
 import { useOtuPageRequest } from '../helpers/useOtuPageRequest'
 import { useOtuPageRequestStore } from './request'
-import {
-  actionLoadCatalog,
-  actionLoadTaxonomy,
-  actionLoadCachedMap
-} from './actions'
 
 export const useOtuStore = defineStore('otuStore', {
   state: () => {
@@ -40,28 +35,50 @@ export const useOtuStore = defineStore('otuStore', {
       this.otu = otu.data
     },
 
+    async loadTaxonomy(otuId, { signal }) {
+      const { data } = await TaxonWorks.getTaxonomy(otuId, {
+        params: {
+          max_descendants_depth: 0,
+          extend: ['common_names']
+        },
+        signal
+      })
+
+      this.taxonomy = {
+        commonNames: data.common_names,
+        synonyms: data.nomenclatural_synonyms
+      }
+    },
+
+    async loadCatalog(taxonId, { signal }) {
+      this.catalog.isLoading = true
+
+      const response = await useOtuPageRequest('taxonomy', () =>
+        TaxonWorks.getTaxonNameCitations(taxonId, { signal })
+      )
+
+      this.catalog = {
+        ...response.data,
+        sources: response.data.sources.map(({ cached, url }) =>
+          cached.replace(url, `<a href="${url}">${url}</a>`)
+        ),
+        isLoading: false
+      }
+    },
+
     async loadInit({ otuId, controller }) {
       const requestStore = useOtuPageRequestStore()
-      const { signal } = controller
 
       requestStore.$reset()
 
       try {
-        await this.loadOtu(otuId, { signal })
-        await this.loadTaxon(this.otu.taxon_name_id, {
-          signal
-        })
-        await this.loadCatalog(this.otu.taxon_name_id, {
-          signal
-        })
-        await this.loadTaxonomy(otuId, { signal })
+        await this.loadOtu(otuId, controller)
+        await this.loadTaxon(this.otu.taxon_name_id, controller)
+        await this.loadCatalog(this.otu.taxon_name_id, controller)
+        await this.loadTaxonomy(otuId, controller)
       } catch (error) {
         return Promise.reject(error)
       }
-    },
-
-    ...actionLoadCatalog,
-    ...actionLoadTaxonomy,
-    ...actionLoadCachedMap
+    }
   }
 })
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index 5a891fe..fe8274d 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -144,11 +144,22 @@ async function loadInitialData() {
     updateMetadata()
   } catch (e) {
     if (e.name !== RESPONSE_ERROR.CanceledError) {
-      router.replace({ name: 'notFound' })
+      redirectOnError(e)
     }
   }
 }
 
+function redirectOnError(error) {
+  switch (error?.response?.status) {
+    case 404:
+      router.replace({ name: 'httpError400' })
+      break
+    case 500:
+      router.replace({ name: 'httpError500' })
+      break
+  }
+}
+
 function updateMetadata() {
   useHead({
     title: `${__APP_ENV__.project_name} - ${taxon.value.full_name}`