diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index e47b46f..80e3643 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -16,21 +16,25 @@
     }
 
     // metrics
-    let oldPath: string
-    $: if (metricCall && typeof window !== "undefined" && oldPath !== $location.path) {
-        const ref = oldPath ? document.location.protocol + "//" + document.location.host + oldPath : document.referrer
-        oldPath = $location.path
-        const fetchPath = oldPath + (oldPath.includes("?") ? "&" : "?") + "metrics"
-        fetch(fetchPath, {
-            headers: {
-                "x-ssr-skip": "204",
-                "x-ssr-ref": ref,
-                "x-ssr-res": `${window.innerWidth}x${window.innerHeight}`,
-                // no cache
-                "cache-control": "no-cache, no-store, must-revalidate",
-            },
-        })
-    }
+    let oldPath = $state("")
+    $effect(() => {
+        if (metricCall && typeof window !== "undefined" && oldPath !== $location.path) {
+            const ref = oldPath
+                ? document.location.protocol + "//" + document.location.host + oldPath
+                : document.referrer
+            oldPath = $location.path
+            const fetchPath = oldPath + (oldPath.includes("?") ? "&" : "?") + "metrics"
+            fetch(fetchPath, {
+                headers: {
+                    "x-ssr-skip": "204",
+                    "x-ssr-ref": ref,
+                    "x-ssr-res": `${window.innerWidth}x${window.innerHeight}`,
+                    // no cache
+                    "cache-control": "no-cache, no-store, must-revalidate",
+                },
+            })
+        }
+    })
 </script>
 
 <h1>Tibi Svelte Starter</h1>