From 93874fea5970a2afc763a99cdffef775687dbd3f Mon Sep 17 00:00:00 2001 From: tommasini Date: Mon, 20 Jan 2025 22:37:37 +0000 Subject: [PATCH 1/5] Add measurement do wallet mounting component, and also bring back the mobile vitals from Sentry automatic instrumentation --- app/components/Views/Wallet/index.tsx | 7 +++++++ app/util/sentry/utils.js | 2 -- app/util/trace.ts | 1 + 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index f21223ebdf7..e4a9ce6b703 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -104,6 +104,7 @@ import { import { TokenI } from '../../UI/Tokens/types'; import { Hex } from '@metamask/utils'; import { Token } from '@metamask/assets-controllers'; +import { TraceName, endTrace, trace } from '../../../util/trace'; const createStyles = ({ colors, typography }: Theme) => StyleSheet.create({ @@ -243,6 +244,12 @@ const Wallet = ({ : AvatarAccountType.JazzIcon, ); + trace({ name: TraceName.Wallet }); + + useEffect(() => { + endTrace({ name: TraceName.Wallet }); + }, []); + useEffect(() => { if ( isDataCollectionForMarketingEnabled === null && diff --git a/app/util/sentry/utils.js b/app/util/sentry/utils.js index 87a5397d290..0208f65eb32 100644 --- a/app/util/sentry/utils.js +++ b/app/util/sentry/utils.js @@ -555,8 +555,6 @@ export function setupSentry() { beforeBreadcrumb: (breadcrumb) => rewriteBreadcrumb(breadcrumb), beforeSendTransaction: (event) => excludeEvents(event), enabled: metricsOptIn === AGREED, - // We need to deactivate this to have the same output consistently on IOS and Android - enableAutoPerformanceTracing: false, }); }; init(); diff --git a/app/util/trace.ts b/app/util/trace.ts index 4579b07918c..ed9c792e57b 100644 --- a/app/util/trace.ts +++ b/app/util/trace.ts @@ -38,6 +38,7 @@ export enum TraceName { VaultCreation = 'Login Vault Creation', AccountList = 'Account List', StoreInit = 'Store Initialization', + Wallet = 'Wallet', } export enum TraceOperation { From 129407544f495f648dea596f85631c76e6949773 Mon Sep 17 00:00:00 2001 From: tommasini Date: Tue, 21 Jan 2025 11:24:56 +0000 Subject: [PATCH 2/5] add ref for only call trace at the first render --- app/components/Views/Wallet/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index e4a9ce6b703..e7613fca2f0 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -244,7 +244,12 @@ const Wallet = ({ : AvatarAccountType.JazzIcon, ); - trace({ name: TraceName.Wallet }); + const isFirstRender = useRef(true); + + if (isFirstRender.current) { + trace({ name: TraceName.Wallet }); + isFirstRender.current = false; + } useEffect(() => { endTrace({ name: TraceName.Wallet }); From 295f1d3f52b0ce618ada36b8648eeee0e956dfeb Mon Sep 17 00:00:00 2001 From: tommasini Date: Tue, 21 Jan 2025 23:18:47 +0000 Subject: [PATCH 3/5] remove wallet measurement and add token list measurement; Add navigation trace bug fix --- app/components/Nav/App/index.js | 16 +++++++++++----- app/components/UI/Tokens/index.tsx | 12 ++++++++++-- app/components/Views/Wallet/index.tsx | 11 ----------- app/util/trace.ts | 2 +- 4 files changed, 22 insertions(+), 19 deletions(-) diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js index 32ec533e3ae..c95d5205c9c 100644 --- a/app/components/Nav/App/index.js +++ b/app/components/Nav/App/index.js @@ -595,11 +595,17 @@ const App = (props) => { const sdkInit = useRef(); const [onboarded, setOnboarded] = useState(false); - trace({ - name: TraceName.NavInit, - parentContext: getUIStartupSpan(), - op: TraceOperation.NavInit, - }); + const isFirstRender = useRef(true); + + if (isFirstRender.current) { + trace({ + name: TraceName.NavInit, + parentContext: getUIStartupSpan(), + op: TraceOperation.NavInit, + }); + + isFirstRender.current = false; + } const triggerSetCurrentRoute = (route) => { dispatch(setCurrentRoute(route)); diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx index c386fbd714c..e2e57dee4c9 100644 --- a/app/components/UI/Tokens/index.tsx +++ b/app/components/UI/Tokens/index.tsx @@ -57,6 +57,8 @@ import { selectNetworkName } from '../../../selectors/networkInfos'; import ButtonIcon from '../../../component-library/components/Buttons/ButtonIcon'; import { selectAccountTokensAcrossChains } from '../../../selectors/multichain'; import { filterAssets } from './util/filterAssets'; +import { TraceName, endTrace } from '../../../util/trace'; +import { trace } from '../../../util/trace'; // this will be imported from TokenRatesController when it is exported from there // PR: https://github.com/MetaMask/core/pull/4622 @@ -145,6 +147,9 @@ const Tokens: React.FC = ({ tokens }) => { const styles = createStyles(colors); const tokensList = useMemo((): TokenI[] => { + trace({ + name: TraceName.Tokens, + }); // if it is not popular network, display tokens only for current network const filteredAssetsParam = isPopularNetwork ? tokenNetworkFilter @@ -248,8 +253,11 @@ const Tokens: React.FC = ({ tokens }) => { ...token, tokenFiatAmount: tokenFiatBalances[i], })); - - return sortAssets(tokensWithBalances, tokenSortConfig); + const tokensSorted = sortAssets(tokensWithBalances, tokenSortConfig); + endTrace({ + name: TraceName.Tokens, + }); + return tokensSorted; } // Previous implementation // Filter tokens based on hideZeroBalanceTokens flag diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index e7613fca2f0..30b7189bee3 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -244,17 +244,6 @@ const Wallet = ({ : AvatarAccountType.JazzIcon, ); - const isFirstRender = useRef(true); - - if (isFirstRender.current) { - trace({ name: TraceName.Wallet }); - isFirstRender.current = false; - } - - useEffect(() => { - endTrace({ name: TraceName.Wallet }); - }, []); - useEffect(() => { if ( isDataCollectionForMarketingEnabled === null && diff --git a/app/util/trace.ts b/app/util/trace.ts index ed9c792e57b..d4af6823a1b 100644 --- a/app/util/trace.ts +++ b/app/util/trace.ts @@ -38,7 +38,7 @@ export enum TraceName { VaultCreation = 'Login Vault Creation', AccountList = 'Account List', StoreInit = 'Store Initialization', - Wallet = 'Wallet', + Tokens = 'Tokens List', } export enum TraceOperation { From 8a97b8ac03be134b8f55e5a1dd87dba078d62e22 Mon Sep 17 00:00:00 2001 From: tommasini Date: Wed, 22 Jan 2025 11:05:40 +0000 Subject: [PATCH 4/5] add tags to the token list and fix import lint issue --- app/components/UI/Tokens/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx index e2e57dee4c9..41a96899a94 100644 --- a/app/components/UI/Tokens/index.tsx +++ b/app/components/UI/Tokens/index.tsx @@ -57,8 +57,10 @@ import { selectNetworkName } from '../../../selectors/networkInfos'; import ButtonIcon from '../../../component-library/components/Buttons/ButtonIcon'; import { selectAccountTokensAcrossChains } from '../../../selectors/multichain'; import { filterAssets } from './util/filterAssets'; -import { TraceName, endTrace } from '../../../util/trace'; -import { trace } from '../../../util/trace'; +import { TraceName, endTrace, trace } from '../../../util/trace'; +import { getTraceTags } from '../../../util/sentry/tags'; +import { store } from '../../../store'; + // this will be imported from TokenRatesController when it is exported from there // PR: https://github.com/MetaMask/core/pull/4622 @@ -149,6 +151,7 @@ const Tokens: React.FC = ({ tokens }) => { const tokensList = useMemo((): TokenI[] => { trace({ name: TraceName.Tokens, + tags: getTraceTags(store.getState()), }); // if it is not popular network, display tokens only for current network const filteredAssetsParam = isPopularNetwork From 0e2b2f7b382aa610a345952c11e8b686c0fa447e Mon Sep 17 00:00:00 2001 From: tommasini Date: Wed, 22 Jan 2025 11:13:45 +0000 Subject: [PATCH 5/5] fix lint issues removing no needed imports at wallet view --- app/components/Views/Wallet/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index 30b7189bee3..f21223ebdf7 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -104,7 +104,6 @@ import { import { TokenI } from '../../UI/Tokens/types'; import { Hex } from '@metamask/utils'; import { Token } from '@metamask/assets-controllers'; -import { TraceName, endTrace, trace } from '../../../util/trace'; const createStyles = ({ colors, typography }: Theme) => StyleSheet.create({