Posthog 404 tracking

app/_components/analytics.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "@arcadeai/design-system/lib/utils";
 import Link from "next/link";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 import { getDashboardUrl } from "./dashboard-link";
 
 export type LinkClickedProps = {
@@ -15,10 +15,8 @@ export const SignupLink = ({
   children,
   className,
 }: LinkClickedProps) => {
-  const posthog = usePostHog();
-
   const trackSignupClick = (source: string) => {
-    posthog?.capture("Signup clicked", {
+    posthog.capture("Signup clicked", {
       link_location: source,
     });
   };

app/_components/dynamic-survey/hooks/use-survey.ts

@@ -1,6 +1,5 @@
 "use client";
-import type { Survey } from "posthog-js";
-import { usePostHog } from "posthog-js/react";
+import posthog, { type Survey } from "posthog-js";
 import { type FormEvent, useRef, useState } from "react";
 
 import {
@@ -20,7 +19,6 @@ export const useSurvey = ({ surveyData, onComplete }: UseSurveyProps) => {
   const [responses, setResponses] = useState<Record<number, unknown>>({});
   const [questionPath, setQuestionPath] = useState<number[]>([0]);
   const submitted = useRef(false);
-  const posthog = usePostHog();
 
   const handleSubmitQuestion = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -58,7 +56,7 @@ export const useSurvey = ({ surveyData, onComplete }: UseSurveyProps) => {
     if (nextIndex === "end") {
       const data = createSurveyEventProperties(updatedResponses, surveyData.id);
       if (!submitted.current) {
-        posthog?.capture("survey sent", data);
+        posthog.capture("survey sent", data);
         submitted.current = true;
       }
       onComplete(data);

app/_components/dynamic-survey/index.tsx

@@ -1,6 +1,5 @@
 "use client";
-import type { Survey } from "posthog-js";
-import { usePostHog } from "posthog-js/react";
+import posthog, { type Survey } from "posthog-js";
 import { useEffect, useRef } from "react";
 import { useSurvey } from "./hooks/use-survey";
 import { Navigation } from "./navigation";
@@ -19,7 +18,6 @@ export default function DynamicSurvey({
   onComplete,
   onBack,
 }: DynamicSurveyProps) {
-  const posthog = usePostHog();
   const surveyShown = useRef(false);
 
   const {
@@ -33,30 +31,30 @@ export default function DynamicSurvey({
 
   // Capture the survey shown event when the survey is loaded
   useEffect(() => {
-    if (!(surveyData && posthog) || surveyData.questions.length === 0) {
+    if (!surveyData || surveyData.questions.length === 0) {
       return;
     }
     if (!surveyShown.current) {
-      posthog?.capture("survey shown", { $survey_id: surveyData.id });
+      posthog.capture("survey shown", { $survey_id: surveyData.id });
       surveyShown.current = true;
     }
-  }, [surveyData, posthog]);
+  }, [surveyData]);
 
   // Capture the survey dismissed event when the user navigates away from the survey
   useEffect(() => {
-    if (!(surveyData && posthog)) {
+    if (!surveyData) {
       return;
     }
 
     const handleBeforeUnload = () => {
       if (currentQuestionIndex < surveyData.questions.length - 1) {
-        posthog?.capture("survey dismissed", { $survey_id: surveyData.id });
+        posthog.capture("survey dismissed", { $survey_id: surveyData.id });
       }
     };
 
     window.addEventListener("beforeunload", handleBeforeUnload);
     return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, [surveyData, posthog, currentQuestionIndex]);
+  }, [surveyData, currentQuestionIndex]);
 
   // Handle back button click
   const handleBackButton = () => {

app/_components/early-access-registry-survey.tsx

@@ -1,21 +1,16 @@
 "use client";
 
-import type { Survey } from "posthog-js";
-import { usePostHog } from "posthog-js/react";
+import posthog, { type Survey } from "posthog-js";
 import { useEffect, useState } from "react";
 import DynamicSurvey from "./dynamic-survey";
 
 const SURVEY_ID = "019683f6-4fe2-0000-d182-6ef8f3982fc3";
 
 export const EarlyAccessRegistrySurvey = () => {
-  const posthog = usePostHog();
   const [surveyData, setSurveyData] = useState<Survey | null>(null);
   const [completed, setCompleted] = useState(false);
 
   useEffect(() => {
-    if (!posthog) {
-      return;
-    }
     posthog.onFeatureFlags(() => {
       posthog.getSurveys((surveys) => {
         const survey = surveys.find((s) => s.id === SURVEY_ID);
@@ -24,7 +19,7 @@ export const EarlyAccessRegistrySurvey = () => {
         }
       }, true);
     });
-  }, [posthog]);
+  }, []);
 
   const handleSurveyComplete = () => {
     setCompleted(true);

app/_components/integration-card.tsx

@@ -2,7 +2,7 @@
 import { Card, CardContent } from "@arcadeai/design-system";
 import { cn } from "@arcadeai/design-system/lib/utils";
 import type { LucideIcon } from "lucide-react";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 
 type IntegrationCardProps = {
   id: string;
@@ -21,10 +21,8 @@ export function IntegrationCard({
   isActive = false,
   onClick,
 }: IntegrationCardProps) {
-  const posthog = usePostHog();
-
   const handleClick = () => {
-    posthog?.capture("integration_card_clicked", {
+    posthog.capture("Integration card clicked", {
       integration_id: id,
       integration_title: title,
       is_active: isActive,

app/_components/quick-start-card.tsx

@@ -7,7 +7,7 @@ import {
 } from "@arcadeai/design-system";
 import { motion } from "motion/react";
 import Link from "next/link";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 
 type QuickStartCardProps = {
   icon: React.ElementType;
@@ -26,10 +26,8 @@ export function QuickStartCard({
   onClick,
   code,
 }: QuickStartCardProps) {
-  const posthog = usePostHog();
-
   const handleCardClick = () => {
-    posthog?.capture("quickstart_card_clicked", {
+    posthog.capture("Quickstart card clicked", {
       card_title: title,
       card_href: href || null,
       has_custom_onclick: !!onClick,

app/_components/sample-app-card.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Card, CardContent } from "@arcadeai/design-system";
 import Link from "next/link";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 
 type SampleAppCardProps = {
   title: string;
@@ -21,10 +21,8 @@ export function SampleAppCard({
   tags = [],
   date,
 }: SampleAppCardProps) {
-  const posthog = usePostHog();
-
   const handleClick = () => {
-    posthog?.capture("sample_app_clicked", {
+    posthog.capture("Sample app clicked", {
       app_title: title,
       app_href: href,
       tags,

app/_components/scope-picker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 import { useState } from "react";
 
 type Tool = {
@@ -14,14 +14,13 @@ type ScopePickerProps = {
 
 export default function ScopePicker({ tools }: ScopePickerProps) {
   const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set());
-  const posthog = usePostHog();
 
   const trackScopeCalculatorUsed = (
     action: string,
     toolName: string | undefined,
     newSelectedCount: number
   ) => {
-    posthog?.capture("scope_calculator_used", {
+    posthog.capture("Scope calculator used", {
       action,
       tool_name: toolName || null,
       selected_tools_count: newSelectedCount,

app/_components/tabbed-code-block.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@arcadeai/design-system";
 import { ChevronDown } from "lucide-react";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 import React, { useMemo, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
@@ -28,7 +28,6 @@ const CodeTabSwitcher = ({ tabs }: CodeTabSwitcherProps) => {
   const [activeTab, setActiveTab] = useState(0);
   const [selectedLanguage, setSelectedLanguage] = useState("Python");
   const [isDarkMode, setIsDarkMode] = useState(false);
-  const posthog = usePostHog();
 
   // Effect to monitor theme changes
   React.useEffect(() => {
@@ -108,7 +107,7 @@ const CodeTabSwitcher = ({ tabs }: CodeTabSwitcherProps) => {
 
   const handleExpandExample = () => {
     setIsExpanded(true);
-    posthog?.capture("code_example_expanded", {
+    posthog.capture("Code example expanded", {
       tab_count: tabs.length,
       initial_language: selectedLanguage,
     });

app/_components/tabbed-code-block/copy-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@arcadeai/design-system";
 import { Check, Copy } from "lucide-react";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 import { useCallback, useState } from "react";
 
 const COPY_TIMEOUT_MS = 1500;
@@ -15,7 +15,6 @@ export function CopyButton({
   disabled: boolean;
 }) {
   const [copied, setCopied] = useState(false);
-  const posthog = usePostHog();
 
   const handleCopy = useCallback(async () => {
     if (!content) {
@@ -27,14 +26,14 @@ export function CopyButton({
       setTimeout(() => setCopied(false), COPY_TIMEOUT_MS);
 
       // Track code copy event
-      posthog?.capture("code_copied", {
+      posthog.capture("Code copied", {
         content_length: content.length,
         content_preview: content.substring(0, CONTENT_PREVIEW_LENGTH),
       });
     } catch {
       // Silent fail
     }
-  }, [content, posthog]);
+  }, [content]);
 
   return (
     <Button

app/en/home/landing-page.tsx

@@ -17,7 +17,7 @@ import {
 import { motion } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 // import { ChallengeSolution } from "./ChallengeSolution";
 import { QuickStartCard } from "../../_components/quick-start-card";
 import { SampleAppCard } from "../../_components/sample-app-card";
@@ -36,11 +36,9 @@ const ANIMATION_DELAYS = {
 } as const;
 
 export function LandingPage() {
-  const posthog = usePostHog();
-
   const trackHeroClick =
     (eventName: string) => (e: React.MouseEvent<HTMLAnchorElement>) => {
-      posthog?.capture(eventName, {
+      posthog.capture(eventName, {
         button_location: "landing_page_hero",
         destination: e.currentTarget.getAttribute("href"),
       });
@@ -121,7 +119,7 @@ export function LandingPage() {
             >
               <Link
                 href="/get-started/quickstarts/call-tool-agent"
-                onClick={trackHeroClick("get_started_clicked")}
+                onClick={trackHeroClick("Get started clicked")}
               >
                 <Rocket className="mr-2 h-5 w-5" />
                 Get Started
@@ -135,7 +133,7 @@ export function LandingPage() {
             >
               <Link
                 href="/guides/create-tools/tool-basics/build-mcp-server"
-                onClick={trackHeroClick("build_tool_clicked")}
+                onClick={trackHeroClick("Build tool clicked")}
               >
                 <Wrench className="mr-2 h-5 w-5" />
                 Build a tool

app/en/resources/contact-us/contact-cards.tsx

@@ -7,14 +7,13 @@ import {
   Github,
 } from "@arcadeai/design-system";
 import { HeartPulse, Mail, Shield, Users } from "lucide-react";
-import { usePostHog } from "posthog-js/react";
+import posthog from "posthog-js";
 import { useEffect, useRef, useState } from "react";
 import { QuickStartCard } from "../../../_components/quick-start-card";
 
 export function ContactCards() {
   const [isSalesModalOpen, setIsSalesModalOpen] = useState(false);
   const scriptLoadedRef = useRef(false);
-  const posthog = usePostHog();
 
   useEffect(() => {
     // Load HubSpot script once
@@ -28,7 +27,7 @@ export function ContactCards() {
   }, []);
 
   const handleContactSalesClick = () => {
-    posthog?.capture("contact_sales_modal_opened", {
+    posthog.capture("Contact sales modal opened", {
       source: "contact_us_page",
     });
     setIsSalesModalOpen(true);