From e48ddaadde57f86c232c3661a16e513d2fcc73de Mon Sep 17 00:00:00 2001 From: aswathy Date: Wed, 13 Nov 2024 11:06:15 +0400 Subject: [PATCH 1/4] feat: added the console error tracking for the virtual signup flow --- .../account-signup-modal.jsx | 26 ++++++++++++++++++- .../password-selection-modal.jsx | 24 +++++++++++++++++ .../core/src/Utils/Analytics/analytics.ts | 24 +++++++++++++++++ 3 files changed, 73 insertions(+), 1 deletion(-) 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..58a2d17a8853 100644 --- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx +++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx @@ -58,6 +58,29 @@ const AccountSignup = ({ React.useEffect(() => { // eslint-disable-next-line no-console + cacheTrackEvents.trackConsoleErrors(errorMessage => { + if (errorMessage) { + cacheTrackEvents.loadEvent([ + { + event: { + name: 'ce_virtual_signup_form', + properties: { + action: 'signup_flow_error', + form_name: is_mobile + ? 'virtual_signup_web_mobile_default' + : 'virtual_signup_web_desktop_default', + error_message: localize(errorMessage), + screen_name: 'country_selection_screen', + }, + }, + cache: true, + }, + ]); + } + + // console.log('Captured error message:', errorMessage); + }); + cacheTrackEvents.loadEvent([ { event: { @@ -96,6 +119,7 @@ const AccountSignup = ({ }); // need to modify data from ab testing platform to reach translation and tracking needs const fetchQuestionnarieData = () => { + console.error('Test error message without an Error object'); let ab_value = Analytics.getFeatureValue('questionnaire-config', 'inactive') || 'inactive'; const default_ab_value = ab_value; ab_value = ab_value?.[language] ?? ab_value?.EN ?? ab_value; @@ -144,7 +168,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/App/Containers/PasswordSelectionModal/password-selection-modal.jsx b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx index 7667fb8b74eb..4cc306484338 100644 --- a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx +++ b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx @@ -29,6 +29,29 @@ const PasswordSelectionModal = observer( const { is_mobile } = ui; React.useEffect(() => { + cacheTrackEvents.trackConsoleErrors(errorMessage => { + if (errorMessage) { + cacheTrackEvents.loadEvent([ + { + event: { + name: 'ce_virtual_signup_form', + properties: { + action: 'signup_flow_error', + form_name: is_mobile + ? 'virtual_signup_web_mobile_default' + : 'virtual_signup_web_desktop_default', + error_message: localize(errorMessage), + screen_name: 'password_screen', + }, + }, + cache: true, + }, + ]); + } + + // console.log('Captured error message:', errorMessage); + }); + cacheTrackEvents.loadEvent([ { event: { @@ -45,6 +68,7 @@ const PasswordSelectionModal = observer( }, [is_mobile]); return ( + console.error('Test error message without an Error object');
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; From 7a83e970db3c32402f0af6d43efc083ed48c3176 Mon Sep 17 00:00:00 2001 From: aswathy Date: Wed, 13 Nov 2024 11:36:15 +0400 Subject: [PATCH 2/4] fix: removed the console errors --- .../App/Containers/AccountSignupModal/account-signup-modal.jsx | 3 --- .../PasswordSelectionModal/password-selection-modal.jsx | 3 --- 2 files changed, 6 deletions(-) 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 58a2d17a8853..274cd6114a29 100644 --- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx +++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx @@ -77,8 +77,6 @@ const AccountSignup = ({ }, ]); } - - // console.log('Captured error message:', errorMessage); }); cacheTrackEvents.loadEvent([ @@ -119,7 +117,6 @@ const AccountSignup = ({ }); // need to modify data from ab testing platform to reach translation and tracking needs const fetchQuestionnarieData = () => { - console.error('Test error message without an Error object'); let ab_value = Analytics.getFeatureValue('questionnaire-config', 'inactive') || 'inactive'; const default_ab_value = ab_value; ab_value = ab_value?.[language] ?? ab_value?.EN ?? ab_value; diff --git a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx index 4cc306484338..7ff6bffc641b 100644 --- a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx +++ b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx @@ -48,8 +48,6 @@ const PasswordSelectionModal = observer( }, ]); } - - // console.log('Captured error message:', errorMessage); }); cacheTrackEvents.loadEvent([ @@ -68,7 +66,6 @@ const PasswordSelectionModal = observer( }, [is_mobile]); return ( - console.error('Test error message without an Error object');
Date: Thu, 14 Nov 2024 14:42:32 +0400 Subject: [PATCH 3/4] feat: added the console trackjs error for the user signup flow --- .../account-signup-modal.jsx | 79 +++++++++++++------ .../password-selection-modal.jsx | 21 ----- 2 files changed, 57 insertions(+), 43 deletions(-) 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 274cd6114a29..dcce0c570324 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'; @@ -58,27 +64,6 @@ const AccountSignup = ({ React.useEffect(() => { // eslint-disable-next-line no-console - cacheTrackEvents.trackConsoleErrors(errorMessage => { - if (errorMessage) { - cacheTrackEvents.loadEvent([ - { - event: { - name: 'ce_virtual_signup_form', - properties: { - action: 'signup_flow_error', - form_name: is_mobile - ? 'virtual_signup_web_mobile_default' - : 'virtual_signup_web_desktop_default', - error_message: localize(errorMessage), - screen_name: 'country_selection_screen', - }, - }, - cache: true, - }, - ]); - } - }); - cacheTrackEvents.loadEvent([ { event: { @@ -134,6 +119,56 @@ const AccountSignup = ({ setABQuestionnaire(fetchQuestionnarieData()); }, []); // eslint-disable-line react-hooks/exhaustive-deps + 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) { + cacheTrackEvents.loadEvent([ + { + event: { + name: 'ce_virtual_signup_form', + properties: { + action: 'signup_flow_error', + form_name: is_mobile + ? 'virtual_signup_web_mobile_default' + : 'virtual_signup_web_desktop_default', + error_message: localize(errorMessage), + screen_name, + }, + }, + cache: true, + }, + ]); + + // Update both the ref and state + isCountryScreenLoggedOnceRef.current = true; + } else if (screen_name === 'password_screen_opened') { + cacheTrackEvents.loadEvent([ + { + event: { + name: 'ce_virtual_signup_form', + properties: { + action: 'signup_flow_error', + form_name: is_mobile + ? 'virtual_signup_web_mobile_default' + : 'virtual_signup_web_desktop_default', + error_message: localize(errorMessage), + screen_name, + }, + }, + cache: true, + }, + ]); + } + } + }); + } + }, [is_password_modal]); + const validateSignupPassthrough = values => validateSignupFields(values, residence_list); const indexOfSelection = selected_country => diff --git a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx index 7ff6bffc641b..7667fb8b74eb 100644 --- a/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx +++ b/packages/core/src/App/Containers/PasswordSelectionModal/password-selection-modal.jsx @@ -29,27 +29,6 @@ const PasswordSelectionModal = observer( const { is_mobile } = ui; React.useEffect(() => { - cacheTrackEvents.trackConsoleErrors(errorMessage => { - if (errorMessage) { - cacheTrackEvents.loadEvent([ - { - event: { - name: 'ce_virtual_signup_form', - properties: { - action: 'signup_flow_error', - form_name: is_mobile - ? 'virtual_signup_web_mobile_default' - : 'virtual_signup_web_desktop_default', - error_message: localize(errorMessage), - screen_name: 'password_screen', - }, - }, - cache: true, - }, - ]); - } - }); - cacheTrackEvents.loadEvent([ { event: { From 1680dad3ed25babb377a29129f47a7c9e9ff04c0 Mon Sep 17 00:00:00 2001 From: aswathy Date: Fri, 15 Nov 2024 15:19:16 +0400 Subject: [PATCH 4/4] fix: peer comments --- .../account-signup-modal.jsx | 54 +++++++------------ 1 file changed, 20 insertions(+), 34 deletions(-) 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 dcce0c570324..d49bb1afbd37 100644 --- a/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx +++ b/packages/core/src/App/Containers/AccountSignupModal/account-signup-modal.jsx @@ -119,50 +119,36 @@ 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) { - cacheTrackEvents.loadEvent([ - { - event: { - name: 'ce_virtual_signup_form', - properties: { - action: 'signup_flow_error', - form_name: is_mobile - ? 'virtual_signup_web_mobile_default' - : 'virtual_signup_web_desktop_default', - error_message: localize(errorMessage), - screen_name, - }, - }, - cache: true, - }, - ]); - + trackSignupErrorEvent('signup_flow_error', errorMessage, screen_name); // Update both the ref and state isCountryScreenLoggedOnceRef.current = true; } else if (screen_name === 'password_screen_opened') { - cacheTrackEvents.loadEvent([ - { - event: { - name: 'ce_virtual_signup_form', - properties: { - action: 'signup_flow_error', - form_name: is_mobile - ? 'virtual_signup_web_mobile_default' - : 'virtual_signup_web_desktop_default', - error_message: localize(errorMessage), - screen_name, - }, - }, - cache: true, - }, - ]); + trackSignupErrorEvent('signup_flow_error', errorMessage, screen_name); } } });