magicui

1
"use client";
2

3
import { usePathname, useSearchParams } from "next/navigation";
4
import posthog from "posthog-js";
5
import { PostHogProvider } from "posthog-js/react";
6
import { useEffect } from "react";
7

8
if (typeof window !== "undefined") {
9
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, {
10
    api_host: "https://app.posthog.com",
11
    session_recording: {
12
      maskAllInputs: false,
13
    },
14
    // Enable debug mode in development
15
    loaded: (posthog) => {
16
      if (process.env.NODE_ENV === "development") posthog.debug();
17
    },
18
  });
19
}
20

21
export function PostHogPageview(): JSX.Element {
22
  const pathname = usePathname();
23
  const searchParams = useSearchParams();
24

25
  useEffect(() => {
26
    if (pathname) {
27
      let url = window.origin + pathname;
28
      if (searchParams && searchParams.toString()) {
29
        url = url + `?${searchParams.toString()}`;
30
      }
31
      posthog.capture("$pageview", {
32
        $current_url: url,
33
      });
34
    }
35
  }, [pathname, searchParams]);
36

37
  return <></>;
38
}
39

40
export function PHProvider({ children }: { children: React.ReactNode }) {
41
  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
42
}
43