Implement custom error page with improved handling

src/hooks.client.ts

@@ -0,0 +1,10 @@
+// src/hooks.client.ts
+import { goto } from '$app/navigation';
+
+export function handleError({ error, event }) {
+    if (error instanceof Error) {
+        console.error('Client error:', error.message);
+    } else {
+        console.error('Client error (unknown type):', error);
+    }
+}

src/routes/+layout.svelte

@@ -85,8 +85,8 @@
     let collectionSelector: CollectionSelector = $state();
     let fontSelector: FontSelector = $state();
     let noteDialog: NoteDialog = $state();
-    let planStopDialog: PlanStopDialog;
-    let planStopId: string;
+    let planStopDialog: PlanStopDialog = $state();
+    let planStopId: string = $state();
     let audioPlaybackSpeed: AudioPlaybackSpeed = $state();
 </script>
 

src/routes/+page.js

@@ -1,7 +1,19 @@
+import { redirect } from '@sveltejs/kit';
+
 /** @type {import('./$types').PageLoad} */
 export async function load({ url }) {
-    const ref = url.searchParams.get('ref');
-    const audio = url.searchParams.get('audio');
+    try {
+        const ref = url.searchParams.get('ref');
+        const audio = url.searchParams.get('audio');
+
+        if (!ref && !audio) {
+            throw new Error('Missing required query parameters: "ref" or "audio".');
+        }
 
-    return { ref, audio };
+        return { ref, audio };
+    } catch (err) {
+        // Redirect to your error page with message
+        const message = err instanceof Error ? err.message : 'Unknown error';
+        window.location.hash = `/error?message=${encodeURIComponent(message)}`;
+    }
 }

src/routes/error/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+
+    let message = 'An unknown error occurred';
+    let stack = '';
+
+    $: {
+        const query = $page.url.searchParams;
+        message = query.get('message') ?? message;
+        stack = query.get('stack') ?? '';
+    }
+
+    function reportIssue() {
+        const body = `**Error message:**\n${message}\n\n**Stack trace:**\n\`\`\`\n${stack}\n\`\`\`\n\n**URL:** ${window.location.href}\n**Time:** ${new Date().toISOString()}\n**User‑Agent:** ${navigator.userAgent}\n\n_Please describe what you were doing when this happened._`;
+        const issueUrl = `https://github.com/sillsdev/appbuilder-pwa/issues/new?title=Bug+Report&body=${encodeURIComponent(body)}`;
+        window.open(issueUrl, '_blank');
+    }
+
+    function returnToText() {
+        window.location.hash = '/text';
+    }
+</script>
+
+<div class="p-8 max-w-3xl mx-auto text-center">
+    <h1 class="text-3xl font-bold text-red-600">Something went wrong</h1>
+    <p class="mt-4 text-lg text-gray-800 break-words">{message}</p>
+
+    {#if stack}
+        <details class="mt-4 text-left text-sm text-gray-600 whitespace-pre-wrap">
+            <summary class="cursor-pointer font-semibold text-blue-700">View stack trace</summary>
+            <pre class="bg-gray-100 p-4 rounded">{stack}</pre>
+        </details>
+    {/if}
+
+    <div class="mt-6 flex justify-center gap-4 flex-wrap">
+        <button
+            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+            on:click={returnToText}
+        >
+            Return to Text
+        </button>
+
+        <button
+            class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
+            on:click={reportIssue}
+        >
+            Report Issue on GitHub
+        </button>
+    </div>
+</div>

src/routes/lexicon/+page.ts

@@ -1,3 +1,4 @@
+import { redirect } from '@sveltejs/kit';
 import { base } from '$app/paths';
 import type { DictionaryConfig } from '$config';
 import config from '$lib/data/config';
@@ -42,11 +43,16 @@ export async function load({ fetch }) {
 
     for (const [key, ws] of Object.entries(dictionaryConfig.writingSystems)) {
         if (!ws.type.includes('main')) {
-            const response = await fetch(`${base}/reversal/${key}/index.json`);
-            if (response.ok) {
-                reversalIndexes[key] = (await response.json()) as ReversalIndex; // Explicitly cast the JSON response
-            } else {
-                console.warn(`Failed to load reversal index for language: ${key}`);
+            try {
+                const response = await fetch(`${base}/reversal/${key}/index.json`);
+                if (!response.ok) {
+                    throw new Error(`Failed to load reversal index for language: ${key}`);
+                }
+                reversalIndexes[key] = (await response.json()) as ReversalIndex;
+            } catch (err) {
+                const message = err instanceof Error ? err.message : `Unknown error loading ${key}`;
+                const stack = err instanceof Error && err.stack ? err.stack : 'No stack trace';
+                window.location.hash = `/error?message=${encodeURIComponent(message)}&stack=${encodeURIComponent(stack)}`;
             }
         }
     }