reverse proxy poshog, fix localstorage error

Author: ahmedkhaleel2004

next.config.js

@@ -6,7 +6,25 @@ import "./src/env.js";
 
 /** @type {import("next").NextConfig} */
 const config = {
-    reactStrictMode: false,
+  reactStrictMode: false,
+  async rewrites() {
+    return [
+      {
+        source: "/ingest/static/:path*",
+        destination: "https://us-assets.i.posthog.com/static/:path*",
+      },
+      {
+        source: "/ingest/:path*",
+        destination: "https://us.i.posthog.com/:path*",
+      },
+      {
+        source: "/ingest/decide",
+        destination: "https://us.i.posthog.com/decide",
+      },
+    ];
+  },
+  // This is required to support PostHog trailing slash API requests
+  skipTrailingSlashRedirect: true,
 };
 
 export default config;

src/app/providers.tsx

@@ -6,11 +6,12 @@ import { PostHogProvider } from "posthog-js/react";
 if (typeof window !== "undefined") {
   // Only initialize PostHog if the environment variables are available
   const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
-  const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
+  // const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
 
-  if (posthogKey && posthogHost) {
+  if (posthogKey) {
     posthog.init(posthogKey, {
-      api_host: posthogHost,
+      api_host: "/ingest",
+      ui_host: "https://us.posthog.com",
       person_profiles: "always",
     });
   } else {

src/hooks/useDiagram.ts

@@ -50,6 +50,7 @@ export function useDiagram(username: string, repo: string) {
   const [state, setState] = useState<StreamState>({ status: "idle" });
   const [hasUsedFreeGeneration, setHasUsedFreeGeneration] = useState<boolean>(
     () => {
+      if (typeof window === "undefined") return false;
       return localStorage.getItem("has_used_free_generation") === "true";
     },
   );