From 89b67b8880d0dd26a68abe101a1e3064d45f120e Mon Sep 17 00:00:00 2001 From: Vishal Sharma Date: Mon, 24 Jun 2024 16:48:25 +0530 Subject: [PATCH] chore: posthog js init (#5324) * chore: posthog js init * feat: posthog events --------- Co-authored-by: YounixM --- frontend/package.json | 1 + frontend/src/AppRoutes/index.tsx | 42 +++++++++++++++++++++++--------- frontend/src/index.tsx | 8 ++++++ frontend/webpack.config.js | 2 ++ frontend/webpack.config.prod.js | 2 ++ frontend/yarn.lock | 18 ++++++++++++++ 6 files changed, 62 insertions(+), 11 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 25d32f69df..d78064278a 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index 645974204c..bc2b02d842 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/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(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]); diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 45a1b6f11a..b83ca56731 100644 --- a/frontend/src/index.tsx +++ b/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, diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 65883594bb..2e5c0d0f4e 100644 --- a/frontend/webpack.config.js +++ b/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, diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js index 9b17d345c9..87ef8b7143 100644 --- a/frontend/webpack.config.prod.js +++ b/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, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index c717a16507..295ae66012 100644 --- a/frontend/yarn.lock +++ b/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"