From 379f9f30338ca7ef03200e2a340d2ddbc68153c4 Mon Sep 17 00:00:00 2001
From: Yuri Iozzelli <y.iozzelli@gmail.com>
Date: Tue, 11 Mar 2025 15:49:14 +0100
Subject: [PATCH] check if plausible is loaded before calling it

Some ad-blockers block plausible's script from loading, in which case
the `plausible` function is not defined.
We define a wrapper function that check if `plausible` is defined and if
so calls it.
---
 src/lib/WebVM.svelte           | 5 +++--
 src/lib/anthropic.js           | 5 +++--
 src/lib/plausible.js           | 6 ++++++
 src/routes/+page.svelte        | 5 +++--
 src/routes/alpine/+page.svelte | 5 +++--
 5 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/plausible.js

diff --git a/src/lib/WebVM.svelte b/src/lib/WebVM.svelte
index a11610c..8225df5 100644
--- a/src/lib/WebVM.svelte
+++ b/src/lib/WebVM.svelte
@@ -10,6 +10,7 @@
 	import { cpuActivity, diskActivity, cpuPercentage, diskLatency } from '$lib/activities.js'
 	import { introMessage, errorMessage, unexpectedErrorMessage } from '$lib/messages.js'
 	import { displayConfig } from '$lib/anthropic.js'
+	import { tryPlausible } from '$lib/plausible.js'
 
 	export let configObj = null;
 	export let processCallback = null;
@@ -237,7 +238,7 @@
 		// Raise the display to the foreground
 		const display = document.getElementById("display");
 		display.parentElement.style.zIndex = 5;
-		plausible("Display activated");
+		tryPlausible("Display activated");
 	}
 	function handleProcessCreated()
 	{
@@ -263,7 +264,7 @@
 					if(configObj.diskImageUrl.startsWith(wssProtocol))
 					{
 						// WebSocket protocol failed, try agin using plain HTTP
-						plausible("WS Disk failure");
+						tryPlausible("WS Disk failure");
 						blockDevice = await CheerpX.CloudDevice.create("https:" + configObj.diskImageUrl.substr(wssProtocol.length));
 					}
 					else
diff --git a/src/lib/anthropic.js b/src/lib/anthropic.js
index 7939701..d5a25aa 100644
--- a/src/lib/anthropic.js
+++ b/src/lib/anthropic.js
@@ -1,6 +1,7 @@
 import { get, writable } from 'svelte/store';
 import { browser } from '$app/environment'
 import { aiActivity } from '$lib/activities.js'
+import { tryPlausible } from '$lib/plausible.js';
 
 import Anthropic from '@anthropic-ai/sdk';
 
@@ -16,7 +17,7 @@ export function setApiKey(key)
 	messageList.set(messages);
 	localStorage.setItem("anthropic-api-key", key);
 	apiState.set("READY");
-	plausible("ClaudeAI Key");
+	tryPlausible("ClaudeAI Key");
 }
 
 function clearApiKey()
@@ -131,7 +132,7 @@ export function addMessage(text, handleTool)
 {
 	addMessageInternal('user', text);
 	sendMessages(handleTool);
-	plausible("ClaudeAI Use");
+	tryPlausible("ClaudeAI Use");
 }
 
 export function clearMessageHistory() {
diff --git a/src/lib/plausible.js b/src/lib/plausible.js
new file mode 100644
index 0000000..bbdd724
--- /dev/null
+++ b/src/lib/plausible.js
@@ -0,0 +1,6 @@
+// Some ad-blockers block the plausible script from loading. Check if `plausible`
+// is defined before calling it.
+export function tryPlausible(msg) {
+	if (plausible)
+		plausible(msg)
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index bf07d92..fba3948 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,13 @@
 <script>
 import WebVM from '$lib/WebVM.svelte';
-import * as configObj from '/config_terminal'
+import * as configObj from '/config_terminal';
+import { tryPlausible } from '$lib/plausible.js';
 function handleProcessCreated(processCount)
 {
 	// Log the first 5 processes, to get an idea of the level of interaction from the public
 	if(processCount <= 5)
 	{
-		plausible(`Process started: ${processCount}`);
+		tryPlausible(`Process started: ${processCount}`);
 	}
 }
 </script>
diff --git a/src/routes/alpine/+page.svelte b/src/routes/alpine/+page.svelte
index 6b3d090..29b8974 100644
--- a/src/routes/alpine/+page.svelte
+++ b/src/routes/alpine/+page.svelte
@@ -1,12 +1,13 @@
 <script>
 import WebVM from '$lib/WebVM.svelte';
-import * as configObj from '/config_public_alpine'
+import * as configObj from '/config_public_alpine';
+import { tryPlausible } from '$lib/plausible.js';
 function handleProcessCreated(processCount)
 {
 	// Log only the first process, as a proxy for successful startup
 	if(processCount == 1)
 	{
-		plausible("Alpine init");
+		tryPlausible("Alpine init");
 	}
 }
 </script>