From e9f58a9b26891df7773d7c3da0184b033cba6b33 Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Tue, 1 Jul 2025 17:01:24 +0530
Subject: [PATCH 1/2] added events for most page events

---
 packages/constants/src/event-tracker/core.ts  |  23 +++
 .../components/pages/header/lock-control.tsx  |  17 +-
 web/ce/helpers/command-palette.ts             |   7 +-
 .../actions/project-actions.tsx               |   3 +-
 .../components/pages/dropdowns/actions.tsx    |  38 ++++-
 .../pages/header/favorite-control.tsx         |  13 +-
 .../pages/list/block-item-action.tsx          |   6 +
 .../pages/modals/create-page-modal.tsx        |  16 +-
 .../pages/modals/delete-page-modal.tsx        |  13 +-
 .../pages/pages-list-main-content.tsx         |   6 +-
 web/core/hooks/use-page-operations.ts         | 145 +++++++++++++++---
 11 files changed, 234 insertions(+), 53 deletions(-)

diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts
index 238db14b0fe..862d425580f 100644
--- a/packages/constants/src/event-tracker/core.ts
+++ b/packages/constants/src/event-tracker/core.ts
@@ -181,8 +181,31 @@ export const PROJECT_PAGE_TRACKER_EVENTS = {
   create: "project_page_created",
   update: "project_page_updated",
   delete: "project_page_deleted",
+  archive: "project_page_archived",
+  restore: "project_page_restored",
+  lock: "project_page_locked",
+  unlock: "project_page_unlocked",
+  access_update: "project_page_access_updated",
+  duplicate: "project_page_duplicated",
+  favorite: "project_page_favorited",
+  unfavorite: "project_page_unfavorited",
+  move: "project_page_moved",
 };
 
+export const PROJECT_PAGE_TRACKER_ELEMENTS = {
+  COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON: "command_palette_shortcut_create_page_button",
+  EMPTY_STATE_CREATE_BUTTON: "empty_state_create_page_button",
+  COMMAND_PALETTE_CREATE_BUTTON: "command_palette_create_page_button",
+  CONTEXT_MENU: "page_context_menu",
+  QUICK_ACTIONS: "page_quick_actions",
+  LIST_ITEM: "page_list_item",
+  FAVORITE_BUTTON: "page_favorite_button",
+  ARCHIVE_BUTTON: "page_archive_button",
+  LOCK_BUTTON: "page_lock_button",
+  ACCESS_TOGGLE: "page_access_toggle",
+  DUPLICATE_BUTTON: "page_duplicate_button",
+} as const;
+
 export const MEMBER_TRACKER_EVENTS = {
   invite: "member_invited",
   accept: "member_accepted",
diff --git a/web/ce/components/pages/header/lock-control.tsx b/web/ce/components/pages/header/lock-control.tsx
index f06ba2ad5bb..e8a33601920 100644
--- a/web/ce/components/pages/header/lock-control.tsx
+++ b/web/ce/components/pages/header/lock-control.tsx
@@ -4,7 +4,10 @@ import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
 // plane imports
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { Tooltip } from "@plane/ui";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -77,7 +80,12 @@ export const PageLockControl = observer(({ page }: Props) => {
         <Tooltip tooltipContent="Lock" position="bottom">
           <button
             type="button"
-            onClick={toggleLock}
+            onClick={() => {
+              captureClick({
+                elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
+              });
+              toggleLock();
+            }}
             className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
             aria-label="Lock"
           >
@@ -89,7 +97,12 @@ export const PageLockControl = observer(({ page }: Props) => {
       {displayState === "locked" && (
         <button
           type="button"
-          onClick={toggleLock}
+          onClick={() => {
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
+            });
+            toggleLock();
+          }}
           className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
           aria-label="Locked"
         >
diff --git a/web/ce/helpers/command-palette.ts b/web/ce/helpers/command-palette.ts
index f10b2d979b3..95ea34d003f 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, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
 // store
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -42,7 +42,10 @@ export const getProjectShortcutsList: () => TCommandPaletteActionList = () => {
     d: {
       title: "Create a new page",
       description: "Create a new page in the current project",
-      action: () => toggleCreatePageModal({ isOpen: true }),
+      action: () => {
+        toggleCreatePageModal({ isOpen: true });
+        captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.COMMAND_PALETTE_SHORTCUT_CREATE_BUTTON });
+      },
     },
     m: {
       title: "Create a new module",
diff --git a/web/core/components/command-palette/actions/project-actions.tsx b/web/core/components/command-palette/actions/project-actions.tsx
index 37eff81c115..677261dc51e 100644
--- a/web/core/components/command-palette/actions/project-actions.tsx
+++ b/web/core/components/command-palette/actions/project-actions.tsx
@@ -3,7 +3,7 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText, Layers } from "lucide-react";
 // hooks
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { DiceIcon } from "@plane/ui";
 // hooks
 import { useCommandPalette } from "@/hooks/store";
@@ -70,6 +70,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
       </Command.Group>
       <Command.Group heading="Page">
         <Command.Item
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.COMMAND_PALETTE_CREATE_BUTTON}
           onSelect={() => {
             closePalette();
             toggleCreatePageModal({ isOpen: true });
diff --git a/web/core/components/pages/dropdowns/actions.tsx b/web/core/components/pages/dropdowns/actions.tsx
index fbff3201fa8..538d0b85561 100644
--- a/web/core/components/pages/dropdowns/actions.tsx
+++ b/web/core/components/pages/dropdowns/actions.tsx
@@ -16,7 +16,7 @@ import {
   Trash2,
 } from "lucide-react";
 // constants
-import { EPageAccess } from "@plane/constants";
+import { EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
 // plane ui
@@ -26,6 +26,7 @@ import { cn } from "@plane/utils";
 import { DeletePageModal } from "@/components/pages";
 // helpers
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { usePageOperations } from "@/hooks/use-page-operations";
 // plane web components
 import { MovePageModal } from "@/plane-web/components/pages";
@@ -92,14 +93,24 @@ export const PageActions: React.FC<Props> = observer((props) => {
     const menuItems: (TContextMenuItem & { key: TPageActions })[] = [
       {
         key: "toggle-lock",
-        action: pageOperations.toggleLock,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
+          });
+          pageOperations.toggleLock();
+        },
         title: is_locked ? "Unlock" : "Lock",
         icon: is_locked ? LockKeyholeOpen : LockKeyhole,
         shouldRender: canCurrentUserLockPage,
       },
       {
         key: "toggle-access",
-        action: pageOperations.toggleAccess,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ACCESS_TOGGLE,
+          });
+          pageOperations.toggleAccess();
+        },
         title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
         icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
         shouldRender: canCurrentUserChangeAccess && !archived_at,
@@ -120,21 +131,36 @@ export const PageActions: React.FC<Props> = observer((props) => {
       },
       {
         key: "make-a-copy",
-        action: pageOperations.duplicate,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.DUPLICATE_BUTTON,
+          });
+          pageOperations.duplicate();
+        },
         title: "Make a copy",
         icon: Copy,
         shouldRender: canCurrentUserDuplicatePage,
       },
       {
         key: "archive-restore",
-        action: pageOperations.toggleArchive,
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ARCHIVE_BUTTON,
+          });
+          pageOperations.toggleArchive();
+        },
         title: archived_at ? "Restore" : "Archive",
         icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
         shouldRender: canCurrentUserArchivePage,
       },
       {
         key: "delete",
-        action: () => setDeletePageModal(true),
+        action: () => {
+          captureClick({
+            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.CONTEXT_MENU,
+          });
+          setDeletePageModal(true);
+        },
         title: "Delete",
         icon: Trash2,
         shouldRender: canCurrentUserDeletePage && !!archived_at,
diff --git a/web/core/components/pages/header/favorite-control.tsx b/web/core/components/pages/header/favorite-control.tsx
index 948ce4f522b..e94c53bb4d6 100644
--- a/web/core/components/pages/header/favorite-control.tsx
+++ b/web/core/components/pages/header/favorite-control.tsx
@@ -1,6 +1,10 @@
 import { observer } from "mobx-react";
-// plane imports
+// constants
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+// ui
 import { FavoriteStar } from "@plane/ui";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -23,7 +27,12 @@ export const PageFavoriteControl = observer(({ page }: Props) => {
   return (
     <FavoriteStar
       selected={is_favorite}
-      onClick={pageOperations.toggleFavorite}
+      onClick={() => {
+        captureClick({
+          elementName: PROJECT_PAGE_TRACKER_ELEMENTS.FAVORITE_BUTTON,
+        });
+        pageOperations.toggleFavorite();
+      }}
       buttonClassName="flex-shrink-0 size-6 group rounded hover:bg-custom-background-80 transition-colors"
       iconClassName="size-3.5 text-custom-text-200 group-hover:text-custom-text-10"
     />
diff --git a/web/core/components/pages/list/block-item-action.tsx b/web/core/components/pages/list/block-item-action.tsx
index 4b382b4889c..c3cb980e108 100644
--- a/web/core/components/pages/list/block-item-action.tsx
+++ b/web/core/components/pages/list/block-item-action.tsx
@@ -3,12 +3,15 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Earth, Info, Lock, Minus } from "lucide-react";
+// constants
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 // ui
 import { Avatar, FavoriteStar, Tooltip } from "@plane/ui";
 import { renderFormattedDate, getFileURL } from "@plane/utils";
 // components
 import { PageActions } from "@/components/pages";
 // helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useMember } from "@/hooks/store";
 import { usePageOperations } from "@/hooks/use-page-operations";
@@ -64,6 +67,9 @@ export const BlockItemAction: FC<Props> = observer((props) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.FAVORITE_BUTTON,
+            });
             pageOperations.toggleFavorite();
           }}
           selected={is_favorite}
diff --git a/web/core/components/pages/modals/create-page-modal.tsx b/web/core/components/pages/modals/create-page-modal.tsx
index 894e1b70d8f..9e7472a58a6 100644
--- a/web/core/components/pages/modals/create-page-modal.tsx
+++ b/web/core/components/pages/modals/create-page-modal.tsx
@@ -7,7 +7,7 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { PageForm } from "@/components/pages";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web hooks
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
@@ -42,7 +42,6 @@ export const CreatePageModal: FC<Props> = (props) => {
   const router = useAppRouter();
   // store hooks
   const { createPage } = usePageStore(storeType);
-  const { capturePageEvent } = useEventTracker();
   const handlePageFormData = <T extends keyof TPage>(key: T, value: TPage[T]) =>
     setPageFormData((prev) => ({ ...prev, [key]: value }));
 
@@ -62,22 +61,19 @@ export const CreatePageModal: FC<Props> = (props) => {
     try {
       const pageData = await createPage(pageFormData);
       if (pageData) {
-        capturePageEvent({
+        captureSuccess({
           eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
           payload: {
-            ...pageData,
-            state: "SUCCESS",
+            id: pageData.id,
           },
         });
         handleStateClear();
         if (redirectionEnabled) router.push(`/${workspaceSlug}/projects/${projectId}/pages/${pageData.id}`);
       }
-    } catch {
-      capturePageEvent({
+    } catch (error: any) {
+      captureError({
         eventName: PROJECT_PAGE_TRACKER_EVENTS.create,
-        payload: {
-          state: "FAILED",
-        },
+        error,
       });
     }
   };
diff --git a/web/core/components/pages/modals/delete-page-modal.tsx b/web/core/components/pages/modals/delete-page-modal.tsx
index daf44e95011..992d2b95b71 100644
--- a/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/web/core/components/pages/modals/delete-page-modal.tsx
@@ -8,7 +8,7 @@ import { PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // plane web hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
@@ -28,7 +28,6 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
   const { removePage } = usePageStore(storeType);
-  const { capturePageEvent } = useEventTracker();
   if (!page || !page.id) return null;
   // derived values
   const { id: pageId, name } = page;
@@ -45,11 +44,10 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
     setIsDeleting(true);
     await removePage(pageId)
       .then(() => {
-        capturePageEvent({
+        captureSuccess({
           eventName: PROJECT_PAGE_TRACKER_EVENTS.delete,
           payload: {
-            ...page,
-            state: "SUCCESS",
+            id: pageId,
           },
         });
         handleClose();
@@ -64,11 +62,10 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         }
       })
       .catch(() => {
-        capturePageEvent({
+        captureError({
           eventName: PROJECT_PAGE_TRACKER_EVENTS.delete,
           payload: {
-            ...page,
-            state: "FAILED",
+            id: pageId,
           },
         });
         setToast({
diff --git a/web/core/components/pages/pages-list-main-content.tsx b/web/core/components/pages/pages-list-main-content.tsx
index 660b0b461dc..7c6f4940031 100644
--- a/web/core/components/pages/pages-list-main-content.tsx
+++ b/web/core/components/pages/pages-list-main-content.tsx
@@ -1,12 +1,13 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 // plane imports
-import { EUserPermissionsLevel, EUserProjectRoles, EPageAccess } from "@plane/constants";
+import { EUserPermissionsLevel, EUserProjectRoles, EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { DetailedEmptyState } from "@/components/empty-state";
 import { PageLoader } from "@/components/pages";
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette, useUserPermissions } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // plane web hooks
@@ -63,6 +64,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
             text: t("project_page.empty_state.general.primary_button.text"),
             onClick: () => {
               toggleCreatePageModal({ isOpen: true });
+              captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
           }}
@@ -79,6 +81,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
             text: t("project_page.empty_state.public.primary_button.text"),
             onClick: () => {
               toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
+              captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
           }}
@@ -94,6 +97,7 @@ export const PagesListMainContent: React.FC<Props> = observer((props) => {
             text: t("project_page.empty_state.private.primary_button.text"),
             onClick: () => {
               toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
+              captureClick({ elementName: PROJECT_PAGE_TRACKER_ELEMENTS.EMPTY_STATE_CREATE_BUTTON });
             },
             disabled: !canPerformEmptyStateActions,
           }}
diff --git a/web/core/hooks/use-page-operations.ts b/web/core/hooks/use-page-operations.ts
index ab4d2e7ab57..0e7c1ec2f69 100644
--- a/web/core/hooks/use-page-operations.ts
+++ b/web/core/hooks/use-page-operations.ts
@@ -1,10 +1,13 @@
 import { useMemo } from "react";
-// plane imports
-import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+// constants
+import { IS_FAVORITE_MENU_OPEN, PROJECT_PAGE_TRACKER_EVENTS } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
 import { EPageAccess } from "@plane/types/src/enums";
+// ui
 import { setToast, TOAST_TYPE } from "@plane/ui";
 import { copyUrlToClipboard } from "@plane/utils";
+// helpers
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
 import { useCollaborativePageActions } from "@/hooks/use-collaborative-page-actions";
 // store types
@@ -68,12 +71,23 @@ export const usePageOperations = (
       duplicate: async () => {
         try {
           await duplicate();
+          captureSuccess({
+            eventName: PROJECT_PAGE_TRACKER_EVENTS.duplicate,
+            payload: {
+              id: page.id,
+              state: "SUCCESS",
+            },
+          });
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: "Page duplicated successfully.",
           });
-        } catch {
+        } catch (error: any) {
+          captureError({
+            eventName: PROJECT_PAGE_TRACKER_EVENTS.duplicate,
+            error,
+          });
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
@@ -85,17 +99,33 @@ export const usePageOperations = (
       openInNewTab: () => window.open(pageLink, "_blank"),
       toggleAccess: async () => {
         const changedPageType = access === EPageAccess.PUBLIC ? "private" : "public";
+        const eventName = PROJECT_PAGE_TRACKER_EVENTS.access_update;
+
         try {
           if (access === EPageAccess.PUBLIC)
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "make-private" });
           else await executeCollaborativeAction({ type: "sendMessageToServer", message: "make-public" });
 
+          captureSuccess({
+            eventName,
+            payload: {
+              id: page.id,
+              from_access: access === EPageAccess.PUBLIC ? "Public" : "Private",
+              to_access: changedPageType === EPageAccess.PUBLIC ? "Public" : "Private",
+              state: "SUCCESS",
+            },
+          });
+
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
             message: `The page has been marked ${changedPageType} and moved to the ${changedPageType} section.`,
           });
-        } catch {
+        } catch (error: any) {
+          captureError({
+            eventName,
+            error,
+          });
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
@@ -107,12 +137,23 @@ export const usePageOperations = (
         if (archived_at) {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "unarchive" });
+            captureSuccess({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.restore,
+              payload: {
+                id: page.id,
+                state: "SUCCESS",
+              },
+            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page restored successfully.",
             });
-          } catch {
+          } catch (error: any) {
+            captureError({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.restore,
+              error,
+            });
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -122,12 +163,23 @@ export const usePageOperations = (
         } else {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "archive" });
+            captureSuccess({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.archive,
+              payload: {
+                id: page.id,
+                state: "SUCCESS",
+              },
+            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page archived successfully.",
             });
-          } catch {
+          } catch (error: any) {
+            captureError({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.archive,
+              error,
+            });
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -138,34 +190,73 @@ export const usePageOperations = (
       },
       toggleFavorite: () => {
         if (is_favorite) {
-          removePageFromFavorites().then(() =>
-            setToast({
-              type: TOAST_TYPE.SUCCESS,
-              title: "Success!",
-              message: "Page removed from favorites.",
+          removePageFromFavorites()
+            .then(() => {
+              captureSuccess({
+                eventName: PROJECT_PAGE_TRACKER_EVENTS.unfavorite,
+                payload: {
+                  id: page.id,
+                  state: "SUCCESS",
+                },
+              });
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success!",
+                message: "Page removed from favorites.",
+              });
             })
-          );
+            .catch((error) => {
+              captureError({
+                eventName: PROJECT_PAGE_TRACKER_EVENTS.unfavorite,
+                error,
+              });
+            });
         } else {
-          addToFavorites().then(() => {
-            if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
-            setToast({
-              type: TOAST_TYPE.SUCCESS,
-              title: "Success!",
-              message: "Page added to favorites.",
+          addToFavorites()
+            .then(() => {
+              captureSuccess({
+                eventName: PROJECT_PAGE_TRACKER_EVENTS.favorite,
+                payload: {
+                  id: page.id,
+                  state: "SUCCESS",
+                },
+              });
+              if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success!",
+                message: "Page added to favorites.",
+              });
+            })
+            .catch((error) => {
+              captureError({
+                eventName: PROJECT_PAGE_TRACKER_EVENTS.favorite,
+                error,
+              });
             });
-          });
         }
       },
       toggleLock: async () => {
         if (is_locked) {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "unlock" });
+            captureSuccess({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.unlock,
+              payload: {
+                id: page.id,
+                state: "SUCCESS",
+              },
+            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page unlocked successfully.",
             });
-          } catch {
+          } catch (error: any) {
+            captureError({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.unlock,
+              error,
+            });
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -175,12 +266,23 @@ export const usePageOperations = (
         } else {
           try {
             await executeCollaborativeAction({ type: "sendMessageToServer", message: "lock" });
+            captureSuccess({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.lock,
+              payload: {
+                id: page.id,
+                state: "SUCCESS",
+              },
+            });
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Page locked successfully.",
             });
-          } catch {
+          } catch (error: any) {
+            captureError({
+              eventName: PROJECT_PAGE_TRACKER_EVENTS.lock,
+              error,
+            });
             setToast({
               type: TOAST_TYPE.ERROR,
               title: "Error!",
@@ -200,6 +302,7 @@ export const usePageOperations = (
     is_favorite,
     is_locked,
     isFavoriteMenuOpen,
+    page.id,
     removePageFromFavorites,
     toggleFavoriteMenu,
   ]);

From 0a50a6164462bfbbf1fc73d8f7887b6aac4f6776 Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Tue, 1 Jul 2025 17:20:30 +0530
Subject: [PATCH 2/2] refactor: simplify lock button event handling in
 PageLockControl

---
 web/ce/components/pages/header/lock-control.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/web/ce/components/pages/header/lock-control.tsx b/web/ce/components/pages/header/lock-control.tsx
index e8a33601920..43e418831cc 100644
--- a/web/ce/components/pages/header/lock-control.tsx
+++ b/web/ce/components/pages/header/lock-control.tsx
@@ -80,12 +80,8 @@ export const PageLockControl = observer(({ page }: Props) => {
         <Tooltip tooltipContent="Lock" position="bottom">
           <button
             type="button"
-            onClick={() => {
-              captureClick({
-                elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
-              });
-              toggleLock();
-            }}
+            onClick={toggleLock}
+            data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
             className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
             aria-label="Lock"
           >
@@ -97,12 +93,8 @@ export const PageLockControl = observer(({ page }: Props) => {
       {displayState === "locked" && (
         <button
           type="button"
-          onClick={() => {
-            captureClick({
-              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
-            });
-            toggleLock();
-          }}
+          onClick={toggleLock}
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
           className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
           aria-label="Locked"
         >