feat: add PostHog analyze

Author: pan93412

app/(app)/layout.tsx

@@ -1,4 +1,5 @@
 import AppShell from "@/components/app-shell";
+import PostHogIdentifier from "@/providers/posthog-identifier";
 import AuthorizedApolloWrapper from "@/providers/use-apollo.rsc";
 import ProtectedRoute from "@/providers/use-protected-route";
 import { unstable_ViewTransition as ViewTransition } from "react";
@@ -7,6 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <ProtectedRoute>
       <AuthorizedApolloWrapper>
+        <PostHogIdentifier />
         <AppShell>
           <div className="mx-auto w-full max-w-7xl flex-1 p-3">
             <ViewTransition name="app-content">

app/login/_components/posthog-resetter.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useEffect } from "react";
+
+import posthog from "posthog-js";
+
+export default function PostHogResetter() {
+  useEffect(() => {
+    posthog.reset();
+  }, []);
+
+  return null;
+}

app/login/page.tsx

@@ -7,6 +7,7 @@ import DoYouKnowSkeleton from "./_components/do-you-know/skeleton";
 import GithubLink from "./_components/github-link";
 import { LoginForm } from "./_components/login-form";
 import { UpstreamStatus, UpstreamStatusPlaceholder } from "./_components/status";
+import PostHogResetter from "./_components/posthog-resetter";
 
 export const metadata: Metadata = {
   title: "登入",
@@ -21,6 +22,9 @@ export default async function LoginPage() {
         lg:px-14 lg:py-8
       `}
     >
+      {/* Reset the session on the login page */}
+      <PostHogResetter />
+
       <div className="flex max-w-sm flex-1 flex-col justify-center gap-6">
         <Link
           href="/"

providers/posthog-identifier.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import useUser from "@/hooks/use-user";
+import posthog from "posthog-js";
+import { useEffect } from "react";
+
+/**
+ * Identify the current user if they are logged in.
+ * If they are not logged in, reset the posthog session.
+ */
+export default function PostHogIdentifier() {
+  const { user } = useUser();
+
+  useEffect(() => {
+    if (user) {
+      posthog.identify(user.id, {
+        name: user.name,
+        email: user.email,
+      });
+    }
+  }, [user]);
+
+  return null;
+}