From 1672438388675937bba6abfe83dcdc8df11fd1cd Mon Sep 17 00:00:00 2001
From: Brandon Sprague <brandon@siliconally.org>
Date: Fri, 17 Nov 2023 15:46:27 -0800
Subject: [PATCH] Serialize errors we encounter (#66)

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