chore: posthog js init (#5324)

* chore: posthog js init

* feat: posthog events

---------

Co-authored-by: YounixM <myounis.ar@live.com>

frontend/package.json

@@ -88,6 +88,7 @@
 		"lucide-react": "0.379.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"papaparse": "5.4.1",
+		"posthog-js": "1.140.1",
 		"rc-tween-one": "3.0.6",
 		"react": "18.2.0",
 		"react-addons-update": "15.6.3",

frontend/src/AppRoutes/index.tsx

@@ -17,6 +17,7 @@ import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
 import history from 'lib/history';
 import { identity, pick, pickBy } from 'lodash-es';
+import posthog from 'posthog-js';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useEffect, useState } from 'react';
@@ -38,7 +39,7 @@ import defaultRoutes, {
 
 function App(): JSX.Element {
 	const themeConfig = useThemeConfig();
-	const { data } = useLicense();
+	const { data: licenseData } = useLicense();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const { role, isLoggedIn: isLoggedInState, user, org } = useSelector<
 		AppState,
@@ -92,10 +93,10 @@ function App(): JSX.Element {
 	});
 
 	const isOnBasicPlan =
-		data?.payload?.licenses?.some(
+		licenseData?.payload?.licenses?.some(
 			(license) =>
 				license.isCurrent && license.planKey === LICENSE_PLAN_KEY.BASIC_PLAN,
-		) || data?.payload?.licenses === null;
+		) || licenseData?.payload?.licenses === null;
 
 	const enableAnalytics = (user: User): void => {
 		const orgName =
@@ -112,9 +113,7 @@ function App(): JSX.Element {
 		};
 
 		const sanitizedIdentifyPayload = pickBy(identifyPayload, identity);
-
 		const domain = extractDomain(email);
-
 		const hostNameParts = hostname.split('.');
 
 		const groupTraits = {
@@ -127,10 +126,30 @@ function App(): JSX.Element {
 		};
 
 		window.analytics.identify(email, sanitizedIdentifyPayload);
-
 		window.analytics.group(domain, groupTraits);
-
 		window.clarity('identify', email, name);
+
+		posthog?.identify(email, {
+			email,
+			name,
+			orgName,
+			tenant_id: hostNameParts[0],
+			data_region: hostNameParts[1],
+			tenant_url: hostname,
+			company_domain: domain,
+			source: 'signoz-ui',
+			isPaidUser: !!licenseData?.payload?.trialConvertedToSubscription,
+		});
+
+		posthog?.group('company', domain, {
+			name: orgName,
+			tenant_id: hostNameParts[0],
+			data_region: hostNameParts[1],
+			tenant_url: hostname,
+			company_domain: domain,
+			source: 'signoz-ui',
+			isPaidUser: !!licenseData?.payload?.trialConvertedToSubscription,
+		});
 	};
 
 	useEffect(() => {
@@ -144,10 +163,6 @@ function App(): JSX.Element {
 			!isIdentifiedUser
 		) {
 			setLocalStorageApi(LOCALSTORAGE.IS_IDENTIFIED_USER, 'true');
-
-			if (isCloudUserVal) {
-				enableAnalytics(user);
-			}
 		}
 
 		if (
@@ -195,6 +210,11 @@ function App(): JSX.Element {
 				console.error('Failed to parse local storage theme analytics event');
 			}
 		}
+
+		if (isCloudUserVal && user && user.email) {
+			enableAnalytics(user);
+		}
+
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [user]);
 

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { ThemeProvider } from 'hooks/useDarkMode';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import posthog from 'posthog-js';
 import { createRoot } from 'react-dom/client';
 import { HelmetProvider } from 'react-helmet-async';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -33,6 +34,13 @@ const queryClient = new QueryClient({
 
 const container = document.getElementById('root');
 
+if (process.env.POSTHOG_KEY) {
+	posthog.init(process.env.POSTHOG_KEY, {
+		api_host: 'https://us.i.posthog.com',
+		person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
+	});
+}
+
 Sentry.init({
 	dsn: process.env.SENTRY_DSN,
 	tunnel: process.env.TUNNEL_URL,

frontend/webpack.config.js

@@ -22,6 +22,7 @@ const plugins = [
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		SEGMENT_ID: process.env.SEGMENT_ID,
+		POSTHOG_KEY: process.env.POSTHOG_KEY,
 		CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 		SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
 		SENTRY_ORG: process.env.SENTRY_ORG,
@@ -39,6 +40,7 @@ const plugins = [
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 			SEGMENT_ID: process.env.SEGMENT_ID,
+			POSTHOG_KEY: process.env.POSTHOG_KEY,
 			CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 			SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
 			SENTRY_ORG: process.env.SENTRY_ORG,

frontend/webpack.config.prod.js

@@ -27,6 +27,7 @@ const plugins = [
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		SEGMENT_ID: process.env.SEGMENT_ID,
+		POSTHOG_KEY: process.env.POSTHOG_KEY,
 		CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 		SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
 		SENTRY_ORG: process.env.SENTRY_ORG,
@@ -49,6 +50,7 @@ const plugins = [
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 			SEGMENT_ID: process.env.SEGMENT_ID,
+			POSTHOG_KEY: process.env.POSTHOG_KEY,
 			CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 			SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
 			SENTRY_ORG: process.env.SENTRY_ORG,

frontend/yarn.lock

@@ -8776,6 +8776,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fflate@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -13700,6 +13705,19 @@ postcss@8.4.38, postcss@^8.0.0, postcss@^8.1.1, postcss@^8.3.7, postcss@^8.4.21,
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+posthog-js@1.140.1:
+  version "1.140.1"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.140.1.tgz#34efc0d326fa5fcf7950106f350fb4f0e73b2da6"
+  integrity sha512-UeKuAtQSvbzmTCzNVaauku8F194EYwAP33WrRrWZlDlMNbMy7GKcZOgKbr7jZqnha7FlVlHrWk+Rpyr1zCFhPQ==
+  dependencies:
+    fflate "^0.4.8"
+    preact "^10.19.3"
+
+preact@^10.19.3:
+  version "10.22.0"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.22.0.tgz#a50f38006ae438d255e2631cbdaf7488e6dd4e16"
+  integrity sha512-RRurnSjJPj4rp5K6XoP45Ui33ncb7e4H7WiOHVpjbkvqvA3U+N8Z6Qbo0AE6leGYBV66n8EhEaFixvIu3SkxFw==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"