Makes sure it do not crashes when polling.

src/lib/components/ServiceCard.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import type { BrandConfig, ServiceConfig } from '$lib/config';
+	import type { ServiceData } from '$lib/services/service';
 	import { getServiceComponent } from '$lib/services/services';
 	import Brand from './Brand.svelte';
 
 	export let service: ServiceConfig;
-	export let data: any;
+	export let data: ServiceData;
 
 	const component = getServiceComponent(service.type || '');
 

src/lib/server/serviceDataPolling.ts

@@ -11,10 +11,16 @@ function isPromise(p: any): boolean {
 
 async function pollGeneric(upstream: ServiceData, url: string): Promise<ServiceData> {
 	upstream.status = undefined;
-	return fetch(url).then((resp: Response): ServiceData => {
-		upstream.status = resp.ok ? 'online' : 'offline';
-		return upstream;
-	});
+	return fetch(url)
+		.then((resp: Response): ServiceData => {
+			upstream.status = resp.ok ? 'online' : 'offline';
+			return upstream;
+		})
+		.catch((error) => {
+			console.warn("could not fetch status for '" + url + "': " + error);
+			upstream.status = 'offline';
+			return upstream;
+		});
 }
 
 function wrapHandler(handler: ServiceHandler): AsyncServiceHandler {
@@ -55,6 +61,9 @@ export function initializeServiceData() {
 	serviceData.length = config.services.length;
 	for (let i = 0; i < serviceData.length; i++) {
 		serviceData[i] = [];
+		for (let j = 0; j < config.services[i].items.length; j++) {
+			serviceData[i][j] = {};
+		}
 	}
 }
 

src/lib/services/pihole/+content.svelte

@@ -3,8 +3,3 @@
 </script>
 
 pihole status
-{#await data.raw}
-	waiting
-{:then value}
-	<pre>{JSON.stringify(value, null, 2)}</pre>
-{/await}

src/lib/services/pihole/+service.ts

@@ -11,9 +11,15 @@ export const handle: ServiceHandler = async (config: ServiceConfig) => {
 			config.url + '/api.php?summaryRaw&auth=' + config.api_token
 		);
 		res.status = resp.ok ? 'online' : 'offline';
-		res.raw = resp.json();
+		const raw = await resp.json();
+		res.data = {
+			queries_today: raw.dns_queries_today,
+			ads_percentage: raw.ads_percentage_today,
+			status: raw.status,
+			client: raw.unique_clients
+		};
 	} catch (error) {
-		res.status = undefined;
+		res.status = 'offline';
 		console.warn('could not fetch pihole status: ' + error);
 	}
 

src/routes/+page.svelte

@@ -16,8 +16,6 @@
 	{#each data.config.services as group, i}
 		<ServiceGroup {group} groupData={data.serviceData[i]} columns={data.config.columns} />
 	{/each}
-
-	<pre>{JSON.stringify(data, null, 2)}</pre>
 </main>
 
 <footer class="flex h-8 w-full flex-row">