feat: add 500 error page (#55)

rubenhensen · web-flow · commit 37dcb0f2fa0e · 2026-03-26T15:46:50.000+01:00
diff --git a/src/lib/components/filesharing/Error.svelte b/src/lib/components/filesharing/Error.svelte
@@ -4,15 +4,24 @@
 
     interface props {
         encryptionState: EncryptionState;
+        serverError?: boolean;
     }
 
-    let { encryptionState = $bindable() }: props = $props()
+    let { encryptionState = $bindable(), serverError = false }: props = $props()
 </script>
 
 <div class="error-container">
     <div class="error-content">
-        <h3 class="error-title">{$_('filesharing.errorTitle')}</h3>
-        <p class="error-message">{$_('filesharing.error')}</p>
+        <h3 class="error-title">
+            {serverError ? $_('filesharing.serverErrorTitle') : $_('filesharing.errorTitle')}
+        </h3>
+        <p class="error-message">
+            {#if serverError}
+                {@html $_('filesharing.serverError')}
+            {:else}
+                {$_('filesharing.error')}
+            {/if}
+        </p>
         <button
             class="error-btn"
             onclick={() => encryptionState = EncryptionState.FileSelection}
diff --git a/src/lib/components/filesharing/SendButton.svelte b/src/lib/components/filesharing/SendButton.svelte
@@ -33,6 +33,11 @@
     let validationErrors: string[] = $state([])
 
     import { MAX_UPLOAD_SIZE, UPLOAD_CHUNK_SIZE } from '$lib/env'
+    function isServerError(e: unknown): boolean {
+        const msg = String(e)
+        return /status: 5\d\d/.test(msg)
+    }
+
     let SMOOTH_TIME = 2
 
     const emailRegex =
@@ -121,6 +126,7 @@
             mobilePopupMode = 'none'
         } catch (e) {
             console.error('Error occurred during signing: ', e)
+            EncryptState.serverError = isServerError(e)
             EncryptState.encryptionState = EncryptionState.Error
             mobilePopupMode = 'none'
         }
@@ -142,6 +148,7 @@
         } catch (e) {
             console.error('Error occured during encryption: ', e)
             if (EncryptState.selfAborted === false) {
+                EncryptState.serverError = isServerError(e)
                 EncryptState.encryptionState = EncryptionState.Error
             } else {
                 EncryptState.percentages = EncryptState.files.map(() => 0)
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
@@ -78,6 +78,8 @@
         "subpar1": "With PostGuard you can securely send files in a privacy-friendly manner. Every file is encrypted specifically for the receiver. Only that person can decrypt that file. To do that, the email address must be shown. For this, the identification app Yivi is used. <a href=\"https://yivi.app/\">Learn more about the Yivi-app.</a>",
         "errorTitle": "Error occurred",
         "error": "Oops... We are really sorry but something went wrong. Please try again or contact us",
+        "serverErrorTitle": "Server error",
+        "serverError": "Our server encountered an error while processing your request. Please try again later. If the problem persists, please <a href=\"mailto:info@postguard.eu\">contact us</a>.",
         "tryAgain": "Try again",
         "cancel": "Cancel",
         "sign": {
@@ -106,6 +108,9 @@
             "notFoundTitle": "These files no longer exist",
             "notFoundSubtitle": "The link may have expired, or there may be an error in it.",
             "notFoundMessage": "Ask the sender to send the files <strong>once more</strong>.",
+            "serverErrorTitle": "Server error",
+            "serverErrorSubtitle": "Our server encountered an error while processing your request.",
+            "serverErrorMessage": "Please try again later. If the problem persists, please <a href=\"mailto:info@postguard.eu\">contact us</a>.",
             "identityMismatchTitle": "Decryption failed",
             "identityMismatchSubtitle": "The identity you provided does not match the intended recipient.",
             "identityMismatchMessage": "Please make sure you are proving the correct email address in Yivi.",
diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json
@@ -78,6 +78,8 @@
         "subpar1": "Met PostGuard kan je op een privacyvriendelijke manier veilig bestanden versturen. Elk bestand wordt speciaal voor de ontvanger versleuteld. Alleen die persoon kan dat bestand ontsleutelen. Daarvoor moet het e-mailadres getoond worden. Hiervoor wordt de identificatie-app Yivi gebruikt. <a href=\"https://yivi.app/\">Leer meer over de Yivi-app.</a>",
         "errorTitle": "Er is een fout opgetreden",
         "error": "Oeps... Excuses, er is iets fout gegaan. Probeer het nog een keer of neem contact op met ons",
+        "serverErrorTitle": "Serverfout",
+        "serverError": "Onze server heeft een fout ondervonden bij het verwerken van je verzoek. Probeer het later opnieuw. Als het probleem aanhoudt, <a href=\"mailto:info@postguard.eu\">neem dan contact met ons op</a>.",
         "tryAgain": "Probeer opnieuw",
         "cancel": "Annuleer",
         "sign": {
@@ -106,6 +108,9 @@
             "notFoundTitle": "Deze bestanden bestaan niet (meer)",
             "notFoundSubtitle": "Het kan zijn dat de link is verlopen, of dat er een fout in zit.",
             "notFoundMessage": "Vraag de verzender de bestanden <strong>nog een keer te versturen</strong>.",
+            "serverErrorTitle": "Serverfout",
+            "serverErrorSubtitle": "Onze server heeft een fout ondervonden bij het verwerken van je verzoek.",
+            "serverErrorMessage": "Probeer het later opnieuw. Als het probleem aanhoudt, <a href=\"mailto:info@postguard.eu\">neem dan contact met ons op</a>.",
             "identityMismatchTitle": "Ontsleutelen mislukt",
             "identityMismatchSubtitle": "De opgegeven identiteit komt niet overeen met de beoogde ontvanger.",
             "identityMismatchMessage": "Zorg ervoor dat u het juiste e-mailadres bewijst in Yivi.",
diff --git a/src/lib/types/filesharing/attributes.ts b/src/lib/types/filesharing/attributes.ts
@@ -23,6 +23,7 @@ export type EncryptState = {
     encryptionState: EncryptionState;
     abort: AbortController;
     selfAborted: boolean;
+    serverError: boolean;
     encryptStartTime: number;
     modPromise: Promise<any>;
     pkPromise: Promise<any>;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -41,6 +41,9 @@
             let resp = await fetch(`${PKG_URL}/v2/parameters`, {
                 headers: METRICS_HEADER,
             })
+            if (!resp.ok) {
+                throw new Error(`Failed to fetch parameters: status: ${resp.status}`)
+            }
             let params = await resp.json()
             return params.publicKey
         }
@@ -64,6 +67,7 @@
             encryptionState: EncryptionState.FileSelection,
             abort: new AbortController(),
             selfAborted: false,
+            serverError: false,
             encryptStartTime: 0,
             modPromise: modPromise,
             pkPromise: getParameters(),
@@ -94,7 +98,7 @@
         </div>
     {:else if EncryptState.encryptionState === EncryptionState.Error}
         <div class="inputs-container">
-            <Error bind:encryptionState={EncryptState.encryptionState} />
+            <Error bind:encryptionState={EncryptState.encryptionState} serverError={EncryptState.serverError} />
         </div>
     {:else if EncryptState.encryptionState === EncryptionState.Done}
         <Done bind:EncryptState={EncryptState} {createDefaultEncryptState} />
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
@@ -12,7 +12,7 @@
     import Chip from '$lib/components/Chip.svelte'
     import HelpToggle from '$lib/components/HelpToggle.svelte'
 
-    type DownloadState = 'Downloading' | 'Recipients' | 'Ready' | 'Decrypting' | 'Done' | 'Fail' | 'IdentityMismatch'
+    type DownloadState = 'Downloading' | 'Recipients' | 'Ready' | 'Decrypting' | 'Done' | 'Fail' | 'ServerError' | 'IdentityMismatch'
 
     // public_identity() returns a Policy: { ts: number, con: [{t: string, v?: string}] }
     function getSenderEmail(identity: any): string {
@@ -110,12 +110,24 @@
         try {
             const { FILEHOST_URL, PKG_URL } = await import('$lib/env')
 
-            const vk = await fetch(`${PKG_URL}/v2/sign/parameters`)
-                .then((r) => r.json())
-                .then((j) => j.publicKey)
+            const vkResp = await fetch(`${PKG_URL}/v2/sign/parameters`)
+            if (!vkResp.ok) {
+                if (vkResp.status >= 500) {
+                    downloadState = 'ServerError'
+                    return
+                }
+                throw new Error(`Failed to fetch parameters: ${vkResp.status}`)
+            }
+            const vk = (await vkResp.json()).publicKey
 
             const response = await fetch(`${FILEHOST_URL}/filedownload/${uuid}`)
-            if (!response.ok) throw new Error(`Failed to download file: ${response.status}`)
+            if (!response.ok) {
+                if (response.status >= 500) {
+                    downloadState = 'ServerError'
+                    return
+                }
+                throw new Error(`Failed to download file: ${response.status}`)
+            }
 
             if (!response.body) throw new Error('Response body is null')
             const { StreamUnsealer } = await import('@e4a/pg-wasm')
@@ -253,6 +265,8 @@
             err = String(e)
             if ((e as any)?.isDecryptionFailure) {
                 downloadState = 'IdentityMismatch'
+            } else if (/status: 5\d\d/.test(err) || /status(?:Code)?\s*[=:]\s*5\d\d/.test(err)) {
+                downloadState = 'ServerError'
             } else {
                 downloadState = 'Fail'
             }
@@ -297,6 +311,8 @@
         <h2>
             {#if downloadState === 'Fail'}
                 {$_('filesharing.decryptpanel.notFoundTitle')}
+            {:else if downloadState === 'ServerError'}
+                {$_('filesharing.decryptpanel.serverErrorTitle')}
             {:else if downloadState === 'IdentityMismatch'}
                 {$_('filesharing.decryptpanel.identityMismatchTitle')}
             {:else}
@@ -398,6 +414,10 @@
                 </div>
             {/if}
 
+        {:else if downloadState === 'ServerError'}
+            <p class="error-description">{$_('filesharing.decryptpanel.serverErrorSubtitle')}</p>
+            <p class="error-description">{@html $_('filesharing.decryptpanel.serverErrorMessage')}</p>
+
         {:else if downloadState === 'Fail'}
             <p class="error-description">{$_('filesharing.decryptpanel.notFoundSubtitle')}</p>
             <p class="error-description">{@html $_('filesharing.decryptpanel.notFoundMessage')}</p>
