Aswathy/CRO-778/feat: Added the console error tracking for the virtual signup flow

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,18 @@ const AccountSignup = ({
     const history_value = React.useRef();
     const [pw_input, setPWInput] = React.useState('');
     const [is_password_modal, setIsPasswordModal] = React.useState(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_signup_flow_error] = useGrowthbookGetFeatureValue({
+        featureFlag: 'signup_flow_error',
+        defaultValue: false,
+    });
+
     const checkResidenceIsBrazil = selected_country =>
         selected_country && residence_list[indexOfSelection(selected_country)]?.value?.toLowerCase() === 'br';
 
@@ -113,6 +119,42 @@ 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: localize(errorMessage),
+                        screen_name,
+                    },
+                },
+                cache: true,
+            },
+        ]);
+    };
+
+    React.useEffect(() => {
+        if (is_signup_flow_error) {
+            cacheTrackEvents.trackConsoleErrors(errorMessage => {
+                if (errorMessage) {
+                    const screen_name = !is_password_modal ? 'country_selection_screen' : 'password_screen_opened';
+                    // Check and set the logging state using the ref
+                    if (screen_name === 'country_selection_screen' && !isCountryScreenLoggedOnceRef.current) {
+                        trackSignupErrorEvent('signup_flow_error', errorMessage, screen_name);
+                        // Update both the ref and state
+                        isCountryScreenLoggedOnceRef.current = true;
+                    } else if (screen_name === 'password_screen_opened') {
+                        trackSignupErrorEvent('signup_flow_error', errorMessage, screen_name);
+                    }
+                }
+            });
+        }
+    }, [is_password_modal]);
+
     const validateSignupPassthrough = values => validateSignupFields(values, residence_list);
 
     const indexOfSelection = selected_country =>
@@ -144,7 +186,7 @@ const AccountSignup = ({
             Analytics.trackEvent('ce_virtual_signup_form', {
                 action: 'signup_flow_error',
                 form_name: is_mobile ? 'virtual_signup_web_mobile_default' : 'virtual_signup_web_desktop_default',
-                error_message: error,
+                error_message: localize(error),
             });
         } else {
             setIsFromSignupAccount(true);

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

@@ -160,5 +160,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;