Merge pull request #203 from feat/migrate-from-umami-to-posthog

feat(analytics): migrate from Umami to PostHog for SaaS product analytics

Author: ayoub3bidi

.env.example

@@ -7,5 +7,10 @@ VITE_SUPABASE_ANON_KEY=your-anon-key
 # Google Identity Services — Web OAuth client ID (public)
 VITE_GOOGLE_WEB_CLIENT_ID=your-web-client-id.apps.googleusercontent.com
 
+# PostHog analytics (optional — skip in local dev)
+VITE_POSTHOG_API_HOST=https://us.i.posthog.com
+VITE_POSTHOG_API_KEY=phc_your_project_token
+# For production with reverse proxy: VITE_POSTHOG_API_HOST=https://e.bayanflow.com
+
 # Optional: Pyodide CDN override (see src/constants/pyodideCdn.js)
 # VITE_PYODIDE_CDN_BASE=

.github/workflows/ci.yml

@@ -127,6 +127,8 @@ jobs:
         env:
           VITE_GIT_BRANCH: ${{ github.ref_name }}
           VITE_DEV_SITE_URL: 'https://dev.bayanflow.com'
+          VITE_POSTHOG_API_KEY: ${{ secrets.VITE_POSTHOG_API_KEY }}
+          VITE_POSTHOG_API_HOST: 'https://us.i.posthog.com'
 
       - name: Upload build artifacts
         uses: actions/upload-artifact@v5

.github/workflows/deploy-cloudflare.yml

@@ -51,6 +51,8 @@ jobs:
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           VITE_GOOGLE_WEB_CLIENT_ID: ${{ secrets.VITE_GOOGLE_WEB_CLIENT_ID }}
+          VITE_POSTHOG_API_KEY: ${{ secrets.VITE_POSTHOG_API_KEY }}
+          VITE_POSTHOG_API_HOST: ${{ github.event.workflow_run.head_branch == 'main' && 'https://e.bayanflow.com' || 'https://e.dev.bayanflow.com' }}
 
       - name: Deploy to Cloudflare Workers
         uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3

.github/workflows/preview-cloudflare.yml

@@ -58,6 +58,8 @@ jobs:
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
           VITE_GOOGLE_WEB_CLIENT_ID: ${{ secrets.VITE_GOOGLE_WEB_CLIENT_ID }}
+          VITE_POSTHOG_API_KEY: ${{ secrets.VITE_POSTHOG_API_KEY }}
+          VITE_POSTHOG_API_HOST: https://e.dev.bayanflow.com
 
       - name: Upload preview version
         id: deploy

SECURITY.md

@@ -69,7 +69,7 @@ Bayan Flow implements several security measures:
 
 - **Client-side only**: No server-side data processing or storage for algorithm execution
 - **Local algorithm execution**: Sorting, searching, pathfinding, and graph visualizations run entirely in the browser
-- **Limited third-party calls**: Umami analytics (privacy-oriented), GitHub public API (release/repo metadata), and jsDelivr (Pyodide, only when the user opens the Python panel)
+- **Limited third-party calls**: PostHog analytics (privacy-oriented, via first-party proxy), GitHub public API (release/repo metadata), and jsDelivr (Pyodide, only when the user opens the Python panel)
 - **HTTP security headers** (via Cloudflare Workers static assets `public/_headers`): Strict-Transport-Security, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy
 - **Content Security Policy**: Restricts script, connect, frame, and worker sources to approved origins
 - **Automated scanning**:

index.html

@@ -38,34 +38,6 @@
       })();
     </script>
 
-    <!-- Umami Analytics - Dynamically loaded based on environment -->
-    <script>
-      (function () {
-        const hostname = window.location.hostname;
-        let websiteId;
-        if (
-          hostname === 'dev.bayanflow.com' ||
-          hostname.slice(-12) === '.workers.dev'
-        ) {
-          // Develop
-          websiteId = 'b21ffc5d-66c1-4bfc-9e54-e05dbbe26852';
-        } else if (
-          hostname === 'bayanflow.com' ||
-          hostname === 'www.bayanflow.com'
-        ) {
-          // main
-          websiteId = 'c096589e-f026-47e9-b458-aeb6850d5d5c';
-        }
-        if (websiteId) {
-          const script = document.createElement('script');
-          script.defer = true;
-          script.src = 'https://cloud.umami.is/script.js';
-          script.setAttribute('data-website-id', websiteId);
-          document.head.appendChild(script);
-        }
-      })();
-    </script>
-
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://bayanflow.com/" />

package.json

@@ -59,6 +59,7 @@
     "@monaco-editor/react": "^4.7.0",
     "@octokit/rest": "^22.0.1",
     "@phosphor-icons/react": "^2.1.10",
+    "@posthog/react": "^1.10.3",
     "@remotion/media": "4.0.436",
     "@remotion/web-renderer": "^4.0.436",
     "@supabase/supabase-js": "^2.108.2",
@@ -69,6 +70,7 @@
     "i18next": "^25.7.1",
     "i18next-browser-languagedetector": "^8.2.0",
     "isomorphic-dompurify": "^3.18.0",
+    "posthog-js": "^1.404.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-i18next": "^15.7.4",

pnpm-lock.yaml

@@ -5,7 +5,7 @@
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=(), identity-credentials-get=(self "https://accounts.google.com")
   # Pyodide CDN origins: jsDelivr below; custom VITE_PYODIDE_CDN_BASE origins appended at build (vite.config.js)
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://cloud.umami.is https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com; connect-src 'self' blob: https://cloud.umami.is https://gateway.umami.is https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com; object-src 'none'; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://*.posthog.com https://static.cloudflareinsights.com https://cdn.jsdelivr.net https://accounts.google.com; connect-src 'self' blob: https://*.posthog.com https://e.bayanflow.com https://e.dev.bayanflow.com https://cloudflareinsights.com https://api.github.com https://cdn.jsdelivr.net https://www.remotion.pro https://qketsapzqpzmccljfjcm.supabase.co https://accounts.google.com https://oauth2.googleapis.com; img-src 'self' data: blob: https://api.producthunt.com https://lh3.googleusercontent.com; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; font-src 'self' data:; worker-src 'self' blob:; media-src 'self' blob:; frame-src https://www.youtube-nocookie.com https://accounts.google.com; object-src 'none'; base-uri 'self'; form-action 'self'
   Link: <https://bayanflow.com/sitemap.xml>; rel="sitemap"
   Link: </.well-known/api-catalog>; rel="api-catalog"
   Link: </.well-known/agent-card.json>; rel="service-desc"

public/_headers

@@ -80,6 +80,47 @@ function getSupabaseOrigin() {
   }
 }
 
+/**
+ * Assert CSP directives required for PostHog analytics.
+ * @param {string} csp
+ * @param {string} source - Label for error messages (e.g. "public/_headers")
+ * @returns {{ scriptSrc: string; connectSrc: string }}
+ */
+export function assertAnalyticsCspDirectives(csp, source) {
+  const directives = parseCspDirectives(csp);
+
+  const scriptSrcTokens = (directives.get('script-src') ?? '')
+    .split(/\s+/)
+    .filter(Boolean);
+  if (!scriptSrcTokens.includes('https://*.posthog.com')) {
+    throw new Error(
+      `${source}: script-src must include https://*.posthog.com (PostHog SDK)`
+    );
+  }
+
+  const connectSrcTokens = (directives.get('connect-src') ?? '')
+    .split(/\s+/)
+    .filter(Boolean);
+  if (!connectSrcTokens.includes('https://*.posthog.com')) {
+    throw new Error(
+      `${source}: connect-src must include https://*.posthog.com (PostHog analytics)`
+    );
+  }
+
+  const hasProxyOrigin =
+    connectSrcTokens.includes('https://e.bayanflow.com') ||
+    connectSrcTokens.includes('https://e.dev.bayanflow.com');
+  if (!hasProxyOrigin) {
+    throw new Error(
+      `${source}: connect-src must include https://e.bayanflow.com or https://e.dev.bayanflow.com (PostHog first-party proxy)`
+    );
+  }
+
+  const connectSrc = directives.get('connect-src') ?? '';
+  const scriptSrc = directives.get('script-src') ?? '';
+  return { scriptSrc, connectSrc };
+}
+
 /**
  * Assert CSP directives required for Supabase auth and Google profile avatars.
  * @param {string} csp