feat: add performance monitoring w/ opt-in

Author: ItsMeBrianD

.github/workflows/pages-build.yaml

@@ -57,6 +57,7 @@ jobs:
         env:
           CI: true
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          FARO_SOURCEMAP_UPLOAD_API_KEY: ${{secrets.FARO_SOURCEMAP_UPLOAD_API_KEY}}
 
         run: |
           bun i @minecraftmetascript/mms-wasm@latest

bun.lock

@@ -44,6 +44,9 @@
 		"@codemirror/lsp-client": "^6.1.2",
 		"@codemirror/search": "^6.5.11",
 		"@codemirror/view": "^6.38.1",
+		"@grafana/faro-rollup-plugin": "^0.6.0",
+		"@grafana/faro-web-sdk": "^1.19.0",
+		"@grafana/faro-web-tracing": "^1.19.0",
 		"@minecraftmetascript/mms-wasm": "../mms/result/js",
 		"@open-rpc/client-js": "^1.8.1",
 		"@steeze-ui/svelte-icon": "^1.6.2",

package.json

@@ -3,6 +3,7 @@ import MMSWasm from '@minecraftmetascript/mms-wasm/dist/main.wasm?init';
 import * as deepslate from 'deepslate';
 import * as zip from '@zip.js/zip.js';
 import { debounce } from 'es-toolkit';
+import { registerEvent } from './observability';
 
 export class MMSFile {
 	private _content: string;
@@ -121,6 +122,7 @@ export class MMSProject {
 		globalThis.mmsLspRead = this.lspRead;
 		const wasmInstance = await MMSWasm(this.goInstance.importObject);
 		this.goInstance.run(wasmInstance).catch((err) => {
+			registerEvent("MMS_WASM: Init Failed", { err })
 			console.error('MMS WASM Failed: ', { err });
 		});
 		signal?.addEventListener('abort', () => {

src/lib/MMSProject.svelte.ts

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { Check, X } from '@steeze-ui/tabler-icons';
+	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import { initializeObservability } from './observability';
+
+	const initConsent = async () => {
+		await initializeObservability();
+		shouldShow = false;
+	};
+
+	const acceptConsent = () => {
+		localStorage.setItem('MMS:telemetry_consent', 'true');
+		initConsent();
+	};
+
+	const declineConsent = () => {
+		localStorage.setItem('MMS:telemetry_consent', 'false');
+		shouldShow = false;
+	};
+
+	let shouldShow = $state(false);
+	let timeout = $state(0);
+	const TIMEOUT_MAX = 30000;
+	let animateIdx = 0; // prevent multiple running when
+	onMount(() => {
+		const consent = localStorage.getItem('MMS:telemetry_consent');
+		if (!consent) {
+			shouldShow = true;
+			timeout = TIMEOUT_MAX;
+			let current = performance.now();
+			const idx = ++animateIdx;
+			const animate = () => {
+				if (animateIdx !== idx) return;
+				const elapsed = performance.now() - current;
+				timeout -= elapsed;
+				timeout = Math.max(timeout, 0);
+				current = performance.now();
+				if (timeout > 0) {
+					requestAnimationFrame(animate);
+				} else {
+					console.log('Done?');
+				}
+			};
+			animate();
+		} else if (consent.toLowerCase() === 'true') {
+			initConsent().catch(console.error);
+		}
+	});
+</script>
+
+{#if shouldShow}
+	<div
+		class="flex max-h-svh w-svw justify-between bg-slate-300 px-32 py-4"
+		transition:slide={{ duration: 500, delay: 500 }}
+	>
+		<p>
+			This website can leverage
+			<a href="https://grafana.com/products/cloud/frontend-observability/" target="_blank"
+				>Grafana Frontend Observability</a
+			>
+			to gather performance and error insights.
+			<br />
+			<strong
+				>Your privacy is important to us, and this will NOT be activated unless you consent.</strong
+			>
+		</p>
+
+		<div class="flex min-h-0 items-center gap-4">
+			<button
+				class="relative flex h-12 items-center gap-2 bg-green-400 px-4 py-1 text-lg font-bold text-green-950 hover:bg-green-600"
+				onclick={() => acceptConsent()}
+			>
+				<Icon src={Check} class="size-6 stroke-4" />
+				Accept
+				<div class="absolute bottom-0 left-0 h-1 w-full bg-green-300">
+					<div
+						class="h-full bg-green-900"
+						style:width="{100 - (timeout / TIMEOUT_MAX) * 100}%"
+					></div>
+				</div>
+			</button>
+			<button
+				class="flex h-12 items-center gap-2 bg-red-400 px-4 py-1 text-lg text-red-950 hover:bg-red-600"
+				onclick={() => declineConsent()}
+			>
+				<div class="relative">
+					<Icon src={X} class="absolute top-1/2 left-1/2 h-4 w-4 -translate-1/2" />
+				</div>
+				Decline
+			</button>
+		</div>
+	</div>
+{/if}

src/lib/PerformanceConsent.svelte

@@ -27,6 +27,7 @@
 	} from '@steeze-ui/tabler-icons';
 	import { pixelToCoordinate } from './lib';
 	import { base } from '$app/paths';
+	import { registerError, registerEvent } from '../observability';
 
 	const editor = useEditorContext();
 
@@ -125,6 +126,8 @@
 			if (mousePos && editor.previewSymbol) fetchValue();
 		});
 
+		const editor = useEditorContext();
+
 		worker.addEventListener('message', (e) => {
 			const message = parse(DeepslateRenderWorkerMessageSchema, e.data);
 			switch (message.kind) {
@@ -133,6 +136,15 @@
 						label: message.label,
 						value: typeof message.value === 'number' ? message.value.toFixed(2) : message.value
 					};
+					break;
+				case 'error':
+					const e =
+						message.error instanceof Error
+							? message.error
+							: new Error('Error in deepslate worker', { cause: message.error });
+					let content = editor.project.source['wasm.mms'];
+					registerError(e, content);
+					break;
 			}
 		});
 

src/lib/deepslate/DeepslateRendererOffloaded.svelte

@@ -56,6 +56,11 @@ export const InjestNoiseMessageSchema = v.object({
 	value: v.union([v.looseObject({}), v.string()])
 });
 
+export const ErrorCallback = v.object({
+	kind: v.literal('error'),
+	error: v.any()
+});
+
 export const DeepslateRenderWorkerMessageSchema = v.union([
 	CanvasInitMessageSchema,
 	UpdatePreviewMessageSchema,
@@ -64,6 +69,7 @@ export const DeepslateRenderWorkerMessageSchema = v.union([
 	InjestNoiseMessageSchema,
 	RequestValueAtPoint,
 	ResponseValueAtPoint,
-	UpdateMarkerPosSchema
+	UpdateMarkerPosSchema,
+	ErrorCallback
 ]);
 export type DeepslateRenderWorkerMessage = v.InferOutput<typeof DeepslateRenderWorkerMessageSchema>;