feat: integrate analytics into main app

- Initialize analytics service on app startup
- Add PostHogProvider wrapper for React integration
- Include AnalyticsConsentBanner in App component
- Set up app lifecycle tracking with useAppLifecycle hook
- Configure PostHog with environment variables
This commit is contained in:
Vivek R
2025-07-30 19:44:29 +05:30
parent ac7ac0e39e
commit fcb83fc6d0
2 changed files with 26 additions and 3 deletions

View File

@@ -25,6 +25,8 @@ import { TabManager } from "@/components/TabManager";
import { TabContent } from "@/components/TabContent"; import { TabContent } from "@/components/TabContent";
import { AgentsModal } from "@/components/AgentsModal"; import { AgentsModal } from "@/components/AgentsModal";
import { useTabState } from "@/hooks/useTabState"; import { useTabState } from "@/hooks/useTabState";
import { AnalyticsConsentBanner } from "@/components/AnalyticsConsent";
import { useAppLifecycle } from "@/hooks";
type View = type View =
| "welcome" | "welcome"
@@ -61,6 +63,9 @@ function AppContent() {
const [previousView] = useState<View>("welcome"); const [previousView] = useState<View>("welcome");
const [showAgentsModal, setShowAgentsModal] = useState(false); const [showAgentsModal, setShowAgentsModal] = useState(false);
// Initialize analytics lifecycle tracking
useAppLifecycle();
// Load projects on mount when in projects view // Load projects on mount when in projects view
useEffect(() => { useEffect(() => {
if (view === "projects") { if (view === "projects") {
@@ -464,6 +469,9 @@ function AppContent() {
onAgentsClick={() => setShowAgentsModal(true)} onAgentsClick={() => setShowAgentsModal(true)}
/> />
{/* Analytics Consent Banner */}
<AnalyticsConsentBanner />
{/* Main Content */} {/* Main Content */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
{renderContent()} {renderContent()}

View File

@@ -2,13 +2,28 @@ import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import App from "./App"; import App from "./App";
import { ErrorBoundary } from "./components/ErrorBoundary"; import { ErrorBoundary } from "./components/ErrorBoundary";
import { analytics } from "./lib/analytics";
import { PostHogProvider } from "posthog-js/react";
import "./assets/shimmer.css"; import "./assets/shimmer.css";
import "./styles.css"; import "./styles.css";
// Initialize analytics before rendering
analytics.initialize();
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode> <React.StrictMode>
<ErrorBoundary> <PostHogProvider
<App /> apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
</ErrorBoundary> options={{
api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
defaults: '2025-05-24',
capture_exceptions: true,
debug: import.meta.env.MODE === "development",
}}
>
<ErrorBoundary>
<App />
</ErrorBoundary>
</PostHogProvider>
</React.StrictMode>, </React.StrictMode>,
); );