import { FC, ReactNode, useEffect } from "react"; import { useRouter } from "next/router"; import posthog from "posthog-js"; import { PostHogProvider as PHProvider } from "posthog-js/react"; // mobx store provider import { IUser } from "@plane/types"; // helpers import { getUserRole } from "helpers/user.helper"; export interface IPosthogWrapper { children: ReactNode; user: IUser | null; workspaceRole: number | undefined; projectRole: number | undefined; posthogAPIKey: string | null; posthogHost: string | null; } const PostHogProvider: FC = (props) => { const { children, user, workspaceRole, projectRole, posthogAPIKey, posthogHost } = props; // router const router = useRouter(); useEffect(() => { if (user) { // Identify sends an event, so you want may want to limit how often you call it posthog?.identify(user.email, { email: user.email, first_name: user.first_name, last_name: user.last_name, id: user.id, workspace_role: workspaceRole ? getUserRole(workspaceRole) : undefined, project_role: projectRole ? getUserRole(projectRole) : undefined, }); } }, [user, workspaceRole, projectRole]); useEffect(() => { if (posthogAPIKey && posthogHost) { posthog.init(posthogAPIKey, { api_host: posthogHost || "https://app.posthog.com", autocapture: false, capture_pageview: false, // Disable automatic pageview capture, as we capture manually }); } }, [posthogAPIKey, posthogHost]); useEffect(() => { // Track page views const handleRouteChange = () => { posthog?.capture("$pageview"); }; router.events.on("routeChangeComplete", handleRouteChange); return () => { router.events.off("routeChangeComplete", handleRouteChange); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); if (posthogAPIKey) { return {children}; } return <>{children}; }; export default PostHogProvider;