From aa1e32a7c9f0d9a85169654de155ea5a38a23cdb Mon Sep 17 00:00:00 2001
From: vamsikrishnamathala <matalav55@gmail.com>
Date: Tue, 1 Jul 2025 17:16:32 +0530
Subject: [PATCH] refactor: added tracker elements for buttons

---
 packages/constants/src/event-tracker/core.ts  |  47 ++++++
 .../[projectId]/cycles/(detail)/header.tsx    |   5 +-
 .../[projectId]/modules/(detail)/header.tsx   |   5 +-
 .../views/(detail)/[viewId]/header.tsx        |   6 +-
 web/ce/components/issues/header.tsx           |   6 +-
 web/ce/helpers/command-palette.ts             |   7 +-
 .../components/inbox/content/issue-root.tsx   |  55 +++----
 .../inbox/modals/create-modal/create-root.tsx |  22 +--
 .../attachments/helper.tsx                    |  48 +++---
 .../issue-detail-widgets/relations/helper.tsx |  42 ++---
 .../issue-detail-widgets/sub-issues/helper.ts |  78 ++++-----
 .../issue-detail-quick-actions.tsx            |  31 ++--
 .../components/issues/issue-detail/root.tsx   | 143 +++++-----------
 .../issue-layouts/empty-states/cycle.tsx      |  14 +-
 .../empty-states/global-view.tsx              |  10 +-
 .../issue-layouts/empty-states/module.tsx     |  14 +-
 .../empty-states/project-issues.tsx           |  14 +-
 .../empty-states/project-view.tsx             |  14 +-
 .../issue-layouts/kanban/base-kanban-root.tsx |  13 +-
 .../properties/all-properties.tsx             |  89 +++-------
 .../quick-action-dropdowns/all-issue.tsx      |  17 +-
 .../quick-action-dropdowns/archived-issue.tsx |  20 ++-
 .../quick-action-dropdowns/cycle-issue.tsx    |  23 ++-
 .../quick-action-dropdowns/draft-issue.tsx    |  21 ++-
 .../quick-action-dropdowns/module-issue.tsx   |  22 ++-
 .../quick-action-dropdowns/project-issue.tsx  |  23 ++-
 .../issues/issue-layouts/quick-add/root.tsx   |  20 +--
 .../spreadsheet/columns/cycle-column.tsx      |  19 +--
 .../spreadsheet/columns/module-column.tsx     |  19 +--
 .../spreadsheet/issue-column.tsx              |  19 +--
 .../components/issues/issue-modal/base.tsx    |  29 ++--
 .../issues/issue-modal/draft-issue-layout.tsx |  26 ++-
 .../components/issues/peek-overview/root.tsx  | 155 ++++++------------
 33 files changed, 494 insertions(+), 582 deletions(-)

diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts
index 238db14b0fe..b6069eea1e8 100644
--- a/packages/constants/src/event-tracker/core.ts
+++ b/packages/constants/src/event-tracker/core.ts
@@ -169,8 +169,55 @@ export const WORK_ITEM_TRACKER_EVENTS = {
   delete: "work_item_deleted",
   archive: "work_item_archived",
   restore: "work_item_restored",
+  attachment: {
+    add: "work_item_attachment_added",
+    remove: "work_item_attachment_removed",
+  },
+  sub_issue: {
+    update: "sub_issue_updated",
+    remove: "sub_issue_removed",
+    delete: "sub_issue_deleted",
+  },
+  draft: {
+    create: "draft_work_item_created",
+  }
 };
 
+export const WORK_ITEM_TRACKER_ELEMENTS = {
+  HEADER_ADD_BUTTON: {
+    WORK_ITEMS: "work_items_header_add_work_item_button",
+    PROJECT_VIEW: "project_view_header_add_work_item_button",
+    CYCLE: "cycle_header_add_work_item_button",
+    MODULE: "module_header_add_work_item_button",
+  },
+  COMMAND_PALETTE_ADD_ITEM: "command_palette_add_work_item_item",
+  EMPTY_STATE_ADD_BUTTON: {
+    WORK_ITEMS: "work_items_empty_state_add_work_item_button",
+    PROJECT_VIEW: "project_view_empty_state_add_work_item_button",
+    CYCLE: "cycle_empty_state_add_work_item_button",
+    MODULE: "module_empty_state_add_work_item_button",
+    GLOBAL_VIEW: "global_view_empty_state_add_work_item_button",
+  },
+  QUICK_ACTIONS: {
+    WORK_ITEMS: "work_items_quick_actions",
+    PROJECT_VIEW: "project_view_work_items_quick_actions",
+    CYCLE: "cycle_work_items_quick_actions",
+    MODULE: "module_work_items_quick_actions",
+    GLOBAL_VIEW: "global_view_work_items_quick_actions",
+    ARCHIVED: "archived_work_items_quick_actions",
+    DRAFT: "draft_work_items_quick_actions",
+  },
+  CONTEXT_MENU: {
+    WORK_ITEMS: "work_items_context_menu",
+    PROJECT_VIEW: "project_view_context_menu",
+    CYCLE: "cycle_context_menu",
+    MODULE: "module_context_menu",
+    GLOBAL_VIEW: "global_view_context_menu",
+    ARCHIVED: "archived_context_menu",
+    DRAFT: "draft_context_menu",
+  },
+} as const;
+
 export const STATE_TRACKER_EVENTS = {
   create: "state_created",
   update: "state_updated",
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 5844c661bd0..9da6ca88992 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -14,6 +14,7 @@ import {
   EUserPermissionsLevel,
   EProjectFeatureKey,
   ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
@@ -34,7 +35,6 @@ import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelect
 import {
   useCommandPalette,
   useCycle,
-  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -68,7 +68,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   } = useIssues(EIssuesStoreType.CYCLE);
   const { currentProjectCycleIds, getCycleById } = useCycle();
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { currentProjectDetails, loader } = useProject();
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
@@ -263,9 +262,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                   <Button
                     className="h-full self-start"
                     onClick={() => {
-                      setTrackElement("Cycle work items page");
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
+                    data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.CYCLE}
                     size="sm"
                   >
                     {t("issue.add.label")}
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 4ec808d7aad..c5c24565da7 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -14,6 +14,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
   EProjectFeatureKey,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import {
   ICustomSearchSelectOption,
@@ -31,7 +32,6 @@ import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelect
 import { ModuleQuickActions } from "@/components/modules";
 // hooks
 import {
-  useEventTracker,
   useLabel,
   useMember,
   useModule,
@@ -66,7 +66,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const { updateFilters } = useIssuesActions(EIssuesStoreType.MODULE);
   const { projectModuleIds, getModuleById } = useModule();
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { currentProjectDetails, loader } = useProject();
   const { projectLabels } = useLabel();
@@ -259,9 +258,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               <Button
                 className="hidden sm:flex"
                 onClick={() => {
-                  setTrackElement("Module work items page");
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
+                data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.MODULE}
                 size="sm"
               >
                 Add work item
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 8e69ef88854..690f1888408 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -14,6 +14,7 @@ import {
   EUserPermissions,
   EUserPermissionsLevel,
   EProjectFeatureKey,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 // types
 import {
@@ -30,11 +31,9 @@ import { SwitcherIcon, SwitcherLabel } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
 import { ViewQuickActions } from "@/components/views";
-// helpers
 // hooks
 import {
   useCommandPalette,
-  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -57,7 +56,6 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
-  const { setTrackElement } = useEventTracker();
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
 
@@ -258,9 +256,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         {canUserCreateIssue ? (
           <Button
             onClick={() => {
-              setTrackElement("PROJECT_VIEW_PAGE_HEADER");
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
             }}
+            data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.PROJECT_VIEW}
             size="sm"
           >
             Add work item
diff --git a/web/ce/components/issues/header.tsx b/web/ce/components/issues/header.tsx
index 3250ad4d5eb..a64565b0263 100644
--- a/web/ce/components/issues/header.tsx
+++ b/web/ce/components/issues/header.tsx
@@ -11,6 +11,7 @@ import {
   EUserPermissionsLevel,
   SPACE_BASE_PATH,
   SPACE_BASE_URL,
+  WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 // plane constants
 import { useTranslation } from "@plane/i18n";
@@ -22,7 +23,7 @@ import { CountChip } from "@/components/common";
 import HeaderFilters from "@/components/issues/filters";
 // helpers
 // hooks
-import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
+import { useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -43,7 +44,6 @@ export const IssuesHeader = observer(() => {
   const { currentProjectDetails, loader } = useProject();
 
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { isMobile } = usePlatformOS();
 
@@ -105,9 +105,9 @@ export const IssuesHeader = observer(() => {
         {canUserCreateIssue ? (
           <Button
             onClick={() => {
-              setTrackElement("Project work items page");
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
+            data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.WORK_ITEMS}
             size="sm"
           >
             <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
diff --git a/web/ce/helpers/command-palette.ts b/web/ce/helpers/command-palette.ts
index f10b2d979b3..a5b6dca17a1 100644
--- a/web/ce/helpers/command-palette.ts
+++ b/web/ce/helpers/command-palette.ts
@@ -1,5 +1,5 @@
 // types
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
 // store
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -12,7 +12,10 @@ export const getGlobalShortcutsList: () => TCommandPaletteActionList = () => {
     c: {
       title: "Create a new work item",
       description: "Create a new work item in the current project",
-      action: () => toggleCreateIssueModal(true),
+      action: () => {
+        toggleCreateIssueModal(true);
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
+      },
     },
   };
 };
diff --git a/web/core/components/inbox/content/issue-root.tsx b/web/core/components/inbox/content/issue-root.tsx
index 7f6558cbb6f..d44ec58592a 100644
--- a/web/core/components/inbox/content/issue-root.tsx
+++ b/web/core/components/inbox/content/issue-root.tsx
@@ -2,7 +2,6 @@
 
 import { Dispatch, SetStateAction, useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 // plane imports
 import { EInboxIssueSource, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
@@ -22,7 +21,8 @@ import {
 } from "@/components/issues";
 // helpers
 // hooks
-import { useEventTracker, useIssueDetail, useMember, useProject, useProjectInbox, useUser } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useIssueDetail, useMember, useProject, useProjectInbox, useUser } from "@/hooks/store";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // store types
 import { DeDupeIssuePopoverRoot } from "@/plane-web/components/de-dupe";
@@ -45,8 +45,6 @@ type Props = {
 
 export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props;
-  // navigation
-  const pathname = usePathname();
   // refs
   const editorRef = useRef<EditorRefApi>(null);
   // store hooks
@@ -57,8 +55,6 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const { removeIssue, archiveIssue } = useIssueDetail();
   // reload confirmation
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
-  // event tracker
-  const { captureIssueEvent } = useEventTracker();
 
   useEffect(() => {
     if (isSubmitting === "submitted") {
@@ -104,10 +100,9 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             type: TOAST_TYPE.SUCCESS,
             message: "Work item deleted successfully",
           });
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: _issueId, state: "SUCCESS", element: "Work item detail page" },
-            path: pathname,
+            payload: { id: _issueId },
           });
         } catch (error) {
           console.log("Error in deleting work item:", error);
@@ -116,56 +111,46 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             type: TOAST_TYPE.ERROR,
             message: "Work item delete failed",
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: _issueId, state: "FAILED", element: "Work item detail page" },
-            path: pathname,
+            payload: { id: _issueId },
+            error: error as Error,
           });
         }
       },
       update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial<TIssue>) => {
         try {
           await inboxIssue.updateIssue(data);
-          captureIssueEvent({
-            eventName: "Inbox work item updated",
-            payload: { ...data, state: "SUCCESS", element: "Inbox" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+          captureSuccess({
+            eventName: WORK_ITEM_TRACKER_EVENTS.update,
+            payload: { id: _issueId },
           });
-        } catch {
+        } catch (error) {
           setToast({
             title: "Work item update failed",
             type: TOAST_TYPE.ERROR,
             message: "Work item update failed",
           });
-          captureIssueEvent({
-            eventName: "Inbox work item updated",
-            payload: { state: "SUCCESS", element: "Inbox" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.update,
+            payload: { id: _issueId },
+            error: error as Error,
           });
         }
       },
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "SUCCESS", element: "Work item details page" },
-            path: pathname,
+            payload: { id: issueId },
           });
         } catch (error) {
           console.log("Error in archiving issue:", error);
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "FAILED", element: "Work item details page" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
diff --git a/web/core/components/inbox/modals/create-modal/create-root.tsx b/web/core/components/inbox/modals/create-modal/create-root.tsx
index 923a148e3b5..32dbfc42a93 100644
--- a/web/core/components/inbox/modals/create-modal/create-root.tsx
+++ b/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -2,7 +2,6 @@
 
 import { FC, FormEvent, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 // plane imports
 import { ETabIndices, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
@@ -14,9 +13,9 @@ import { renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
 // components
 import { InboxIssueTitle, InboxIssueDescription, InboxIssueProperties } from "@/components/inbox/modals/create-modal";
 // constants
-// helpers
 // hooks
-import { useEventTracker, useProject, useProjectInbox, useWorkspace } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProject, useProjectInbox, useWorkspace } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import useKeypress from "@/hooks/use-keypress";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -53,14 +52,12 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
   const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
   // router
   const router = useAppRouter();
-  const pathname = usePathname();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);
   const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   const formRef = useRef<HTMLFormElement | null>(null);
   const modalContainerRef = useRef<HTMLDivElement | null>(null);
   // hooks
-  const { captureIssueEvent } = useEventTracker();
   const { createInboxIssue } = useProjectInbox();
   const { getWorkspaceBySlug } = useWorkspace();
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
@@ -167,14 +164,11 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
           descriptionEditorRef?.current?.clearEditor();
           setFormData(defaultIssueData);
         }
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.create,
           payload: {
-            ...formData,
-            state: "SUCCESS",
-            element: "Inbox page",
+            id: res?.issue?.id,
           },
-          path: pathname,
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -184,14 +178,12 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
       })
       .catch((error) => {
         console.error(error);
-        captureIssueEvent({
+        captureError({
           eventName: WORK_ITEM_TRACKER_EVENTS.create,
           payload: {
-            ...formData,
-            state: "FAILED",
-            element: "Inbox page",
+            id: formData?.id,
           },
-          path: pathname,
+          error: error as Error,
         });
         setToast({
           type: TOAST_TYPE.ERROR,
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx b/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
index 28684ac9986..d5eb8916ace 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { useMemo } from "react";
-import { EIssueServiceType } from "@plane/constants";
+import { EIssueServiceType, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { TIssueServiceType } from "@plane/types";
 // plane ui
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // hooks
-import { useEventTracker, useIssueDetail } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useIssueDetail } from "@/hooks/store";
 // types
 import { TAttachmentUploadStatus } from "@/store/issue/issue-details/attachment.store";
 
@@ -32,7 +33,6 @@ export const useAttachmentOperations = (
   const {
     attachment: { createAttachment, removeAttachment, getAttachmentsUploadStatusByIssueId },
   } = useIssueDetail(issueServiceType);
-  const { captureIssueEvent } = useEventTracker();
 
   const attachmentOperations: TAttachmentOperations = useMemo(
     () => ({
@@ -52,19 +52,16 @@ export const useAttachmentOperations = (
             },
           });
 
-          const res = await attachmentUploadPromise;
-          captureIssueEvent({
-            eventName: "Issue attachment added",
-            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "attachment",
-              change_details: res.id,
-            },
+          await attachmentUploadPromise;
+          captureSuccess({
+            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.add,
+            payload: { id: issueId },
           });
         } catch (error) {
-          captureIssueEvent({
-            eventName: "Issue attachment added",
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.add,
+            payload: { id: issueId },
+            error: error as Error,
           });
           throw error;
         }
@@ -78,22 +75,15 @@ export const useAttachmentOperations = (
             type: TOAST_TYPE.SUCCESS,
             title: "Attachment removed",
           });
-          captureIssueEvent({
-            eventName: "Issue attachment deleted",
-            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "attachment",
-              change_details: "",
-            },
+          captureSuccess({
+            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.remove,
+            payload: { id: issueId },
           });
         } catch (error) {
-          captureIssueEvent({
-            eventName: "Issue attachment deleted",
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: "attachment",
-              change_details: "",
-            },
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.attachment.remove,
+            payload: { id: issueId },
+            error: error as Error,
           });
           setToast({
             message: "The Attachment could not be removed",
@@ -103,7 +93,7 @@ export const useAttachmentOperations = (
         }
       },
     }),
-    [captureIssueEvent, workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
+    [workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
   );
   const attachmentsUploadStatus = getAttachmentsUploadStatusByIssueId(issueId);
 
diff --git a/web/core/components/issues/issue-detail-widgets/relations/helper.tsx b/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
index 6e68be0d469..d0ccf892155 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { useMemo } from "react";
-import { usePathname } from "next/navigation";
 // plane imports
 import { EIssueServiceType, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -8,7 +7,8 @@ import { TIssue, TIssueServiceType } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { copyUrlToClipboard } from "@plane/utils";
 // hooks
-import { useEventTracker, useIssueDetail } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useIssueDetail } from "@/hooks/store";
 
 export type TRelationIssueOperations = {
   copyLink: (path: string) => void;
@@ -20,8 +20,6 @@ export const useRelationOperations = (
   issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
 ): TRelationIssueOperations => {
   const { updateIssue, removeIssue } = useIssueDetail(issueServiceType);
-  const { captureIssueEvent } = useEventTracker();
-  const pathname = usePathname();
   const { t } = useTranslation();
   // derived values
   const entityName = issueServiceType === EIssueServiceType.ISSUES ? "Work item" : "Epic";
@@ -40,29 +38,20 @@ export const useRelationOperations = (
       update: async (workspaceSlug, projectId, issueId, data) => {
         try {
           await updateIssue(workspaceSlug, projectId, issueId, data);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { ...data, issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
           setToast({
             title: t("toast.success"),
             type: TOAST_TYPE.SUCCESS,
             message: t("entity.update.success", { entity: entityName }),
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
           setToast({
             title: t("toast.error"),
@@ -74,22 +63,21 @@ export const useRelationOperations = (
       remove: async (workspaceSlug, projectId, issueId) => {
         try {
           return removeIssue(workspaceSlug, projectId, issueId).then(() => {
-            captureIssueEvent({
+            captureSuccess({
               eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-              payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-              path: pathname,
+              payload: { id: issueId },
             });
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
     }),
-    [captureIssueEvent, entityName, pathname, removeIssue, t, updateIssue]
+    [entityName, removeIssue, t, updateIssue]
   );
 
   return issueOperations;
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts b/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
index 564e72c0531..adea4d3fb94 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
@@ -1,22 +1,22 @@
 "use client";
 
 import { useMemo } from "react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 // plane imports
-import { EIssueServiceType } from "@plane/constants";
+import { EIssueServiceType, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { copyUrlToClipboard } from "@plane/utils";
 // hooks
-import { useEventTracker, useIssueDetail, useProjectState } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useIssueDetail, useProjectState } from "@/hooks/store";
 // plane web helpers
 import { updateEpicAnalytics } from "@/plane-web/helpers/epic-analytics";
 
 export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSubIssueOperations => {
   // router
   const { epicId: epicIdParam } = useParams();
-  const pathname = usePathname();
   // translation
   const { t } = useTranslation();
   // store hooks
@@ -33,7 +33,6 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
   const { peekIssue: epicPeekIssue } = useIssueDetail(EIssueServiceType.EPICS);
   // const { updateEpicAnalytics } = useIssueTypes();
   const { updateAnalytics } = updateEpicAnalytics();
-  const { captureIssueEvent } = useEventTracker();
 
   // derived values
   const epicId = epicIdParam || epicPeekIssue?.issueId;
@@ -129,14 +128,9 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
               }
             }
           }
-          captureIssueEvent({
-            eventName: "Sub-issue updated",
-            payload: { ...oldIssue, ...issueData, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: Object.keys(issueData).join(","),
-              change_details: Object.values(issueData).join(","),
-            },
-            path: pathname,
+          captureSuccess({
+            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.update,
+            payload: { id: issueId, parent_id: parentIssueId },
           });
           setToast({
             type: TOAST_TYPE.SUCCESS,
@@ -144,15 +138,11 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
             message: t("sub_work_item.update.success"),
           });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-        } catch {
-          captureIssueEvent({
-            eventName: "Sub-issue updated",
-            payload: { ...oldIssue, ...issueData, state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: Object.keys(issueData).join(","),
-              change_details: Object.values(issueData).join(","),
-            },
-            path: pathname,
+        } catch (error) {
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.update,
+            payload: { id: issueId, parent_id: parentIssueId },
+            error: error as Error,
           });
           setToast({
             type: TOAST_TYPE.ERROR,
@@ -180,25 +170,16 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
             title: t("toast.success"),
             message: t("sub_work_item.remove.success"),
           });
-          captureIssueEvent({
-            eventName: "Sub-issue removed",
-            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "parent_id",
-              change_details: parentIssueId,
-            },
-            path: pathname,
+          captureSuccess({
+            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.remove,
+            payload: { id: issueId, parent_id: parentIssueId },
           });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
-        } catch {
-          captureIssueEvent({
-            eventName: "Sub-issue removed",
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: "parent_id",
-              change_details: parentIssueId,
-            },
-            path: pathname,
+        } catch (error) {
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.remove,
+            payload: { id: issueId, parent_id: parentIssueId },
+            error: error as Error,
           });
           setToast({
             type: TOAST_TYPE.ERROR,
@@ -211,18 +192,17 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           return deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId).then(() => {
-            captureIssueEvent({
-              eventName: "Sub-issue deleted",
-              payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-              path: pathname,
+            captureSuccess({
+              eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.delete,
+              payload: { id: issueId, parent_id: parentIssueId },
             });
             setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           });
-        } catch {
-          captureIssueEvent({
-            eventName: "Sub-issue removed",
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
-            path: pathname,
+        } catch (error) {
+          captureError({
+            eventName: WORK_ITEM_TRACKER_EVENTS.sub_issue.delete,
+            payload: { id: issueId, parent_id: parentIssueId },
+            error: error as Error,
           });
           setToast({
             type: TOAST_TYPE.ERROR,
@@ -233,7 +213,6 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
       },
     }),
     [
-      captureIssueEvent,
       createSubIssues,
       deleteSubIssue,
       epicId,
@@ -241,7 +220,6 @@ export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSub
       getIssueById,
       getStateById,
       issueServiceType,
-      pathname,
       removeSubIssue,
       setSubIssueHelpers,
       t,
diff --git a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
index 4be7686c2ca..3a30c6041db 100644
--- a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -2,7 +2,6 @@
 
 import React, { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 import { ArchiveIcon, ArchiveRestoreIcon, LinkIcon, Trash2 } from "lucide-react";
 import {
   ARCHIVABLE_STATE_GROUPS,
@@ -18,8 +17,8 @@ import { cn, generateWorkItemLink, copyTextToClipboard } from "@plane/utils";
 import { ArchiveIssueModal, DeleteIssueModal, IssueSubscription } from "@/components/issues";
 // helpers
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import {
-  useEventTracker,
   useIssueDetail,
   useIssues,
   useProject,
@@ -64,8 +63,6 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
   const {
     issues: { removeIssue: removeArchivedIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const { captureIssueEvent } = useEventTracker();
-  const pathname = usePathname();
 
   // derived values
   const issue = getIssueById(issueId);
@@ -103,22 +100,21 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
 
       return deleteIssue(workspaceSlug, projectId, issueId).then(() => {
         router.push(redirectionPath);
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-          payload: { id: issueId, state: "SUCCESS", element: "Work item detail page" },
-          path: pathname,
+          payload: { id: issueId },
         });
       });
-    } catch {
+    } catch (error) {
       setToast({
         title: t("toast.error "),
         type: TOAST_TYPE.ERROR,
         message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
       });
-      captureIssueEvent({
+      captureError({
         eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-        payload: { id: issueId, state: "FAILED", element: "Work item detail page" },
-        path: pathname,
+        payload: { id: issueId },
+        error: error as Error,
       });
     }
   };
@@ -128,16 +124,15 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
       await archiveIssue(workspaceSlug, projectId, issueId).then(() => {
         router.push(`/${workspaceSlug}/projects/${projectId}/archives/issues/${issue.id}`);
       });
-      captureIssueEvent({
+      captureSuccess({
         eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-        payload: { id: issueId, state: "SUCCESS", element: "Issue details page" },
-        path: pathname,
+        payload: { id: issueId },
       });
-    } catch {
-      captureIssueEvent({
+    } catch (error) {
+      captureError({
         eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-        payload: { id: issueId, state: "FAILED", element: "Issue details page" },
-        path: pathname,
+        payload: { id: issueId },
+        error: error as Error,
       });
     }
   };
diff --git a/web/core/components/issues/issue-detail/root.tsx b/web/core/components/issues/issue-detail/root.tsx
index cbd67904590..558d8648233 100644
--- a/web/core/components/issues/issue-detail/root.tsx
+++ b/web/core/components/issues/issue-detail/root.tsx
@@ -2,7 +2,6 @@
 
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 // types
 import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -14,7 +13,8 @@ import { EmptyState } from "@/components/common";
 import { IssueDetailsSidebar, IssuePeekOverview } from "@/components/issues";
 // constants
 // hooks
-import { useAppTheme, useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useAppTheme, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // images
 import emptyIssue from "@/public/empty-state/issue.svg";
@@ -57,7 +57,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
   const { workspaceSlug, projectId, issueId, is_archived = false } = props;
   // router
   const router = useAppRouter();
-  const pathname = usePathname();
   // hooks
   const {
     issue: { getIssueById },
@@ -74,7 +73,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
   const {
     issues: { removeIssue: removeArchivedIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const { captureIssueEvent } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { issueDetailSidebarCollapsed } = useAppTheme();
 
@@ -90,25 +88,16 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
       update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
         try {
           await updateIssue(workspaceSlug, projectId, issueId, data);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { ...data, issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
         } catch (error) {
           console.log("Error in updating issue:", error);
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: Object.keys(data).join(","),
-              change_details: Object.values(data).join(","),
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
           setToast({
             title: t("common.error.label"),
@@ -126,10 +115,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             type: TOAST_TYPE.SUCCESS,
             message: t("entity.delete.success", { entity: t("issue.label") }),
           });
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-            path: pathname,
+            payload: { id: issueId },
           });
         } catch (error) {
           console.log("Error in deleting issue:", error);
@@ -138,85 +126,66 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             type: TOAST_TYPE.ERROR,
             message: t("entity.delete.failed", { entity: t("issue.label") }),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
       archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           await archiveIssue(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue details page" },
-            path: pathname,
+            payload: { id: issueId },
           });
         } catch (error) {
           console.log("Error in archiving issue:", error);
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "FAILED", element: "Issue details page" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
       addCycleToIssue: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
           await addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
+        } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("common.error.label"),
             message: t("issue.add.cycle.failed"),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { ...issueIds, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
+        } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("common.error.label"),
             message: t("issue.add.cycle.failed"),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -235,24 +204,15 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
           });
           await removeFromCyclePromise;
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -271,24 +231,15 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             },
           });
           await removeFromModulePromise;
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-            updates: {
-              changed_property: "module_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
-            updates: {
-              changed_property: "module_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -300,14 +251,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         removeModuleIds: string[]
       ) => {
         const promise = await changeModulesInIssue(workspaceSlug, projectId, issueId, addModuleIds, removeModuleIds);
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-          updates: {
-            changed_property: "module_id",
-            change_details: { addModuleIds, removeModuleIds },
-          },
-          path: pathname,
+          payload: { id: issueId },
         });
         return promise;
       },
@@ -324,9 +270,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
       removeIssueFromCycle,
       changeModulesInIssue,
       removeIssueFromModule,
-      captureIssueEvent,
-      pathname,
       t,
+      issueId,
     ]
   );
 
diff --git a/web/core/components/issues/issue-layouts/empty-states/cycle.tsx b/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
index a29a4f2802f..7557ab5b7e2 100644
--- a/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -6,14 +6,21 @@ import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EUserPermissionsLevel,
+  EUserProjectRoles,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions, ISearchIssueResponse } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "@/components/core";
 import { DetailedEmptyState } from "@/components/empty-state";
-import { useCommandPalette, useCycle, useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useCommandPalette, useCycle, useIssues, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const CycleEmptyState: React.FC = observer(() => {
@@ -27,7 +34,6 @@ export const CycleEmptyState: React.FC = observer(() => {
   const { getCycleById } = useCycle();
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   // derived values
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
@@ -133,7 +139,7 @@ export const CycleEmptyState: React.FC = observer(() => {
             primaryButton={{
               text: t("project_cycles.empty_state.no_issues.primary_button.text"),
               onClick: () => {
-                setTrackElement("Cycle issue empty state");
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.CYCLE });
                 toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
               },
               disabled: !canPerformEmptyStateActions,
diff --git a/web/core/components/issues/issue-layouts/empty-states/global-view.tsx b/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
index 03d4c62ed97..1803f2cf095 100644
--- a/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -1,12 +1,13 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssuesStoreType, EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants";
+import { EIssuesStoreType, EUserPermissionsLevel, EUserWorkspaceRoles, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
 import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useCommandPalette, useProject, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const GlobalViewEmptyState: React.FC = observer(() => {
@@ -16,7 +17,6 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
   // store hooks
   const { workspaceProjectIds } = useProject();
   const { toggleCreateIssueModal, toggleCreateProjectModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   // derived values
   const hasMemberLevelPermission = allowPermissions(
@@ -45,8 +45,8 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
             title={t("workspace_projects.empty_state.no_projects.primary_button.comic.title")}
             description={t("workspace_projects.empty_state.no_projects.primary_button.comic.description")}
             onClick={() => {
-              setTrackElement("All issues empty state");
               toggleCreateProjectModal(true);
+              captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.GLOBAL_VIEW });
             }}
             disabled={!hasMemberLevelPermission}
           />
@@ -66,7 +66,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
           ? {
               text: t(`workspace_views.empty_state.${resolvedCurrentView}.primary_button.text`),
               onClick: () => {
-                setTrackElement("All issues empty state");
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.GLOBAL_VIEW });
                 toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
               },
               disabled: !hasMemberLevelPermission,
diff --git a/web/core/components/issues/issue-layouts/empty-states/module.tsx b/web/core/components/issues/issue-layouts/empty-states/module.tsx
index 55edda7fe36..93c114e93e9 100644
--- a/web/core/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/module.tsx
@@ -5,15 +5,22 @@ import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EUserPermissionsLevel,
+  EUserProjectRoles,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions, ISearchIssueResponse } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "@/components/core";
 import { DetailedEmptyState } from "@/components/empty-state";
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useIssues, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ModuleEmptyState: React.FC = observer(() => {
@@ -26,7 +33,6 @@ export const ModuleEmptyState: React.FC = observer(() => {
   // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   // derived values
   const userFilters = issuesFilter?.issueFilters?.filters;
@@ -119,7 +125,7 @@ export const ModuleEmptyState: React.FC = observer(() => {
             primaryButton={{
               text: t("project_module.empty_state.no_issues.primary_button.text"),
               onClick: () => {
-                setTrackElement("Module issue empty state");
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.MODULE });
                 toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
               },
               disabled: !canPerformEmptyStateActions,
diff --git a/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx b/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
index 109b67c28d8..c21ad6c7e2e 100644
--- a/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -2,13 +2,20 @@ import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EUserPermissionsLevel,
+  EUserProjectRoles,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions } from "@plane/types";
 // components
 import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useIssues, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ProjectEmptyState: React.FC = observer(() => {
@@ -18,7 +25,6 @@ export const ProjectEmptyState: React.FC = observer(() => {
   const { t } = useTranslation();
   // store hooks
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
   const { allowPermissions } = useUserPermissions();
   // derived values
@@ -76,7 +82,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
               title={t("project_issues.empty_state.no_issues.primary_button.comic.title")}
               description={t("project_issues.empty_state.no_issues.primary_button.comic.description")}
               onClick={() => {
-                setTrackElement("Project issue empty state");
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.WORK_ITEMS });
                 toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
               }}
               disabled={!canPerformEmptyStateActions}
diff --git a/web/core/components/issues/issue-layouts/empty-states/project-view.tsx b/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
index dd17604522b..6d0402eaec7 100644
--- a/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -1,18 +1,22 @@
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
 // components
-import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  EIssuesStoreType,
+EUserPermissions,
+  EUserPermissionsLevel,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { EmptyState } from "@/components/common";
-// constants
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useUserPermissions } from "@/hooks/store";
 // assets
 import emptyIssue from "@/public/empty-state/issue.svg";
 
 export const ProjectViewEmptyState: React.FC = observer(() => {
   // store hooks
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
   // auth
@@ -33,7 +37,7 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
                 text: "New work item",
                 icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
                 onClick: () => {
-                  setTrackElement("View work item empty state");
+                  captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.EMPTY_STATE_ADD_BUTTON.PROJECT_VIEW });
                   toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
                 },
               }
diff --git a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index d4b29a35d76..268ae9b3138 100644
--- a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -5,7 +5,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 import {
   EIssueLayoutTypes,
   EIssueServiceType,
@@ -18,7 +18,8 @@ import {
 import { DeleteIssueModal } from "@/components/issues";
 //constants
 //hooks
-import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUserPermissions } from "@/hooks/store";
+import { captureError } from "@/helpers/event-tracker.helper";
+import { useIssueDetail, useIssues, useKanbanView, useUserPermissions } from "@/hooks/store";
 import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
@@ -63,11 +64,9 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   } = props;
   // router
   const { workspaceSlug, projectId } = useParams();
-  const pathname = usePathname();
   // store hooks
   const storeType = useIssueStoreType() as KanbanStoreType;
   const { allowPermissions } = useUserPermissions();
-  const { captureIssueEvent } = useEventTracker();
   const { issueMap, issuesFilter, issues } = useIssues(storeType);
   const {
     issue: { getIssueById },
@@ -209,10 +208,10 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     await removeIssue(draggedIssue.project_id, draggedIssueId).finally(() => {
       setDeleteIssueModal(false);
       setDraggedIssueId(undefined);
-      captureIssueEvent({
+      captureError({
         eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-        payload: { id: draggedIssueId, state: "FAILED", element: "Kanban layout drag & drop" },
-        path: pathname,
+        payload: { id: draggedIssueId },
+        error: new Error("Kanban layout drag & drop"),
       });
     });
   };
diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index dce2b943e96..852c5f5a3dd 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useMemo, SyntheticEvent } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 // icons
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 // types
@@ -34,7 +34,8 @@ import {
 // constants
 // helpers
 // hooks
-import { useEventTracker, useLabel, useIssues, useProjectState, useProject, useProjectEstimates } from "@/hooks/store";
+import { captureSuccess } from "@/helpers/event-tracker.helper";
+import { useLabel, useIssues, useProjectState, useProject, useProjectEstimates } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -55,13 +56,12 @@ export interface IIssueProperties {
 }
 
 export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
-  const { issue, updateIssue, displayProperties, activeLayout, isReadOnly, className, isEpic = false } = props;
+  const { issue, updateIssue, displayProperties, isReadOnly, className, isEpic = false } = props;
   // i18n
   const { t } = useTranslation();
   // store hooks
   const { getProjectById } = useProject();
   const { labelMap } = useLabel();
-  const { captureIssueEvent } = useEventTracker();
   const storeType = useIssueStoreType();
   const {
     issues: { changeModulesInIssue },
@@ -77,9 +77,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   // router
   const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
-  const pathname = usePathname();
 
-  const currentLayout = `${activeLayout} layout`;
   // derived values
   const stateDetails = getStateById(issue.state_id);
   const subIssueCount = issue?.sub_issues_count ?? 0;
@@ -109,14 +107,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleState = (stateId: string) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { state_id: stateId }).then(() => {
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { ...issue, state: "SUCCESS", element: currentLayout },
-          path: pathname,
-          updates: {
-            changed_property: "state",
-            change_details: stateId,
-          },
+          payload: { id: issue.id },
         });
       });
   };
@@ -124,14 +117,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handlePriority = (value: TIssuePriorities) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { priority: value }).then(() => {
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { ...issue, state: "SUCCESS", element: currentLayout },
-          path: pathname,
-          updates: {
-            changed_property: "priority",
-            change_details: value,
-          },
+          payload: { id: issue.id },
         });
       });
   };
@@ -139,14 +127,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleLabel = (ids: string[]) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { label_ids: ids }).then(() => {
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { ...issue, state: "SUCCESS", element: currentLayout },
-          path: pathname,
-          updates: {
-            changed_property: "labels",
-            change_details: ids,
-          },
+          payload: { id: issue.id },
         });
       });
   };
@@ -154,14 +137,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleAssignee = (ids: string[]) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { assignee_ids: ids }).then(() => {
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { ...issue, state: "SUCCESS", element: currentLayout },
-          path: pathname,
-          updates: {
-            changed_property: "assignees",
-            change_details: ids,
-          },
+          payload: { id: issue.id },
         });
       });
   };
@@ -179,14 +157,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       if (modulesToAdd.length > 0) issueOperations.addModulesToIssue(modulesToAdd);
       if (modulesToRemove.length > 0) issueOperations.removeModulesFromIssue(modulesToRemove);
 
-      captureIssueEvent({
+      captureSuccess({
         eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: pathname,
-        updates: { changed_property: "module_ids", change_details: { module_ids: moduleIds } },
+        payload: { id: issue.id },
       });
     },
-    [issueOperations, captureIssueEvent, currentLayout, pathname, issue]
+    [issueOperations, issue]
   );
 
   const handleCycle = useCallback(
@@ -195,28 +171,21 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       if (cycleId) issueOperations.addIssueToCycle?.(cycleId);
       else issueOperations.removeIssueFromCycle?.();
 
-      captureIssueEvent({
+      captureSuccess({
         eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { ...issue, state: "SUCCESS", element: currentLayout },
-        path: pathname,
-        updates: { changed_property: "cycle", change_details: { cycle_id: cycleId } },
+        payload: { id: issue.id },
       });
     },
-    [issue, issueOperations, captureIssueEvent, currentLayout, pathname]
+    [issue, issueOperations]
   );
 
   const handleStartDate = (date: Date | null) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null }).then(
         () => {
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { ...issue, state: "SUCCESS", element: currentLayout },
-            path: pathname,
-            updates: {
-              changed_property: "start_date",
-              change_details: date ? renderFormattedPayloadDate(date) : null,
-            },
+            payload: { id: issue.id },
           });
         }
       );
@@ -226,14 +195,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null }).then(
         () => {
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { ...issue, state: "SUCCESS", element: currentLayout },
-            path: pathname,
-            updates: {
-              changed_property: "target_date",
-              change_details: date ? renderFormattedPayloadDate(date) : null,
-            },
+            payload: { id: issue.id },
           });
         }
       );
@@ -242,14 +206,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const handleEstimate = (value: string | undefined) => {
     if (updateIssue)
       updateIssue(issue.project_id, issue.id, { estimate_point: value }).then(() => {
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { ...issue, state: "SUCCESS", element: currentLayout },
-          path: pathname,
-          updates: {
-            changed_property: "estimate_point",
-            change_details: value,
-          },
+          payload: { id: issue.id },
         });
       });
   };
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index d3524559df9..3a26c0a617f 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -5,13 +5,14 @@ import omit from "lodash/omit";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType } from "@plane/constants";
+import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, WORK_ITEM_TRACKER_ELEMENTS } from "@plane/constants";
 import { TIssue } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useEventTracker, useProject, useProjectState } from "@/hooks/store";
 // plane-web components
 import { DuplicateWorkItemModal } from "@/plane-web/components/issues/issue-layouts/quick-action-dropdowns";
@@ -84,6 +85,14 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
 
   const MENU_ITEMS = useAllIssueMenuItems(menuItemProps);
 
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
+      item.action();
+    },
+  }));
+
   return (
     <>
       {/* Modals */}
@@ -122,7 +131,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
         />
       )}
 
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
         ellipsis
         customButton={customActionButton}
@@ -171,6 +180,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
+                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
                       nestedItem.action();
                     }}
                     className={cn(
@@ -208,6 +218,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
                 item.action();
               }}
               className={cn(
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index b8b74764d3d..adb246b8a87 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -4,13 +4,19 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import {
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { DeleteIssueModal } from "@/components/issues";
 // helpers
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
@@ -63,6 +69,13 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
 
   const MENU_ITEMS = useArchivedIssueMenuItems(menuItemProps);
 
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.ARCHIVED });
+      item.action();
+    },
+  }));
   return (
     <>
       {/* Modals */}
@@ -73,7 +86,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
         onSubmit={handleDelete}
       />
 
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
         ellipsis
         customButton={customActionButton}
@@ -93,6 +106,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
                 e.preventDefault();
                 e.stopPropagation();
                 item.action();
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.ARCHIVED });
               }}
               className={cn(
                 "flex items-center gap-2",
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 75bb8633a89..3734e10405b 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -5,13 +5,20 @@ import omit from "lodash/omit";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  ARCHIVABLE_STATE_GROUPS,
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { TIssue } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useEventTracker, useIssues, useProject, useProjectState, useUserPermissions } from "@/hooks/store";
 // plane-web components
 import { DuplicateWorkItemModal } from "@/plane-web/components/issues/issue-layouts/quick-action-dropdowns";
@@ -94,6 +101,14 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
 
   const MENU_ITEMS = useCycleIssueMenuItems(menuItemProps);
 
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
+      item.action();
+    },
+  }));
+
   return (
     <>
       {/* Modals */}
@@ -132,7 +147,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         />
       )}
 
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
         ellipsis
         placement={placements}
@@ -181,6 +196,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
+                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
                       nestedItem.action();
                     }}
                     className={cn(
@@ -218,6 +234,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
                 item.action();
               }}
               className={cn(
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
index e3d89f8a285..ca4c720b7d2 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
@@ -5,13 +5,19 @@ import omit from "lodash/omit";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
-import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { TIssue } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useEventTracker, useUserPermissions } from "@/hooks/store";
 // local imports
 import { IQuickActionProps } from "../list/list-view-types";
@@ -81,6 +87,14 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
 
   const MENU_ITEMS = useDraftIssueMenuItems(menuItemProps);
 
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.DRAFT });
+      item.action();
+    },
+  }));
+
   return (
     <>
       {/* Modals */}
@@ -104,7 +118,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
         isDraft={isDraftIssue}
       />
 
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
         ellipsis
         placement={placements}
@@ -122,6 +136,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.DRAFT });
                 item.action();
               }}
               className={cn(
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index e23ff7501be..6901e249c04 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -5,13 +5,20 @@ import omit from "lodash/omit";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  ARCHIVABLE_STATE_GROUPS,
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { TIssue } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useIssues, useEventTracker, useProjectState, useUserPermissions, useProject } from "@/hooks/store";
 // plane-web components
 import { DuplicateWorkItemModal } from "@/plane-web/components/issues/issue-layouts/quick-action-dropdowns";
@@ -93,6 +100,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
 
   const MENU_ITEMS = useModuleIssueMenuItems(menuItemProps);
 
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
+      item.action();
+    },
+  }));
   return (
     <>
       {/* Modals */}
@@ -131,7 +145,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
         />
       )}
 
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
         ellipsis
         placement={placements}
@@ -180,6 +194,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
+                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
                       nestedItem.action();
                     }}
                     className={cn(
@@ -217,6 +232,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
                 item.action();
               }}
               className={cn(
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index 994648544ed..29177848b9b 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -5,13 +5,20 @@ import omit from "lodash/omit";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
-import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  ARCHIVABLE_STATE_GROUPS,
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  WORK_ITEM_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { TIssue } from "@plane/types";
-import { ContextMenu, CustomMenu } from "@plane/ui";
+import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useEventTracker, useIssues, useProject, useProjectState, useUserPermissions } from "@/hooks/store";
 // plane-web components
 import { DuplicateWorkItemModal } from "@/plane-web/components/issues/issue-layouts/quick-action-dropdowns";
@@ -99,6 +106,14 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
 
   const MENU_ITEMS = useProjectIssueMenuItems(menuItemProps);
 
+  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
+    ...item,
+    onClick: () => {
+      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
+      item.action();
+    },
+  }));
+
   return (
     <>
       {/* Modals */}
@@ -137,7 +152,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
         />
       )}
 
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
       <CustomMenu
         ellipsis
         placement={placements}
@@ -185,6 +200,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
+                      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
                       nestedItem.action();
                     }}
                     className={cn(
@@ -222,6 +238,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
+                captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
                 item.action();
               }}
               className={cn(
diff --git a/web/core/components/issues/issue-layouts/quick-add/root.tsx b/web/core/components/issues/issue-layouts/quick-add/root.tsx
index b6cd83e6600..435edbc9f88 100644
--- a/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -2,7 +2,7 @@
 
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useForm, UseFormRegister } from "react-hook-form";
 import { PlusIcon } from "lucide-react";
 // plane constants
@@ -18,7 +18,7 @@ import { CreateIssueToastActionItems } from "@/components/issues";
 // constants
 // helpers
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // plane web components
 import { QuickAddIssueFormRoot } from "@/plane-web/components/issues";
 
@@ -69,11 +69,8 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
   const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId } = useParams();
-  const pathname = usePathname();
   // states
   const [isOpen, setIsOpen] = useState(isQuickAddOpen ?? false);
-  // store hooks
-  const { captureIssueEvent } = useEventTracker();
   // form info
   const {
     reset,
@@ -136,17 +133,16 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
 
       await quickAddPromise
         .then((res) => {
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.create,
-            payload: { ...res, state: "SUCCESS", element: ` ${layout} quick add` },
-            path: pathname,
+            payload: { id: res?.id },
           });
         })
-        .catch(() => {
-          captureIssueEvent({
+        .catch((error) => {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.create,
-            payload: { ...payload, state: "FAILED", element: `${layout}  quick ad` },
-            path: pathname,
+            payload: { id: payload.id },
+            error: error as Error,
           });
         });
     }
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index f9f17d4f5db..fc923331bb9 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -1,12 +1,13 @@
 import React, { useCallback } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 // types
+import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { TIssue } from "@plane/types";
 // components
 import { CycleDropdown } from "@/components/dropdowns";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssuesStore } from "@/hooks/use-issue-layout-store";
 
 type Props = {
@@ -19,9 +20,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
   const { issue, disabled, onClose } = props;
   // router
   const { workspaceSlug } = useParams();
-  const pathname = usePathname();
   // hooks
-  const { captureIssueEvent } = useEventTracker();
   const {
     issues: { addCycleToIssue, removeCycleFromIssue },
   } = useIssuesStore();
@@ -31,18 +30,14 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
       if (!workspaceSlug || !issue || !issue.project_id || issue.cycle_id === cycleId) return;
       if (cycleId) await addCycleToIssue(workspaceSlug.toString(), issue.project_id, cycleId, issue.id);
       else await removeCycleFromIssue(workspaceSlug.toString(), issue.project_id, issue.id);
-      captureIssueEvent({
-        eventName: "Work item updated",
+      captureSuccess({
+        eventName: WORK_ITEM_TRACKER_EVENTS.update,
         payload: {
-          ...issue,
-          cycle_id: cycleId,
-          element: "Spreadsheet layout",
+          id: issue.id,
         },
-        updates: { changed_property: "cycle", change_details: { cycle_id: cycleId } },
-        path: pathname,
       });
     },
-    [workspaceSlug, issue, addCycleToIssue, removeCycleFromIssue, captureIssueEvent, pathname]
+    [workspaceSlug, issue, addCycleToIssue, removeCycleFromIssue]
   );
 
   return (
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index b95610cdd0a..b30f7716fe3 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -1,14 +1,15 @@
 import React, { useCallback } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 // types
+import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { TIssue } from "@plane/types";
 // components
 import { ModuleDropdown } from "@/components/dropdowns";
 // constants
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssuesStore } from "@/hooks/use-issue-layout-store";
 
 type Props = {
@@ -21,9 +22,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
   const { issue, disabled, onClose } = props;
   // router
   const { workspaceSlug } = useParams();
-  const pathname = usePathname();
   // hooks
-  const { captureIssueEvent } = useEventTracker();
   const {
     issues: { changeModulesInIssue },
   } = useIssuesStore();
@@ -41,18 +40,14 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
       }
       changeModulesInIssue(workspaceSlug.toString(), issue.project_id, issue.id, modulesToAdd, modulesToRemove);
 
-      captureIssueEvent({
-        eventName: "Work item updated",
+      captureSuccess({
+        eventName: WORK_ITEM_TRACKER_EVENTS.update,
         payload: {
-          ...issue,
-          module_ids: moduleIds,
-          element: "Spreadsheet layout",
+          id: issue.id,
         },
-        updates: { changed_property: "module_ids", change_details: { module_ids: moduleIds } },
-        path: pathname,
       });
     },
-    [workspaceSlug, issue, changeModulesInIssue, captureIssueEvent, pathname]
+    [workspaceSlug, issue, changeModulesInIssue]
   );
 
   return (
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
index cf6b4febb99..34b5bfdfc8f 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -1,15 +1,14 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
 // types
+import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { IIssueDisplayProperties, TIssue } from "@plane/types";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureSuccess } from "@/helpers/event-tracker.helper";
 // components
 import { SPREADSHEET_COLUMNS } from "@/plane-web/components/issues/issue-layouts/utils";
 import { shouldRenderColumn } from "@/plane-web/helpers/issue-filter.helper";
 import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
-// utils
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -23,9 +22,7 @@ type Props = {
 export const IssueColumn = observer((props: Props) => {
   const { displayProperties, issueDetail, disableUserActions, property, updateIssue } = props;
   // router
-  const pathname = usePathname();
   const tableCellRef = useRef<HTMLTableCellElement | null>(null);
-  const { captureIssueEvent } = useEventTracker();
 
   const shouldRenderProperty = shouldRenderColumn(property);
 
@@ -46,18 +43,14 @@ export const IssueColumn = observer((props: Props) => {
       >
         <Column
           issue={issueDetail}
-          onChange={(issue: TIssue, data: Partial<TIssue>, updates: any) =>
+          onChange={(issue: TIssue, data: Partial<TIssue>) =>
             updateIssue &&
             updateIssue(issue.project_id, issue.id, data).then(() => {
-              captureIssueEvent({
-                eventName: "Issue updated",
+              captureSuccess({
+                eventName: WORK_ITEM_TRACKER_EVENTS.update,
                 payload: {
-                  ...issue,
-                  ...data,
-                  element: "Spreadsheet layout",
+                  id: issue.id,
                 },
-                updates: updates,
-                path: pathname,
               });
             })
           }
diff --git a/web/core/components/issues/issue-modal/base.tsx b/web/core/components/issues/issue-modal/base.tsx
index 494eb80e795..482f1afd62f 100644
--- a/web/core/components/issues/issue-modal/base.tsx
+++ b/web/core/components/issues/issue-modal/base.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 import { EIssuesStoreType, WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
@@ -12,9 +12,9 @@ import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@p
 import { CreateIssueToastActionItems, IssuesModalProps } from "@/components/issues";
 // constants
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useCycle } from "@/hooks/store/use-cycle";
-import { useEventTracker } from "@/hooks/store/use-event-tracker";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useModule } from "@/hooks/store/use-module";
@@ -62,7 +62,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
   // store hooks
   const { t } = useTranslation();
-  const { captureIssueEvent } = useEventTracker();
   const { workspaceSlug, projectId: routerProjectId, cycleId, moduleId, workItem } = useParams();
   const { fetchCycleDetails } = useCycle();
   const { fetchModuleDetails } = useModule();
@@ -72,8 +71,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   const { fetchIssue } = useIssueDetail();
   const { allowedProjectIds, handleCreateUpdatePropertyValues } = useIssueModal();
   const { getProjectByIdentifier } = useProject();
-  // pathname
-  const pathname = usePathname();
   // current store details
   const { createIssue, updateIssue } = useIssuesActions(storeType);
   // derived values
@@ -240,10 +237,9 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
           />
         ),
       });
-      captureIssueEvent({
+      captureSuccess({
         eventName: WORK_ITEM_TRACKER_EVENTS.create,
-        payload: { ...response, state: "SUCCESS" },
-        path: pathname,
+        payload: { id: response.id },
       });
       if (!createMore) handleClose();
       if (createMore && issueTitleRef) issueTitleRef?.current?.focus();
@@ -256,10 +252,10 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         title: t("error"),
         message: error?.error ?? t(is_draft_issue ? "draft_creation_failed" : "issue_creation_failed"),
       });
-      captureIssueEvent({
+      captureError({
         eventName: WORK_ITEM_TRACKER_EVENTS.create,
-        payload: { ...payload, state: "FAILED" },
-        path: pathname,
+        payload: { id: payload.id },
+        error: error as Error,
       });
       throw error;
     }
@@ -302,10 +298,9 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         title: t("success"),
         message: t("issue_updated_successfully"),
       });
-      captureIssueEvent({
+      captureSuccess({
         eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { ...payload, issueId: data.id, state: "SUCCESS" },
-        path: pathname,
+        payload: { id: data.id },
       });
       handleClose();
     } catch (error: any) {
@@ -315,10 +310,10 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         title: t("error"),
         message: error?.error ?? t("issue_could_not_be_updated"),
       });
-      captureIssueEvent({
+      captureError({
         eventName: WORK_ITEM_TRACKER_EVENTS.update,
-        payload: { ...payload, state: "FAILED" },
-        path: pathname,
+        payload: { id: data.id },
+        error: error as Error,
       });
     }
   };
diff --git a/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/web/core/components/issues/issue-modal/draft-issue-layout.tsx
index 96cc4a3220e..cc2ad0c270e 100644
--- a/web/core/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@@ -3,7 +3,8 @@
 import React, { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
+import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
 import type { TIssue } from "@plane/types";
@@ -14,8 +15,9 @@ import { isEmptyHtmlString } from "@plane/utils";
 import { ConfirmIssueDiscard } from "@/components/issues";
 // helpers
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
-import { useEventTracker, useWorkspaceDraftIssues } from "@/hooks/store";
+import { useWorkspaceDraftIssues } from "@/hooks/store";
 // local components
 import { IssueFormRoot, type IssueFormProps } from "./form";
 
@@ -30,10 +32,7 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const [issueDiscardModal, setIssueDiscardModal] = useState(false);
   // router params
   const { workspaceSlug } = useParams();
-  // pathname
-  const pathname = usePathname();
   // store hooks
-  const { captureIssueEvent } = useEventTracker();
   const { handleCreateUpdatePropertyValues } = useIssueModal();
   const { createIssue } = useWorkspaceDraftIssues();
   const { t } = useTranslation();
@@ -92,26 +91,25 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
           title: `${t("success")}!`,
           message: t("workspace_draft_issues.toasts.created.success"),
         });
-        captureIssueEvent({
-          eventName: "Draft work item created",
-          payload: { ...res, state: "SUCCESS" },
-          path: pathname,
+        captureSuccess({
+          eventName: WORK_ITEM_TRACKER_EVENTS.draft.create,
+          payload: { id: res?.id },
         });
         onChange(null);
         setIssueDiscardModal(false);
         onClose();
         return res;
       })
-      .catch(() => {
+      .catch((error) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: `${t("error")}!`,
           message: t("workspace_draft_issues.toasts.created.error"),
         });
-        captureIssueEvent({
-          eventName: "Draft work item created",
-          payload: { ...payload, state: "FAILED" },
-          path: pathname,
+        captureError({
+          eventName: WORK_ITEM_TRACKER_EVENTS.draft.create,
+          payload: { id: payload.id },
+          error,
         });
       });
 
diff --git a/web/core/components/issues/peek-overview/root.tsx b/web/core/components/issues/peek-overview/root.tsx
index dfeedadce95..4a89e8487c4 100644
--- a/web/core/components/issues/peek-overview/root.tsx
+++ b/web/core/components/issues/peek-overview/root.tsx
@@ -19,7 +19,8 @@ import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 import { IssueView, TIssueOperations } from "@/components/issues";
 // constants
 // hooks
-import { useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties";
 
@@ -48,7 +49,6 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
   const issueStoreType = useIssueStoreType();
   const storeType = issueStoreFromProps ?? issueStoreType;
   const { issues } = useIssues(storeType);
-  const { captureIssueEvent } = useEventTracker();
 
   useWorkItemProperties(
     peekIssue?.projectId,
@@ -81,21 +81,16 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
             .updateIssue(workspaceSlug, projectId, issueId, data)
             .then(async () => {
               fetchActivities(workspaceSlug, projectId, issueId);
-              captureIssueEvent({
+              captureSuccess({
                 eventName: WORK_ITEM_TRACKER_EVENTS.update,
-                payload: { ...data, issueId, state: "SUCCESS", element: "Issue peek-overview" },
-                updates: {
-                  changed_property: Object.keys(data).join(","),
-                  change_details: Object.values(data).join(","),
-                },
-                path: pathname,
+                payload: { id: issueId },
               });
             })
-            .catch(() => {
-              captureIssueEvent({
+            .catch((error) => {
+              captureError({
                 eventName: WORK_ITEM_TRACKER_EVENTS.update,
-                payload: { state: "FAILED", element: "Issue peek-overview" },
-                path: pathname,
+                payload: { id: issueId },
+                error: error as Error,
               });
               setToast({
                 title: t("toast.error"),
@@ -108,23 +103,22 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           return issues?.removeIssue(workspaceSlug, projectId, issueId).then(() => {
-            captureIssueEvent({
+            captureSuccess({
               eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-              payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
-              path: pathname,
+              payload: { id: issueId },
             });
             removeRoutePeekId();
           });
-        } catch {
+        } catch (error) {
           setToast({
             title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
             message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.delete,
-            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -132,16 +126,15 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
         try {
           if (!issues?.archiveIssue) return;
           await issues.archiveIssue(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.archive,
-            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -153,21 +146,20 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
             title: t("issue.restore.success.title"),
             message: t("issue.restore.success.message"),
           });
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.restore,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
+        } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
             message: t("issue.restore.failed.message"),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.restore,
-            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -175,58 +167,40 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
         try {
           await issues.addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
           fetchActivities(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { issueId, state: "SUCCESS", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
+        } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
             message: t("issue.add.cycle.failed"),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
           await issues.addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { ...issueIds, state: "SUCCESS", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueIds },
           });
-        } catch {
+        } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("toast.error"),
             message: t("issue.add.cycle.failed"),
           });
-          captureIssueEvent({
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: cycleId,
-            },
-            path: pathname,
+            payload: { id: issueIds },
+            error: error as Error,
           });
         }
       },
@@ -246,24 +220,15 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
           });
           await removeFromCyclePromise;
           fetchActivities(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { issueId, state: "SUCCESS", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { state: "FAILED", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "cycle_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
@@ -282,14 +247,9 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
           removeModuleIds
         );
         fetchActivities(workspaceSlug, projectId, issueId);
-        captureIssueEvent({
+        captureSuccess({
           eventName: WORK_ITEM_TRACKER_EVENTS.update,
-          payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
-          updates: {
-            changed_property: "module_id",
-            change_details: { addModuleIds, removeModuleIds },
-          },
-          path: pathname,
+          payload: { id: issueId },
         });
         return promise;
       },
@@ -309,30 +269,21 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
           });
           await removeFromModulePromise;
           fetchActivities(workspaceSlug, projectId, issueId);
-          captureIssueEvent({
+          captureSuccess({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "module_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
           });
-        } catch {
-          captureIssueEvent({
+        } catch (error) {
+          captureError({
             eventName: WORK_ITEM_TRACKER_EVENTS.update,
-            payload: { id: issueId, state: "FAILED", element: "Issue peek-overview" },
-            updates: {
-              changed_property: "module_id",
-              change_details: "",
-            },
-            path: pathname,
+            payload: { id: issueId },
+            error: error as Error,
           });
         }
       },
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fetchIssue, is_draft, issues, fetchActivities, captureIssueEvent, pathname, removeRoutePeekId, restoreIssue]
+    [fetchIssue, is_draft, issues, fetchActivities, pathname, removeRoutePeekId, restoreIssue]
   );
 
   useEffect(() => {