feat: add PostHog analytics integration

packages/web/.env

@@ -0,0 +1,2 @@
+VITE_PUBLIC_POSTHOG_KEY=phc_DdrSDBCkEZqVKPSeTdgAFPjj2xhJrbWWoLJfGW8Wkp39
+VITE_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

packages/web/.env.example

@@ -0,0 +1,2 @@
+VITE_PUBLIC_POSTHOG_KEY=phc_your_project_token
+VITE_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com

packages/web/package.json

@@ -18,7 +18,8 @@
     "node": ">=18"
   },
   "dependencies": {
-    "mermaid": "11.15.0"
+    "mermaid": "11.15.0",
+    "posthog-js": "^1.409.5"
   },
   "devDependencies": {
     "@types/node": "^20.19.43",

packages/web/src/main.ts

@@ -1,3 +1,5 @@
+import { posthog } from "./posthog";
+
 const copyButtons = Array.from(document.querySelectorAll<HTMLButtonElement>(".copy-command"));
 const copiedTimers = new WeakMap<HTMLButtonElement, ReturnType<typeof setTimeout>>();
 const releaseBadge = document.querySelector<HTMLElement>("[data-release-badge]");
@@ -39,6 +41,7 @@ for (const copy of copyButtons) {
     label.textContent = "Copied";
     clearTimeout(copiedTimers.get(copy));
     await copyText(text);
+    posthog.capture("command_copied");
     copiedTimers.set(
       copy,
       setTimeout(() => {

packages/web/src/posthog.ts

@@ -0,0 +1,29 @@
+import posthog from "posthog-js";
+
+const token = import.meta.env.VITE_PUBLIC_POSTHOG_KEY;
+const host = import.meta.env.VITE_PUBLIC_POSTHOG_HOST;
+
+if (!token) {
+  if (import.meta.env.DEV) {
+    throw new Error(
+      "VITE_PUBLIC_POSTHOG_KEY variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once VITE_PUBLIC_POSTHOG_KEY is configured",
+    );
+  }
+} else if (!host) {
+  if (import.meta.env.DEV) {
+    throw new Error(
+      "VITE_PUBLIC_POSTHOG_HOST variable required by PostHog is missing or un-configured, this causes events to be silently missed. This error stops appearing once VITE_PUBLIC_POSTHOG_HOST is configured",
+    );
+  }
+} else {
+  posthog.init(token, {
+    api_host: host,
+    capture_exceptions: {
+      capture_unhandled_errors: true,
+      capture_unhandled_rejections: true,
+      capture_console_errors: false,
+    },
+  });
+}
+
+export { posthog };

packages/web/src/viewer/app.js

@@ -1,4 +1,6 @@
 
+import { posthog } from "../posthog";
+
 (function () {
   const workspace = document.querySelector("[data-note-workspace]");
   const stackEl = document.querySelector("[data-note-stack]");
@@ -3531,6 +3533,9 @@
 
   async function openTarget(targetPath, pushHistory, openBeside, highlightText, sourcePanel) {
     const source = sourcePanel || activePanel();
+    posthog.capture("note_opened", {
+      open_mode: openBeside ? "beside" : "replace",
+    });
     if (!source) {
       await openInitialNote(targetPath, pushHistory, highlightText);
       return;
@@ -3568,6 +3573,7 @@
   }
 
   async function closePanel(panel, pushHistory) {
+    posthog.capture("note_closed");
     const before = panels();
     const index = before.indexOf(panel);
     let nextPanel;
@@ -4195,6 +4201,7 @@
         const shiftOverride = event.shiftKey || searchResult.dataset.openBeside === "true";
         const openBeside = shouldOpenBeside(shiftOverride);
         delete searchResult.dataset.openBeside;
+        posthog.capture("search_result_opened");
         closeSearchResults(searchResult);
         openTarget(targetPath, true, openBeside, highlightFromHref(searchResult.getAttribute("href") || searchResult.href), activePanel());
         return;

pnpm-workspace.yaml

@@ -1,5 +1,9 @@
 packages:
   - "packages/*"
 
+allowBuilds:
+  core-js: set this to true or false
+  esbuild: set this to true or false
+
 onlyBuiltDependencies:
   - esbuild