Fix error modal handling (#177)

frontend/composables/useModal.ts

@@ -1,6 +1,6 @@
 import { type Ref } from 'vue'
-import { type ErrorObject } from 'serialize-error'
-import { serializeError } from 'serialize-error'
+import { type ErrorObject, serializeError } from 'serialize-error'
+import { createErrorWithRemediation, isSilent, Remediation } from '@/lib/error'
 
 export const useModal = () => {
   const prefix = 'useModal'
@@ -44,11 +44,21 @@ export const useModal = () => {
     return () => loadingSet.value.delete(loadKey)
   }
   const clearLoading = () => { loadingSet.value.clear() }
-  const withLoading = async <T> (fn: () => Promise<T>, opKey: string): (Promise<T>) => {
+  const withLoading = <T> (fn: () => Promise<T>, opKey: string): Promise<T> => {
     startLoading(opKey)
-    const p = fn()
-    void p.finally(stopLoading(opKey))
-    return await p
+    return fn()
+      .catch((e: unknown) => {
+        if (!isSilent(e)) {
+          error.value = serializeError(e)
+          errorModalVisible.value = true
+          clearLoading()
+        }
+
+        throw createErrorWithRemediation(`withLoading: ${opKey}`, Remediation.Silent)
+      })
+      .finally(() => {
+        stopLoading(opKey)
+      })
   }
   const onMountedWithLoading = (fn: () => void, opKey: string) => {
     startLoading(opKey)

frontend/composables/usePACTA.ts

@@ -4,6 +4,8 @@ import { BaseHttpRequest } from '~/openapi/generated/pacta/core/BaseHttpRequest'
 import { CancelablePromise } from '~/openapi/generated/pacta/core/CancelablePromise'
 import type { OpenAPIConfig } from '~/openapi/generated/pacta/core/OpenAPI'
 import { request as __request } from '~/openapi/generated/pacta/core/request'
+import { serializeError } from 'serialize-error'
+import { createErrorWithRemediation, isSilent, Remediation } from '@/lib/error'
 
 export const usePACTA = () => {
   const {
@@ -12,6 +14,8 @@ export const usePACTA = () => {
     pactaClientWithHttpRequestClass, // On the client, wrap with a check for a fresh cookie.
   } = useAPI()
 
+  const { loading: { clearLoading }, error: { errorModalVisible, error } } = useModal()
+
   if (process.server) {
     const jwt = useCookie('jwt')
     if (jwt.value) {
@@ -54,7 +58,21 @@ export const usePACTA = () => {
             return cancelablePromise
           })
           .then(resolve)
-          .catch(reject)
+          .catch((e: unknown) => {
+            // We know we're at the "bottom" of the call chain here in usePACTA
+            // and so nothing will be sending a silent error, but we don't know
+            // how the code will change in the future, so we check just to be
+            // safe, lest we accidentally overlay multiple error modals with
+            // less useful information.
+            if (!isSilent(e)) {
+              error.value = serializeError(e)
+              errorModalVisible.value = true
+              clearLoading()
+            }
+
+            const err = createErrorWithRemediation(`${options.method} ${options.url} failed`, Remediation.Silent)
+            reject(err)
+          })
       })
     }
   }

frontend/lib/error/index.ts

@@ -5,6 +5,7 @@ export enum Remediation {
   Reload = 'reload',
   FileBug = 'file-bug',
   CheckUrl = 'check-url',
+  Silent = 'silent',
 }
 
 interface RemediationData {
@@ -18,6 +19,30 @@ interface PACTAError extends NuxtError {
   data: PACTAErrorData
 }
 
+export const isSilent = (err: any): boolean => {
+  if (!('data' in err)) {
+    return false
+  }
+
+  if (typeof (err.data) !== 'object' || err.data === null) {
+    return false
+  }
+
+  if (!('type' in err.data) || typeof (err.data.type) !== 'string') {
+    return false
+  }
+
+  if (err.data.type !== 'remediation') {
+    return false
+  }
+
+  if (!('remediation' in err.data) || typeof (err.data.remediation) !== 'string') {
+    return false
+  }
+
+  return err.data.remediation === Remediation.Silent
+}
+
 export const createErrorWithRemediation = (err: string | Partial<NuxtError>, r: Remediation): PACTAError => {
   console.log(err)
   const nuxtErr = createError(err)

frontend/pages/admin/merge.vue

@@ -12,7 +12,6 @@ const fromUserId = useState<string>(`${prefix}.fromUserId`, () => '')
 const toUserId = useState<string>(`${prefix}.toUserId`, () => '')
 const done = useState<boolean>(`${prefix}.done`, () => false)
 
-// TODO(#168) An example of the error here.
 const doMerge = (): void => {
   void withLoading(() => pactaClient.mergeUsers({
     fromUserId: fromUserId.value,