From 90e3cc66009df492535c3e61b58999231486ec77 Mon Sep 17 00:00:00 2001
From: Brandon Sprague <brandon@siliconally.org>
Date: Fri, 17 Nov 2023 13:49:08 -0800
Subject: [PATCH] Serialize errors we encounter

This PR makes it so that we serialize errors if we're going to send them across the SSR boundary. The problem this fixes is that some errors (like Nuxt reporting composable usage outside a `setup` function) have functions and other non-POJO/non-serializable info with them, which makes our `useState<Error>` implode, ironically hiding the original error.

This introduces a new non-dev dependency (which I don't do lightly) on `serialize-error`, a small (<1kB min + gzip'd) and popular dependency for doing the surprisingly nontrivial task of serializing different types of errors and preserving type information.
---
 frontend/app.vue                    |  4 +++-
 frontend/components/modal/Error.vue |  4 +++-
 frontend/composables/useModal.ts    |  3 ++-
 frontend/package-lock.json          | 27 ++++++++++++++++++++++++---
 frontend/package.json               |  1 +
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index 1eea4dd..f8d4c74 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { serializeError } from 'serialize-error'
+
 const { loading: { clearLoading }, error: { errorModalVisible, error } } = useModal()
 
 const handleError = (err: Error) => {
-  error.value = err
+  error.value = serializeError(err)
   errorModalVisible.value = true
   clearLoading()
 }
diff --git a/frontend/components/modal/Error.vue b/frontend/components/modal/Error.vue
index d48502e..731298b 100644
--- a/frontend/components/modal/Error.vue
+++ b/frontend/components/modal/Error.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { deserializeError } from 'serialize-error'
+
 const { error: { errorModalVisible, error: modalError } } = useModal()
 const error = useError()
 const router = useRouter()
@@ -26,7 +28,7 @@ const maybeGoBack = async () => {
 }
 
 const fullError = computed(() => {
-  const err = error.value ?? modalError.value
+  const err = error.value ?? deserializeError(modalError.value)
   if (err instanceof Error) {
     return {
       name: err.name ?? '',
diff --git a/frontend/composables/useModal.ts b/frontend/composables/useModal.ts
index 1e9b611..27e1ea8 100644
--- a/frontend/composables/useModal.ts
+++ b/frontend/composables/useModal.ts
@@ -1,4 +1,5 @@
 import { type Ref } from 'vue'
+import { type ErrorObject } from 'serialize-error'
 
 export const useModal = () => {
   const prefix = 'useModal'
@@ -22,7 +23,7 @@ export const useModal = () => {
 
   // error
   const errorModalVisible = newModalVisibilityState('errorModalVisible')
-  const error = useState<Error>('errorModal.error')
+  const error = useState<ErrorObject>('errorModal.error')
 
   // loading
   const loadingSet = useState<Set<string>>(`${prefix}.loadingSet`, () => new Set<string>())
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4722b88..bec86ab 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
         "primevue": "^3.32.0",
+        "serialize-error": "^11.0.3",
         "uuid": "^9.0.0",
         "vue-i18n": "^9.5.0"
       },
@@ -15640,6 +15641,20 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/serialize-error": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-11.0.3.tgz",
+      "integrity": "sha512-2G2y++21dhj2R7iHAdd0FIzjGwuKZld+7Pl/bTU6YIkrC2ZMbVUjm+luj6A6V34Rv9XfKJDKpTWu9W4Gse1D9g==",
+      "dependencies": {
+        "type-fest": "^2.12.2"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/serialize-javascript": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
@@ -17273,7 +17288,6 @@
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
       "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "dev": true,
       "engines": {
         "node": ">=12.20"
       },
@@ -30285,6 +30299,14 @@
         }
       }
     },
+    "serialize-error": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-11.0.3.tgz",
+      "integrity": "sha512-2G2y++21dhj2R7iHAdd0FIzjGwuKZld+7Pl/bTU6YIkrC2ZMbVUjm+luj6A6V34Rv9XfKJDKpTWu9W4Gse1D9g==",
+      "requires": {
+        "type-fest": "^2.12.2"
+      }
+    },
     "serialize-javascript": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
@@ -31516,8 +31538,7 @@
     "type-fest": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "dev": true
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
     },
     "typed-array-buffer": {
       "version": "1.0.0",
diff --git a/frontend/package.json b/frontend/package.json
index 11e6188..53b6056 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,6 +44,7 @@
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.32.0",
+    "serialize-error": "^11.0.3",
     "uuid": "^9.0.0",
     "vue-i18n": "^9.5.0"
   }