fix(cc-ui-logging): @webex/ui-logging package (#491)

Shreyas281299 · web-flow · commit b647448a2299 · 2025-08-14T10:43:57.000+05:30
diff --git a/packages/contact-center/cc-components/package.json b/packages/contact-center/cc-components/package.json
@@ -35,7 +35,8 @@
   "dependencies": {
     "@momentum-ui/illustrations": "^1.24.0",
     "@r2wc/react-to-web-component": "2.0.3",
-    "@webex/cc-store": "workspace:*"
+    "@webex/cc-store": "workspace:*",
+    "@webex/cc-ui-logging": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",
@@ -75,4 +76,4 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }
-}
+}
diff --git a/packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx b/packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx
@@ -17,6 +17,7 @@ import {
   updateDialNumberLabel,
   handleCCSignoutKeyDown,
 } from './station-login.utils';
+import {withMetrics} from '@webex/cc-ui-logging';
 
 const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps> = (props) => {
   const {
@@ -344,4 +345,5 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
   );
 };
 
-export default StationLoginComponent;
+const StationLoginComponentWithMetrics = withMetrics(StationLoginComponent, 'StationLogin');
+export default StationLoginComponentWithMetrics;
diff --git a/packages/contact-center/cc-components/src/components/UserState/user-state.tsx b/packages/contact-center/cc-components/src/components/UserState/user-state.tsx
@@ -17,6 +17,7 @@ import {
   getSelectedKey,
   buildDropdownItems,
 } from './user-state.utils';
+import {withMetrics} from '@webex/cc-ui-logging';
 
 const UserStateComponent: React.FunctionComponent<UserStateComponentsProps> = (props) => {
   const {
@@ -103,4 +104,5 @@ const UserStateComponent: React.FunctionComponent<UserStateComponentsProps> = (p
   );
 };
 
-export default UserStateComponent;
+const UserStateComponentWithMetrics = withMetrics(UserStateComponent, 'UserState');
+export default UserStateComponentWithMetrics;
diff --git a/packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx b/packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx
@@ -24,6 +24,7 @@ import {
   filterButtonsForConsultation,
   updateCallStateFromTask,
 } from './call-control.utils';
+import {withMetrics} from '@webex/cc-ui-logging';
 
 function CallControlComponent(props: CallControlComponentProps) {
   const [selectedWrapupReason, setSelectedWrapupReason] = useState<string | null>(null);
@@ -322,4 +323,5 @@ function CallControlComponent(props: CallControlComponentProps) {
   );
 }
 
-export default CallControlComponent;
+const CallControlComponentWithMetrics = withMetrics(CallControlComponent, 'CallControl');
+export default CallControlComponentWithMetrics;
diff --git a/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx b/packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx
@@ -19,6 +19,7 @@ import {
   CUSTOMER_NAME,
   RONA,
 } from '../constants';
+import {withMetrics} from '@webex/cc-ui-logging';
 
 const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) => {
   const {
@@ -235,4 +236,5 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
   );
 };
 
-export default CallControlCADComponent;
+const CallControlCADComponentWithMetrics = withMetrics(CallControlCADComponent, 'CallControlCAD');
+export default CallControlCADComponentWithMetrics;
diff --git a/packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx b/packages/contact-center/cc-components/src/components/task/IncomingTask/incoming-task.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {IncomingTaskComponentProps, MEDIA_CHANNEL} from '../task.types';
 import Task from '../Task';
+import {withMetrics} from '@webex/cc-ui-logging';
 import {extractIncomingTaskData} from './incoming-task.utils';
 
 const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps> = (props) => {
@@ -37,4 +38,5 @@ const IncomingTaskComponent: React.FunctionComponent<IncomingTaskComponentProps>
   );
 };
 
-export default IncomingTaskComponent;
+const IncomingTaskComponentWithMetrics = withMetrics(IncomingTaskComponent, 'IncomingTask');
+export default IncomingTaskComponentWithMetrics;
diff --git a/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx b/packages/contact-center/cc-components/src/components/task/OutdialCall/outdial-call.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {OutdialCallComponentProps} from '../task.types';
 import './outdial-call.style.scss';
+import {withMetrics} from '@webex/cc-ui-logging';
 
 const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> = (props) => {
   const {startOutdial} = props;
@@ -49,4 +50,5 @@ const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps> =
   );
 };
 
-export default OutdialCallComponent;
+const OutdialCallComponentWithMetrics = withMetrics(OutdialCallComponent, 'OutdialCall');
+export default OutdialCallComponentWithMetrics;
diff --git a/packages/contact-center/cc-components/src/components/task/TaskList/task-list.tsx b/packages/contact-center/cc-components/src/components/task/TaskList/task-list.tsx
@@ -9,6 +9,7 @@ import {
   isCurrentTaskSelected,
 } from './task-list.utils';
 import './styles.scss';
+import {withMetrics} from '@webex/cc-ui-logging';
 
 const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (props) => {
   const {currentTask, taskList, acceptTask, declineTask, isBrowser, onTaskSelect, logger} = props;
@@ -57,4 +58,5 @@ const TaskListComponent: React.FunctionComponent<TaskListComponentProps> = (prop
   );
 };
 
-export default TaskListComponent;
+const TaskListComponentWithMetrics = withMetrics(TaskListComponent, 'TaskList');
+export default TaskListComponentWithMetrics;
diff --git a/packages/contact-center/cc-widgets/package.json b/packages/contact-center/cc-widgets/package.json
@@ -95,4 +95,4 @@
       "^.+\\.(css|less|scss)$": "babel-jest"
     }
   }
-}
+}
diff --git a/packages/contact-center/station-login/package.json b/packages/contact-center/station-login/package.json
@@ -65,4 +65,4 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }
-}
+}
diff --git a/packages/contact-center/station-login/src/station-login/index.tsx b/packages/contact-center/station-login/src/station-login/index.tsx
@@ -22,6 +22,7 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(
       teamId,
       setTeamId,
     } = store;
+
     const result = useStationLogin({
       cc,
       onLogin,
@@ -52,6 +53,7 @@ const StationLogin: React.FunctionComponent<StationLoginProps> = observer(
       logger,
       profileMode,
     };
+
     return <StationLoginComponent {...props} />;
   }
 );
diff --git a/packages/contact-center/store/package.json b/packages/contact-center/store/package.json
@@ -59,4 +59,4 @@
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1"
   }
-}
+}
diff --git a/packages/contact-center/task/package.json b/packages/contact-center/task/package.json
@@ -64,4 +64,4 @@
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   }
-}
+}
diff --git a/packages/contact-center/task/src/CallControl/index.tsx b/packages/contact-center/task/src/CallControl/index.tsx
@@ -48,6 +48,7 @@ const CallControl: React.FunctionComponent<CallControlProps> = observer(
       allowConsultToQueue,
       logger,
     };
+
     return <CallControlComponent {...result} />;
   }
 );
diff --git a/packages/contact-center/task/tests/OutdialCall/index.tsx b/packages/contact-center/task/tests/OutdialCall/index.tsx
@@ -7,9 +7,10 @@ import {OutdialCall} from '../../src/OutdialCall';
 jest.mock('@webex/cc-store', () => ({
   cc: {},
   logger: {
-    // Adding mock logger methods
     info: jest.fn(),
+    log: jest.fn(),
     error: jest.fn(),
+    warn: jest.fn(),
   },
 }));
 
@@ -23,6 +24,8 @@ describe('OutdialCall Component', () => {
       logger: {
         info: expect.any(Function),
         error: expect.any(Function),
+        log: expect.any(Function),
+        warn: expect.any(Function),
       },
     });
   });
diff --git a/packages/contact-center/task/tests/TaskList/index.tsx b/packages/contact-center/task/tests/TaskList/index.tsx
@@ -3,7 +3,6 @@ import {render, screen, cleanup} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {TaskList} from '../../src/TaskList';
 import * as helper from '../../src/helper';
-import * as components from '@webex/cc-components';
 import store from '@webex/cc-store';
 
 // Mock `@webex/cc-store`.
@@ -31,7 +30,6 @@ jest.mock('@webex/cc-store', () => ({
 }));
 
 describe('TaskList Component', () => {
-  const taskListComponentSpy = jest.spyOn(components, 'TaskListComponent');
   const helperSpy = jest.spyOn(helper, 'useTaskList');
   afterEach(cleanup);
 
@@ -42,20 +40,6 @@ describe('TaskList Component', () => {
     const taskListPresentational = screen.getByTestId('task-list');
     expect(taskListPresentational).toBeInTheDocument();
 
-    // Verify that `TaskListPresentational` is called with the correct props.
-    expect(taskListComponentSpy).toHaveBeenCalledWith(
-      {
-        currentTask: undefined,
-        isBrowser: true,
-        logger: store.logger,
-        taskList: taskListMock,
-        acceptTask: expect.any(Function),
-        declineTask: expect.any(Function),
-        onTaskSelect: expect.any(Function),
-      },
-      {}
-    );
-
     // Verify that `useTaskList` is called with the correct arguments.
     expect(helperSpy).toHaveBeenCalledWith({
       cc: store.cc,
diff --git a/packages/contact-center/ui-logging/jest.config.js b/packages/contact-center/ui-logging/jest.config.js
@@ -0,0 +1,6 @@
+const jestConfig = require('../../../jest.config.js');
+
+jestConfig.rootDir = '../../../';
+jestConfig.testMatch = ['**/ui-logging/tests/**/*.ts', '**/ui-logging/tests/**/*.tsx'];
+
+module.exports = jestConfig;
diff --git a/packages/contact-center/ui-logging/package.json b/packages/contact-center/ui-logging/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@webex/cc-ui-logging",
+  "version": "1.0.0",
+  "description": "UI metrics tracking for Webex widgets",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build:src": "webpack --mode=development",
+    "clean": "rm -rf dist",
+    "clean:dist": "rm -rf dist",
+    "test:unit": "jest --coverage",
+    "test:styles": "echo 'No styles to test'"
+  },
+  "dependencies": {
+    "@webex/cc-store": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/react": "16.0.1",
+    "@types/jest": "29.5.14",
+    "@types/react-test-renderer": "18",
+    "@webex/test-fixtures": "workspace:*",
+    "babel-jest": "29.7.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "typescript": "^5.6.3",
+    "uuid": "^9.0.0",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1"
+  }
+}
diff --git a/packages/contact-center/ui-logging/src/index.ts b/packages/contact-center/ui-logging/src/index.ts
@@ -0,0 +1,5 @@
+import withMetrics from './withMetrics';
+import {WidgetMetrics} from './metricsLogger';
+
+export {withMetrics};
+export type {WidgetMetrics};
diff --git a/packages/contact-center/ui-logging/src/metricsLogger.ts b/packages/contact-center/ui-logging/src/metricsLogger.ts
@@ -0,0 +1,102 @@
+import store from '@webex/cc-store';
+
+export type WidgetMetrics = {
+  widgetName: string;
+  event: 'WIDGET_MOUNTED' | 'ERROR' | 'WIDGET_UNMOUNTED' | 'PROPS_UPDATED';
+  props?: Record<string, any>;
+  timestamp: number;
+  additionalContext?: Record<string, any>;
+};
+
+/**
+ * Logs UI metrics for contact center widgets.
+ *
+ * This function logs widget lifecycle events and errors to help monitor
+ * widget performance and user interactions. If no logger is available,
+ * it will emit a warning and skip logging.
+ *
+ * @param metric - The metrics data to be logged
+ * @param metric.widgetName - Name of the widget generating the metric
+ * @param metric.event - Type of event being logged
+ * @param metric.props - Optional properties associated with the widget
+ * @param metric.timestamp - Unix timestamp when the event occurred
+ * @param metric.additionalContext - Optional additional context data
+ *
+ * @example
+ * ```typescript
+ * logMetrics({
+ *   widgetName: 'CallControl',
+ *   event: 'WIDGET_MOUNTED',
+ *   props: { callId: '123' },
+ *   timestamp: Date.now(),
+ *   additionalContext: { userId: 'user123' }
+ * });
+ * ```
+ */
+export const logMetrics = (metric: WidgetMetrics) => {
+  if (!store.logger) {
+    console.warn('CC-Widgets: UI Metrics: No logger found');
+    return;
+  }
+  store.logger.log(`CC-Widgets: UI Metrics: ${JSON.stringify(metric, null, 2)}`, {
+    module: 'metricsLogger.tsx',
+    method: 'logMetrics',
+  });
+};
+
+/**
+ * Determines if props have changed between two objects using shallow comparison.
+ *
+ * This function performs a shallow comparison between two objects to detect changes.
+ * It compares object keys and primitive values, but does not recursively compare
+ * nested objects. This is useful for determining when to log metrics based on prop changes.
+ *
+ * @param prev - The previous props object
+ * @param next - The next props object to compare against
+ * @returns `true` if the props have changed, `false` otherwise
+ *
+ * @example
+ * ```typescript
+ * const oldProps = { name: 'John', age: 30 };
+ * const newProps = { name: 'John', age: 31 };
+ *
+ * if (havePropsChanged(oldProps, newProps)) {
+ *   // Props have changed, log metrics
+ *   logMetrics({
+ *     widgetName: 'UserProfile',
+ *     event: 'WIDGET_MOUNTED',
+ *     props: newProps,
+ *     timestamp: Date.now()
+ *   });
+ * } * ```
+ *
+ * @remarks
+ * The function is important as we dont sanitize our props right now.
+ * Once we start sanitizing we can do a deep comparison. This is used to only re-render
+ * the HOC if the props have changed.
+ */
+export function havePropsChanged(prev: any, next: any): boolean {
+  if (prev === next) return false;
+
+  // Do shallow comparison
+  if (typeof prev !== typeof next) return true;
+  if (!prev || !next) return prev !== next;
+
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+
+  if (prevKeys.length !== nextKeys.length) return true;
+
+  // Check if any primitive values changed
+  for (const key of prevKeys) {
+    const prevVal = prev[key];
+    const nextVal = next[key];
+
+    if (prevVal === nextVal) continue;
+    if (typeof prevVal !== 'object' || prevVal === null) return true;
+    if (typeof nextVal !== 'object' || nextVal === null) return true;
+  }
+
+  // All shallow comparisons passed, consider props unchanged
+  return false;
+}
diff --git a/packages/contact-center/ui-logging/src/withMetrics.tsx b/packages/contact-center/ui-logging/src/withMetrics.tsx
diff --git a/packages/contact-center/ui-logging/tests/metricsLogger.test.ts b/packages/contact-center/ui-logging/tests/metricsLogger.test.ts
diff --git a/packages/contact-center/ui-logging/tests/withMetrics.test.tsx b/packages/contact-center/ui-logging/tests/withMetrics.test.tsx
diff --git a/packages/contact-center/ui-logging/tsconfig.json b/packages/contact-center/ui-logging/tsconfig.json
diff --git a/packages/contact-center/ui-logging/tsconfig.test.json b/packages/contact-center/ui-logging/tsconfig.test.json
diff --git a/packages/contact-center/ui-logging/webpack.config.js b/packages/contact-center/ui-logging/webpack.config.js
diff --git a/packages/contact-center/user-state/package.json b/packages/contact-center/user-state/package.json
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/widgets-samples/cc/samples-cc-react-app/webpack.config.js b/widgets-samples/cc/samples-cc-react-app/webpack.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -95,4 +95,4 @@`
`95`	`95`	`"^.+\\.(css\|less\|scss)$": "babel-jest"`
`96`	`96`	`}`
`97`	`97`	`}`
`98`		`-}`
	`98`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -65,4 +65,4 @@`
`65`	`65`	`"react": ">=18.3.1",`
`66`	`66`	`"react-dom": ">=18.3.1"`
`67`	`67`	`}`
`68`		`-}`
	`68`	`+}`