fix posthog installation

FrigadeHQ · Jan 12, 2024 · bfb4fa1 · bfb4fa1
1 parent 0c8b65d
commit bfb4fa1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -15,6 +15,7 @@
     "next": "12.2.2",
     "next-seo": "^5.5.0",
     "next-themes": "^0.2.0",
+    "posthog-js": "^1.98.2",
     "prism-react-renderer": "^1.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
@@ -4,14 +4,40 @@ import type {AppProps} from 'next/app'
 import {ThemeProvider} from 'next-themes'
 import {NextSeo} from 'next-seo'
 import Head from 'next/head'
-import Script from "next/script";
+import {useEffect} from 'react'
+import {useRouter} from 'next/router'
+
+import posthog from 'posthog-js'
+
+// Check that PostHog is client-side (used to handle Next.js SSR)
+if (typeof window !== 'undefined') {
+  posthog.init("phc_N7OxUp5H8Tt5zZyaYevvnr748X4VserVtAvUBk0Ve17", {
+    api_host: 'https://app.posthog.com',
+    // Enable debug mode in development
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === 'development') posthog.debug()
+    }
+  })
+}
 
 const title = 'remoteStorage'
 const description = 'Easily persist data across browsers and devices.'
 const siteUrl = 'https://remote.storage'
 const packageJson = require('../../../packages/js-client/package.json')
 
 export default function App({ Component, pageProps }: AppProps) {
+
+  const router = useRouter()
+
+  useEffect(() => {
+    // Track page views
+    const handleRouteChange = () => posthog?.capture('$pageview')
+    router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [])
   return (
     <>
       <Head>
@@ -34,10 +60,6 @@ export default function App({ Component, pageProps }: AppProps) {
           ],
         }}
       />
-      <Script id="posthog">
-        {`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-          posthog.init('phc_N7OxUp5H8Tt5zZyaYevvnr748X4VserVtAvUBk0Ve17',{api_host:'https://app.posthog.com'})`}
-      </Script>
       <ThemeProvider disableTransitionOnChange attribute="class">
         <Component {...pageProps} />
       </ThemeProvider>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml