chore: move from trackEvent to logEvent (#5530)

* chore: move from trackEvent to logEvent

* feat: update test cases

frontend/src/AppRoutes/index.tsx

@@ -1,6 +1,7 @@
 import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
+import logEvent from 'api/common/logEvent';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
@@ -48,7 +49,7 @@ function App(): JSX.Element {
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
-	const { trackPageView, trackEvent } = useAnalytics();
+	const { trackPageView } = useAnalytics();
 
 	const { hostname, pathname } = window.location;
 
@@ -199,7 +200,7 @@ function App(): JSX.Element {
 					LOCALSTORAGE.THEME_ANALYTICS_V1,
 				);
 				if (!isThemeAnalyticsSent) {
-					trackEvent('Theme Analytics', {
+					logEvent('Theme Analytics', {
 						theme: isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT,
 						user: pick(user, ['email', 'userId', 'name']),
 						org,

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -19,10 +19,10 @@ import { ColumnsType } from 'antd/es/table';
 import updateCreditCardApi from 'api/billing/checkout';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import manageCreditCardApi from 'api/billing/manage';
+import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import useAxiosError from 'hooks/useAxiosError';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
@@ -137,8 +137,6 @@ export default function BillingContainer(): JSX.Element {
 		Partial<UsageResponsePayloadProps>
 	>({});
 
-	const { trackEvent } = useAnalytics();
-
 	const { isFetching, data: licensesData, error: licenseError } = useLicense();
 
 	const { user, org } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -316,7 +314,7 @@ export default function BillingContainer(): JSX.Element {
 
 	const handleBilling = useCallback(async () => {
 		if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) {
-			trackEvent('Billing : Upgrade Plan', {
+			logEvent('Billing : Upgrade Plan', {
 				user: pick(user, ['email', 'userId', 'name']),
 				org,
 			});
@@ -327,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
 				cancelURL: window.location.href,
 			});
 		} else {
-			trackEvent('Billing : Manage Billing', {
+			logEvent('Billing : Manage Billing', {
 				user: pick(user, ['email', 'userId', 'name']),
 				org,
 			});

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -11,7 +11,6 @@ import ROUTES from 'constants/routes';
 import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
 import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal';
 import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import history from 'lib/history';
 import { UserPlus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -104,7 +103,6 @@ export default function Onboarding(): JSX.Element {
 	const [selectedModuleSteps, setSelectedModuleSteps] = useState(APM_STEPS);
 	const [activeStep, setActiveStep] = useState(1);
 	const [current, setCurrent] = useState(0);
-	const { trackEvent } = useAnalytics();
 	const { location } = history;
 	const { t } = useTranslation(['onboarding']);
 
@@ -120,7 +118,7 @@ export default function Onboarding(): JSX.Element {
 	} = useOnboardingContext();
 
 	useEffectOnce(() => {
-		trackEvent('Onboarding V2 Started');
+		logEvent('Onboarding V2 Started', {});
 	});
 
 	const { status, data: ingestionData } = useQuery({
@@ -231,7 +229,7 @@ export default function Onboarding(): JSX.Element {
 			const nextStep = activeStep + 1;
 
 			// on next
-			trackEvent('Onboarding V2: Get Started', {
+			logEvent('Onboarding V2: Get Started', {
 				selectedModule: selectedModule.id,
 				nextStepId: nextStep,
 			});

frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx

@@ -5,9 +5,9 @@ import {
 	CloseCircleTwoTone,
 	LoadingOutlined,
 } from '@ant-design/icons';
+import logEvent from 'api/common/logEvent';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useQueryService } from 'hooks/useQueryService';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
@@ -41,8 +41,6 @@ export default function ConnectionStatus(): JSX.Element {
 		[queries],
 	);
 
-	const { trackEvent } = useAnalytics();
-
 	const [retryCount, setRetryCount] = useState(20); // Retry for 3 mins 20s
 	const [loading, setLoading] = useState(true);
 	const [isReceivingData, setIsReceivingData] = useState(false);
@@ -155,7 +153,7 @@ export default function ConnectionStatus(): JSX.Element {
 		if (data || isError) {
 			setRetryCount(retryCount - 1);
 			if (retryCount < 0) {
-				trackEvent('Onboarding V2: Connection Status', {
+				logEvent('Onboarding V2: Connection Status', {
 					dataSource: selectedDataSource?.id,
 					framework: selectedFramework,
 					environment: selectedEnvironment,
@@ -174,7 +172,7 @@ export default function ConnectionStatus(): JSX.Element {
 					setLoading(false);
 					setIsReceivingData(true);
 
-					trackEvent('Onboarding V2: Connection Status', {
+					logEvent('Onboarding V2: Connection Status', {
 						dataSource: selectedDataSource?.id,
 						framework: selectedFramework,
 						environment: selectedEnvironment,

frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx

@@ -5,11 +5,11 @@ import {
 	CloseCircleTwoTone,
 	LoadingOutlined,
 } from '@ant-design/icons';
+import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { useEffect, useState } from 'react';
 import { SuccessResponse } from 'types/api';
@@ -32,7 +32,6 @@ export default function LogsConnectionStatus(): JSX.Element {
 		activeStep,
 		selectedEnvironment,
 	} = useOnboardingContext();
-	const { trackEvent } = useAnalytics();
 	const [isReceivingData, setIsReceivingData] = useState(false);
 	const [pollingInterval, setPollingInterval] = useState<number | false>(15000); // initial Polling interval of 15 secs , Set to false after 5 mins
 	const [retryCount, setRetryCount] = useState(20); // Retry for 5 mins
@@ -105,7 +104,7 @@ export default function LogsConnectionStatus(): JSX.Element {
 			setRetryCount(retryCount - 1);
 
 			if (retryCount < 0) {
-				trackEvent('Onboarding V2: Connection Status', {
+				logEvent('Onboarding V2: Connection Status', {
 					dataSource: selectedDataSource?.id,
 					environment: selectedEnvironment,
 					module: activeStep?.module?.id,
@@ -141,7 +140,7 @@ export default function LogsConnectionStatus(): JSX.Element {
 					setRetryCount(-1);
 					setPollingInterval(false);
 
-					trackEvent('Onboarding V2: Connection Status', {
+					logEvent('Onboarding V2: Connection Status', {
 						dataSource: selectedDataSource?.id,
 						environment: selectedEnvironment,
 						module: activeStep?.module?.id,

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx

@@ -15,7 +15,6 @@ import ROUTES from 'constants/routes';
 import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig';
 import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource';
 import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import history from 'lib/history';
 import { isEmpty, isNull } from 'lodash-es';
 import { HelpCircle, UserPlus } from 'lucide-react';
@@ -79,7 +78,6 @@ export default function ModuleStepsContainer({
 	} = useOnboardingContext();
 
 	const [current, setCurrent] = useState(0);
-	const { trackEvent } = useAnalytics();
 	const [metaData, setMetaData] = useState<MetaDataProps[]>(defaultMetaData);
 	const lastStepIndex = selectedModuleSteps.length - 1;
 
@@ -143,7 +141,7 @@ export default function ModuleStepsContainer({
 	};
 
 	const redirectToModules = (): void => {
-		trackEvent('Onboarding V2 Complete', {
+		logEvent('Onboarding V2 Complete', {
 			module: selectedModule.id,
 			dataSource: selectedDataSource?.id,
 			framework: selectedFramework,
@@ -186,14 +184,14 @@ export default function ModuleStepsContainer({
 				// on next step click track events
 				switch (selectedModuleSteps[current].id) {
 					case stepsMap.dataSource:
-						trackEvent('Onboarding V2: Data Source Selected', {
+						logEvent('Onboarding V2: Data Source Selected', {
 							dataSource: selectedDataSource?.id,
 							framework: selectedFramework,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.environmentDetails:
-						trackEvent('Onboarding V2: Environment Selected', {
+						logEvent('Onboarding V2: Environment Selected', {
 							dataSource: selectedDataSource?.id,
 							framework: selectedFramework,
 							environment: selectedEnvironment,
@@ -201,7 +199,7 @@ export default function ModuleStepsContainer({
 						});
 						break;
 					case stepsMap.selectMethod:
-						trackEvent('Onboarding V2: Method Selected', {
+						logEvent('Onboarding V2: Method Selected', {
 							dataSource: selectedDataSource?.id,
 							framework: selectedFramework,
 							environment: selectedEnvironment,
@@ -211,7 +209,7 @@ export default function ModuleStepsContainer({
 						break;
 
 					case stepsMap.setupOtelCollector:
-						trackEvent('Onboarding V2: Setup Otel Collector', {
+						logEvent('Onboarding V2: Setup Otel Collector', {
 							dataSource: selectedDataSource?.id,
 							framework: selectedFramework,
 							environment: selectedEnvironment,
@@ -220,7 +218,7 @@ export default function ModuleStepsContainer({
 						});
 						break;
 					case stepsMap.instrumentApplication:
-						trackEvent('Onboarding V2: Instrument Application', {
+						logEvent('Onboarding V2: Instrument Application', {
 							dataSource: selectedDataSource?.id,
 							framework: selectedFramework,
 							environment: selectedEnvironment,
@@ -229,13 +227,13 @@ export default function ModuleStepsContainer({
 						});
 						break;
 					case stepsMap.cloneRepository:
-						trackEvent('Onboarding V2: Clone Repository', {
+						logEvent('Onboarding V2: Clone Repository', {
 							dataSource: selectedDataSource?.id,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.runApplication:
-						trackEvent('Onboarding V2: Run Application', {
+						logEvent('Onboarding V2: Run Application', {
 							dataSource: selectedDataSource?.id,
 							framework: selectedFramework,
 							environment: selectedEnvironment,
@@ -244,95 +242,95 @@ export default function ModuleStepsContainer({
 						});
 						break;
 					case stepsMap.addHttpDrain:
-						trackEvent('Onboarding V2: Add HTTP Drain', {
+						logEvent('Onboarding V2: Add HTTP Drain', {
 							dataSource: selectedDataSource?.id,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.startContainer:
-						trackEvent('Onboarding V2: Start Container', {
+						logEvent('Onboarding V2: Start Container', {
 							dataSource: selectedDataSource?.id,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.setupLogDrains:
-						trackEvent('Onboarding V2: Setup Log Drains', {
+						logEvent('Onboarding V2: Setup Log Drains', {
 							dataSource: selectedDataSource?.id,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.configureReceiver:
-						trackEvent('Onboarding V2: Configure Receiver', {
+						logEvent('Onboarding V2: Configure Receiver', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.configureAws:
-						trackEvent('Onboarding V2: Configure AWS', {
+						logEvent('Onboarding V2: Configure AWS', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.sendLogsCloudwatch:
-						trackEvent('Onboarding V2: Send Logs Cloudwatch', {
+						logEvent('Onboarding V2: Send Logs Cloudwatch', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.setupDaemonService:
-						trackEvent('Onboarding V2: Setup ECS Daemon Service', {
+						logEvent('Onboarding V2: Setup ECS Daemon Service', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.createOtelConfig:
-						trackEvent('Onboarding V2: Create ECS OTel Config', {
+						logEvent('Onboarding V2: Create ECS OTel Config', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.createDaemonService:
-						trackEvent('Onboarding V2: Create ECS Daemon Service', {
+						logEvent('Onboarding V2: Create ECS Daemon Service', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.ecsSendData:
-						trackEvent('Onboarding V2: ECS send traces data', {
+						logEvent('Onboarding V2: ECS send traces data', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.createSidecarCollectorContainer:
-						trackEvent('Onboarding V2: ECS create Sidecar Container', {
+						logEvent('Onboarding V2: ECS create Sidecar Container', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.deployTaskDefinition:
-						trackEvent('Onboarding V2: ECS deploy task definition', {
+						logEvent('Onboarding V2: ECS deploy task definition', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.ecsSendLogsData:
-						trackEvent('Onboarding V2: ECS Fargate send logs data', {
+						logEvent('Onboarding V2: ECS Fargate send logs data', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,
 						});
 						break;
 					case stepsMap.monitorDashboard:
-						trackEvent('Onboarding V2: EKS monitor dashboard', {
+						logEvent('Onboarding V2: EKS monitor dashboard', {
 							dataSource: selectedDataSource?.id,
 							environment: selectedEnvironment,
 							module: activeStep?.module?.id,

frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx

@@ -1,6 +1,6 @@
 import { EditFilled, PlusOutlined } from '@ant-design/icons';
+import logEvent from 'api/common/logEvent';
 import TextToolTip from 'components/TextToolTip';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionMode, ActionType, Pipeline } from 'types/api/pipeline/def';
@@ -15,7 +15,6 @@ function CreatePipelineButton({
 	pipelineData,
 }: CreatePipelineButtonProps): JSX.Element {
 	const { t } = useTranslation(['pipeline']);
-	const { trackEvent } = useAnalytics();
 
 	const isAddNewPipelineVisible = useMemo(
 		() => checkDataLength(pipelineData?.pipelines),
@@ -26,7 +25,7 @@ function CreatePipelineButton({
 	const onEnterEditMode = (): void => {
 		setActionMode(ActionMode.Editing);
 
-		trackEvent('Logs: Pipelines: Entered Edit Mode', {
+		logEvent('Logs: Pipelines: Entered Edit Mode', {
 			source: 'signoz-ui',
 		});
 	};
@@ -34,7 +33,7 @@ function CreatePipelineButton({
 		setActionMode(ActionMode.Editing);
 		setActionType(ActionType.AddPipeline);
 
-		trackEvent('Logs: Pipelines: Clicked Add New Pipeline', {
+		logEvent('Logs: Pipelines: Clicked Add New Pipeline', {
 			source: 'signoz-ui',
 		});
 	};

frontend/src/container/PipelinePage/PipelineListsView/PipelineExpandView.tsx

@@ -1,6 +1,6 @@
 import { PlusCircleOutlined } from '@ant-design/icons';
 import { TableLocale } from 'antd/es/table/interface';
-import useAnalytics from 'hooks/analytics/useAnalytics';
+import logEvent from 'api/common/logEvent';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import React, { useCallback, useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
@@ -39,7 +39,6 @@ function PipelineExpandView({
 }: PipelineExpandViewProps): JSX.Element {
 	const { t } = useTranslation(['pipeline']);
 	const isDarkMode = useIsDarkMode();
-	const { trackEvent } = useAnalytics();
 	const isEditingActionMode = isActionMode === ActionMode.Editing;
 
 	const deleteProcessorHandler = useCallback(
@@ -192,7 +191,7 @@ function PipelineExpandView({
 	const addNewProcessorHandler = useCallback((): void => {
 		setActionType(ActionType.AddProcessor);
 
-		trackEvent('Logs: Pipelines: Clicked Add New Processor', {
+		logEvent('Logs: Pipelines: Clicked Add New Processor', {
 			source: 'signoz-ui',
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx

@@ -5,7 +5,6 @@ import { Card, Modal, Table, Typography } from 'antd';
 import { ExpandableConfig } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import savePipeline from 'api/pipeline/post';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useNotifications } from 'hooks/useNotifications';
 import { isUndefined } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
@@ -100,7 +99,6 @@ function PipelineListsView({
 	const [modal, contextHolder] = Modal.useModal();
 	const { notifications } = useNotifications();
 	const [pipelineSearchValue, setPipelineSearchValue] = useState<string>('');
-	const { trackEvent } = useAnalytics();
 	const [prevPipelineData, setPrevPipelineData] = useState<Array<PipelineData>>(
 		cloneDeep(pipelineData?.pipelines || []),
 	);
@@ -376,7 +374,7 @@ function PipelineListsView({
 	const addNewPipelineHandler = useCallback((): void => {
 		setActionType(ActionType.AddPipeline);
 
-		trackEvent('Logs: Pipelines: Clicked Add New Pipeline', {
+		logEvent('Logs: Pipelines: Clicked Add New Pipeline', {
 			source: 'signoz-ui',
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -415,7 +413,7 @@ function PipelineListsView({
 			setCurrPipelineData(pipelinesInDB);
 			setPrevPipelineData(pipelinesInDB);
 
-			trackEvent('Logs: Pipelines: Saved Pipelines', {
+			logEvent('Logs: Pipelines: Saved Pipelines', {
 				count: pipelinesInDB.length,
 				enabled: pipelinesInDB.filter((p) => p.enabled).length,
 				source: 'signoz-ui',

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx

@@ -1,15 +1,13 @@
 import { EyeFilled } from '@ant-design/icons';
 import { Divider, Modal } from 'antd';
+import logEvent from 'api/common/logEvent';
 import PipelineProcessingPreview from 'container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useState } from 'react';
 import { PipelineData } from 'types/api/pipeline/def';
 
 import { iconStyle } from '../../../config';
 
 function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null {
-	const { trackEvent } = useAnalytics();
-
 	const [previewKey, setPreviewKey] = useState<string | null>(null);
 	const isModalOpen = Boolean(previewKey);
 
@@ -23,7 +21,7 @@ function PreviewAction({ pipeline }: PreviewActionProps): JSX.Element | null {
 
 	const onOpenPreview = (): void => {
 		openModal();
-		trackEvent('Logs: Pipelines: Clicked Preview Pipeline', {
+		logEvent('Logs: Pipelines: Clicked Preview Pipeline', {
 			source: 'signoz-ui',
 		});
 	};

frontend/src/container/PipelinePage/tests/CreatePipelineButton.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import logEvent from 'api/common/logEvent';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -9,14 +10,7 @@ import store from 'store';
 import CreatePipelineButton from '../Layouts/Pipeline/CreatePipelineButton';
 import { pipelineApiResponseMockData } from '../mocks/pipeline';
 
-const trackEventVar = jest.fn();
-jest.mock('hooks/analytics/useAnalytics', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		trackEvent: trackEventVar,
-		trackPageView: jest.fn(),
-	})),
-}));
+jest.mock('api/common/logEvent');
 
 describe('PipelinePage container test', () => {
 	it('should render CreatePipelineButton section', async () => {
@@ -58,7 +52,7 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(trackEventVar).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', {
+		expect(logEvent).toBeCalledWith('Logs: Pipelines: Entered Edit Mode', {
 			source: 'signoz-ui',
 		});
 	});
@@ -83,11 +77,8 @@ describe('PipelinePage container test', () => {
 		expect(editButton).toBeInTheDocument();
 		await userEvent.click(editButton);
 
-		expect(trackEventVar).toBeCalledWith(
-			'Logs: Pipelines: Clicked Add New Pipeline',
-			{
+		expect(logEvent).toBeCalledWith('Logs: Pipelines: Clicked Add New Pipeline', {
 			source: 'signoz-ui',
-			},
-		);
+		});
 	});
 });

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx

@@ -4,7 +4,6 @@ import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
 import { useEffect, useState } from 'react';
 
@@ -18,8 +17,6 @@ function Configure(props: ConfigurationProps): JSX.Element {
 	const { configuration, integrationId } = props;
 	const [selectedConfigStep, setSelectedConfigStep] = useState(0);
 
-	const { trackEvent } = useAnalytics();
-
 	const handleMenuClick = (index: number, config: any): void => {
 		setSelectedConfigStep(index);
 		logEvent('Integrations Detail Page: Configure tab', {
@@ -29,7 +26,7 @@ function Configure(props: ConfigurationProps): JSX.Element {
 	};
 
 	useEffect(() => {
-		trackEvent(
+		logEvent(
 			INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION,
 			{
 				integration: integrationId,

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx

@@ -2,12 +2,12 @@
 import './IntegrationDetailPage.styles.scss';
 
 import { Button, Modal, Tooltip, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import installIntegration from 'api/Integrations/installIntegration';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import cx from 'classnames';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import dayjs from 'dayjs';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowLeftRight, Check } from 'lucide-react';
 import { useState } from 'react';
@@ -43,8 +43,6 @@ function IntegrationDetailHeader(
 	} = props;
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
-	const { trackEvent } = useAnalytics();
-
 	const { notifications } = useNotifications();
 
 	const showModal = (): void => {
@@ -137,11 +135,11 @@ function IntegrationDetailHeader(
 					disabled={isInstallLoading}
 					onClick={(): void => {
 						if (connectionState === ConnectionStates.NotInstalled) {
-							trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, {
+							logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_CONNECT, {
 								integration: id,
 							});
 						} else {
-							trackEvent(
+							logEvent(
 								INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_TEST_CONNECTION,
 								{
 									integration: id,

frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationsUninstallBar.tsx

@@ -1,9 +1,9 @@
 import './IntegrationDetailPage.styles.scss';
 
 import { Button, Modal, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import unInstallIntegration from 'api/Integrations/uninstallIntegration';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useNotifications } from 'hooks/useNotifications';
 import { X } from 'lucide-react';
 import { useState } from 'react';
@@ -30,8 +30,6 @@ function IntergrationsUninstallBar(
 	const { notifications } = useNotifications();
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
-	const { trackEvent } = useAnalytics();
-
 	const {
 		mutate: uninstallIntegration,
 		isLoading: isUninstallLoading,
@@ -52,7 +50,7 @@ function IntergrationsUninstallBar(
 	};
 
 	const handleOk = (): void => {
-		trackEvent(
+		logEvent(
 			INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_DETAIL_REMOVE_INTEGRATION,
 			{
 				integration: integrationId,

frontend/src/pages/Integrations/Integrations.tsx

@@ -1,6 +1,6 @@
 import './Integrations.styles.scss';
 
-import useAnalytics from 'hooks/analytics/useAnalytics';
+import logEvent from 'api/common/logEvent';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -16,8 +16,6 @@ function Integrations(): JSX.Element {
 	const history = useHistory();
 	const location = useLocation();
 
-	const { trackEvent } = useAnalytics();
-
 	const selectedIntegration = useMemo(() => urlQuery.get('integration'), [
 		urlQuery,
 	]);
@@ -25,7 +23,7 @@ function Integrations(): JSX.Element {
 	const setSelectedIntegration = useCallback(
 		(integration: string | null) => {
 			if (integration) {
-				trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, {
+				logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_ITEM_LIST_CLICKED, {
 					integration,
 				});
 				urlQuery.set('integration', integration);
@@ -35,7 +33,7 @@ function Integrations(): JSX.Element {
 			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 			history.push(generatedUrl);
 		},
-		[history, location.pathname, trackEvent, urlQuery],
+		[history, location.pathname, urlQuery],
 	);
 
 	const [activeDetailTab, setActiveDetailTab] = useState<string | null>(
@@ -43,7 +41,7 @@ function Integrations(): JSX.Element {
 	);
 
 	useEffect(() => {
-		trackEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED);
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATIONS_LIST_VISITED, {});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

frontend/src/pages/SignUp/SignUp.tsx

@@ -1,4 +1,5 @@
 import { Button, Form, Input, Space, Switch, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import editOrg from 'api/user/editOrg';
 import getInviteDetails from 'api/user/getInviteDetails';
 import loginApi from 'api/user/login';
@@ -7,7 +8,6 @@ import afterLogin from 'AppRoutes/utils';
 import WelcomeLeftContainer from 'components/WelcomeLeftContainer';
 import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import useFeatureFlag from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
@@ -57,7 +57,6 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 		false,
 	);
 	const { search } = useLocation();
-	const { trackEvent } = useAnalytics();
 	const params = new URLSearchParams(search);
 	const token = params.get('token');
 	const [isDetailsDisable, setIsDetailsDisable] = useState<boolean>(false);
@@ -88,7 +87,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 			form.setFieldValue('organizationName', responseDetails.organization);
 			setIsDetailsDisable(true);
 
-			trackEvent('Account Creation Page Visited', {
+			logEvent('Account Creation Page Visited', {
 				email: responseDetails.email,
 				name: responseDetails.name,
 				company_name: responseDetails.organization,
@@ -241,7 +240,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 				setLoading(true);
 
 				if (!isPasswordValid(values.password)) {
-					trackEvent('Account Creation Page - Invalid Password', {
+					logEvent('Account Creation Page - Invalid Password', {
 						email: values.email,
 						name: values.firstName,
 					});
@@ -253,7 +252,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 				if (isPreferenceVisible) {
 					await commonHandler(values, onAdminAfterLogin);
 				} else {
-					trackEvent('Account Created Successfully', {
+					logEvent('Account Created Successfully', {
 						email: values.email,
 						name: values.firstName,
 					});

frontend/src/pages/Support/Support.tsx

@@ -1,7 +1,7 @@
 import './Support.styles.scss';
 
 import { Button, Card, Typography } from 'antd';
-import useAnalytics from 'hooks/analytics/useAnalytics';
+import logEvent from 'api/common/logEvent';
 import {
 	Book,
 	Cable,
@@ -85,7 +85,6 @@ const supportChannels = [
 ];
 
 export default function Support(): JSX.Element {
-	const { trackEvent } = useAnalytics();
 	const history = useHistory();
 
 	const handleChannelWithRedirects = (url: string): void => {
@@ -97,7 +96,7 @@ export default function Support(): JSX.Element {
 			const histroyState = history?.location?.state as any;
 
 			if (histroyState && histroyState?.from) {
-				trackEvent(`Support : From URL : ${histroyState.from}`);
+				logEvent(`Support : From URL : ${histroyState.from}`, {});
 			}
 		}
 
@@ -129,7 +128,7 @@ export default function Support(): JSX.Element {
 	};
 
 	const handleChannelClick = (channel: Channel): void => {
-		trackEvent(`Support : ${channel.name}`);
+		logEvent(`Support : ${channel.name}`, {});
 
 		switch (channel.key) {
 			case channelsMap.documentation:

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -8,10 +8,10 @@ import {
 } from '@ant-design/icons';
 import { Button, Card, Skeleton, Typography } from 'antd';
 import updateCreditCardApi from 'api/billing/checkout';
+import logEvent from 'api/common/logEvent';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import ROUTES from 'constants/routes';
 import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
-import useAnalytics from 'hooks/analytics/useAnalytics';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
@@ -27,7 +27,6 @@ export default function WorkspaceBlocked(): JSX.Element {
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const isAdmin = role === 'ADMIN';
 	const [activeLicense, setActiveLicense] = useState<License | null>(null);
-	const { trackEvent } = useAnalytics();
 
 	const { notifications } = useNotifications();
 
@@ -74,7 +73,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	);
 
 	const handleUpdateCreditCard = useCallback(async () => {
-		trackEvent('Workspace Blocked: User Clicked Update Credit Card');
+		logEvent('Workspace Blocked: User Clicked Update Credit Card', {});
 
 		updateCreditCard({
 			licenseKey: activeLicense?.key || '',
@@ -85,7 +84,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	}, [activeLicense?.key, updateCreditCard]);
 
 	const handleExtendTrial = (): void => {
-		trackEvent('Workspace Blocked: User Clicked Extend Trial');
+		logEvent('Workspace Blocked: User Clicked Extend Trial', {});
 
 		notifications.info({
 			message: 'Extend Trial',