wehub-resource-sync
69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import posthog from 'posthog-js';
|
|
import { PostHogProvider as PHProvider, usePostHog } from 'posthog-js/react';
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
import { usePathname, useSearchParams } from 'next/navigation';
|
|
|
|
export function PostHogProvider({ children }: { children: React.ReactNode }) {
|
|
const [isInitialized, setIsInitialized] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
|
|
// Already loaded (e.g., HMR, StrictMode remount)
|
|
if (posthog.__loaded) {
|
|
setIsInitialized(true);
|
|
return;
|
|
}
|
|
|
|
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
|
|
api_host:
|
|
process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
|
|
person_profiles: 'identified_only',
|
|
capture_pageview: false, // We capture manually below
|
|
capture_pageleave: true,
|
|
loaded: () => {
|
|
setIsInitialized(true);
|
|
},
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
return (
|
|
<PHProvider client={posthog}>
|
|
{isInitialized && <SuspendedPostHogPageView />}
|
|
{children}
|
|
</PHProvider>
|
|
);
|
|
}
|
|
|
|
function PostHogPageView() {
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const posthog = usePostHog();
|
|
|
|
useEffect(() => {
|
|
if (pathname && posthog) {
|
|
let url = window.origin + pathname;
|
|
if (searchParams.toString()) {
|
|
url = url + '?' + searchParams.toString();
|
|
}
|
|
posthog.capture('$pageview', { $current_url: url });
|
|
}
|
|
}, [pathname, searchParams, posthog]);
|
|
|
|
return null;
|
|
}
|
|
|
|
function SuspendedPostHogPageView() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<PostHogPageView />
|
|
</Suspense>
|
|
);
|
|
}
|