From bfb4fa144f7198cfba1acb9d0723eafc5a76345a Mon Sep 17 00:00:00 2001 From: christianmat Date: Thu, 11 Jan 2024 18:02:08 -0800 Subject: [PATCH] fix posthog installation --- apps/www/package.json | 1 + apps/www/pages/_app.tsx | 32 +++++++++++++++++++++++++++----- pnpm-lock.yaml | 13 +++++++++++++ 3 files changed, 41 insertions(+), 5 deletions(-) diff --git a/apps/www/package.json b/apps/www/package.json index 51c07fc..9cb8442 100644 --- 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 index 0c65608..4b69ad4 100755 --- a/apps/www/pages/_app.tsx +++ b/apps/www/pages/_app.tsx @@ -4,7 +4,21 @@ 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.' @@ -12,6 +26,18 @@ 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 ( <> @@ -34,10 +60,6 @@ export default function App({ Component, pageProps }: AppProps) { ], }} /> - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6eab9a..79ced2b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -165,6 +165,9 @@ importers: next-themes: specifier: ^0.2.0 version: 0.2.0(next@12.2.2)(react-dom@18.2.0)(react@18.2.0) + posthog-js: + specifier: ^1.98.2 + version: 1.98.2 prism-react-renderer: specifier: ^1.3.5 version: 1.3.5(react@18.2.0) @@ -6254,6 +6257,10 @@ packages: bser: 2.1.1 dev: true + /fflate@0.4.8: + resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==} + dev: false + /figures@3.2.0: resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==} engines: {node: '>=8'} @@ -8972,6 +8979,12 @@ packages: source-map-js: 1.0.2 dev: false + /posthog-js@1.98.2: + resolution: {integrity: sha512-u0N98I81UV/lTQWBbjdqCcacbhPZHmApc8CNsvk1y9/iqHPShoKcbjRvAjtAw5ujD8kiX1GdrmxN3i6erxJBVg==} + dependencies: + fflate: 0.4.8 + dev: false + /preferred-pm@3.1.2: resolution: {integrity: sha512-nk7dKrcW8hfCZ4H6klWcdRknBOXWzNQByJ0oJyX97BOupsYD+FzLS4hflgEu/uPUEHZCuRfMxzCBsuWd7OzT8Q==} engines: {node: '>=10'}