Posthog 404 tracking (#652)

* Track 404s in PostHog

Co-authored-by: wils <wils@arcade-ai.com>

* Fix lint for 404 tracking

* update PostHog

* Guard referrer URL parsing

Co-authored-by: wils <wils@arcade-ai.com> (#655)

Guard referrer URL parsing

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

* fix: reduce cognitive complexity in not-found.tsx useEffect

Extract referrer domain logic into separate getReferrerInfo() helper function
to reduce cognitive complexity from 16 to below the max threshold of 15.

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: wdawson

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/posthog.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/quick-start-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/sample-app-card.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/scope-picker.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,
     });