Update frontend to handle errors

web-frontend/src/lib/common.js

@@ -0,0 +1,5 @@
+export const WasmStatus = {
+	NotLoaded: 0,
+	Loaded: 1,
+	Errored: 2
+};

web-frontend/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { WasmStatus } from '$lib/common.js';
 	import init, { address_from_lat_lon } from 'this_algorithm-wasm';
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
@@ -7,13 +8,20 @@
 
 	let mapElement;
 	let map;
-	// let wasm;
 	let latlng = { lat: '', lng: '' };
 	let addr = '';
+	let wasmStatus = WasmStatus.NotLoaded;
+	let wasmError = undefined;
 
 	onMount(async () => {
-		await init().then(() => {
-			console.log('Loaded. Example:', address_from_lat_lon(51.505, -0.09));
+		await init()
+			.then(() => {
+				wasmStatus = WasmStatus.Loaded;
+			})
+			.catch((e) => {
+				console.error('Error loading wasm module', e);
+				wasmError = e;
+				wasmStatus = WasmStatus.Errored;
 			});
 
 		if (browser) {
@@ -53,13 +61,32 @@
 	});
 </script>
 
-<h1>Welcome to SvelteKit</h1>
+<h2>Encoding</h2>
 
+{#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
 	<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
 
 	<main>
 		<div bind:this={mapElement} />
 	</main>
+{:else if wasmStatus == WasmStatus.Errored}
+	<div class="flex">
+		<div class="py-1">
+			<svg
+				class="fill-current h-6 w-6 text-teal-500 mr-4"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				><path
+					d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
+				/></svg
+			>
+		</div>
+		<div>
+			<p class="font-bold">Error</p>
+			<p class="text-sm">Error: {wasmError}.</p>
+		</div>
+	</div>
+{/if}
 
 <style>
 	@import 'leaflet/dist/leaflet.css';