Aswathy/CRO-778/feat: Added the console error tracking for the virtual signup flow (deriv-com#17497)

* feat: added the console error tracking for the virtual signup flow

* fix: removed the console errors

* feat: added the console trackjs error for the user signup flow

* fix: peer comments

* fix: removed the localized error message

* fix: removed the localize form analytics

* fix: changed the naming of the feature f;ag variable

* fix: added a condition inside the country selection screen for capturing multiple errors

* fix: updated the ref with state of password model

* fix: added the console

* fix: added the feature condition inside trackconsole method

* fix: changed the default value to true

* fix: added the dependency for useeffect

* fix: peer comments

* fix: added the screen name for the signup button

Author: aswathy-deriv

packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx

@@ -9,7 +9,7 @@ import { Analytics } from '@deriv-com/analytics';
 
 import { WS } from 'Services';
 import { observer, useStore } from '@deriv/stores';
-
+import { useGrowthbookGetFeatureValue } from '@deriv/hooks';
 import CitizenshipForm from '../CitizenshipModal/set-citizenship-form.jsx';
 import PasswordSelectionModal from '../PasswordSelectionModal/password-selection-modal.jsx';
 import QuestionnaireModal from '../QuestionnaireModal';
@@ -34,12 +34,19 @@ const AccountSignup = ({
     const history_value = React.useRef();
     const [pw_input, setPWInput] = React.useState('');
     const [is_password_modal, setIsPasswordModal] = React.useState(false);
+    const isPasswordModalRef = React.useRef(false);
+    const isCountryScreenLoggedOnceRef = React.useRef(false);
     const [is_disclaimer_accepted, setIsDisclaimerAccepted] = React.useState(false);
     const [is_questionnaire, setIsQuestionnaire] = React.useState(false);
     const [ab_questionnaire, setABQuestionnaire] = React.useState();
     const [modded_state, setModdedState] = React.useState({});
     const language = getLanguage();
 
+    const [is_tracking_signup_errors] = useGrowthbookGetFeatureValue({
+        featureFlag: 'signup_flow_error',
+        defaultValue: true,
+    });
+
     const checkResidenceIsBrazil = selected_country =>
         selected_country && residence_list[indexOfSelection(selected_country)]?.value?.toLowerCase() === 'br';
 
@@ -113,6 +120,51 @@ const AccountSignup = ({
         setABQuestionnaire(fetchQuestionnarieData());
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+    const trackSignupErrorEvent = (action, errorMessage, screen_name) => {
+        const form_name = is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default';
+        cacheTrackEvents.loadEvent([
+            {
+                event: {
+                    name: 'ce_virtual_signup_form',
+                    properties: {
+                        action,
+                        form_name,
+                        error_message: errorMessage,
+                        screen_name,
+                    },
+                },
+            },
+        ]);
+    };
+
+    React.useEffect(() => {
+        isPasswordModalRef.current = is_password_modal; // Sync ref with state
+    }, [is_password_modal]);
+
+    React.useEffect(() => {
+        cacheTrackEvents.trackConsoleErrors(errorMessage => {
+            if (is_tracking_signup_errors) {
+                if (errorMessage) {
+                    const screen_name = !isPasswordModalRef.current
+                        ? 'country_selection_screen'
+                        : 'password_screen_opened';
+
+                    if (screen_name === 'country_selection_screen') {
+                        if (
+                            !isCountryScreenLoggedOnceRef.current ||
+                            isCountryScreenLoggedOnceRef.current !== errorMessage
+                        ) {
+                            trackSignupErrorEvent('signup_flow_error', errorMessage, screen_name);
+                            isCountryScreenLoggedOnceRef.current = errorMessage;
+                        }
+                    } else if (screen_name === 'password_screen_opened') {
+                        trackSignupErrorEvent('signup_flow_error', errorMessage, screen_name);
+                    }
+                }
+            }
+        });
+    }, [is_tracking_signup_errors]);
+
     const validateSignupPassthrough = values => validateSignupFields(values, residence_list);
 
     const indexOfSelection = selected_country =>
@@ -145,6 +197,7 @@ const AccountSignup = ({
                 action: 'signup_flow_error',
                 form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
                 error_message: error,
+                screen_name: 'password_screen_opened',
             });
         } else {
             setIsFromSignupAccount(true);

packages/core/src/Utils/Analytics/analytics.ts

@@ -162,5 +162,29 @@ const cacheTrackEvents = {
         });
         return cacheTrackEvents;
     },
+    trackConsoleErrors: (callback?: (errorMessage: string) => void): void => {
+        /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+        const originalConsoleError = console.error;
+
+        console.error = function (...args: unknown[]): void {
+            // Log the error to the console as usual
+            originalConsoleError.apply(console, args);
+
+            // Create a clean error message without __trackjs_state__
+            const errorMessage = args
+                .map(arg =>
+                    arg && typeof arg === 'object' && 'message' in arg
+                        ? (arg as Error).message
+                        : typeof arg === 'object'
+                        ? JSON.stringify(arg, (key, value) => (key.startsWith('__trackjs') ? undefined : value))
+                        : String(arg)
+                )
+                .join(' ');
+
+            if (typeof callback === 'function') {
+                callback(errorMessage);
+            }
+        };
+    },
 };
 export default cacheTrackEvents;