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:
@@ -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()}
|
||||||
|
21
src/main.tsx
21
src/main.tsx
@@ -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>,
|
||||||
);
|
);
|
||||||
|
Reference in New Issue
Block a user