diff --git a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx index 37af83c609da..d49bb1afbd37 100644 --- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx +++ b/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); diff --git a/packages/core/src/Utils/Analytics/analytics.ts b/packages/core/src/Utils/Analytics/analytics.ts index 361ccbefa180..30f6d5011ca3 100644 --- a/packages/core/src/Utils/Analytics/analytics.ts +++ b/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;