Add error 500 view, handle redirect for SSR

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)

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) {

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
+  }
+]

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>

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
+    }
   }
 })

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}`