[NO CHANGELOG] [ADD TOKENS WIDGET] fix: Add more metrics (#2439)

immutable · Dec 2, 2024 · a8d1cec · a8d1cec
1 parent 141ab88
commit a8d1cec
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/packages/checkout/widgets-lib/src/lib/metrics.ts b/packages/checkout/widgets-lib/src/lib/metrics.ts
@@ -22,10 +22,13 @@ export const withMetrics = <T>(
 export const withMetricsAsync = async <T>(
   fn: (flow: Flow) => Promise<T>,
   flowName: string,
+  anonymousId?: string,
   errorType?: (error:any)=>string,
 ): Promise<T> => {
   const flow: Flow = trackFlow('commerce', flowName);
-
+  if (anonymousId) {
+    flow.addEvent(`anonymousId_${anonymousId}`);
+  }
   try {
     return await fn(flow);
   } catch (error:any) {

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useExecute.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useExecute.ts
@@ -15,13 +15,14 @@ import { EventTargetContext } from '../../../context/event-target-context/EventT
 import { sendAddTokensFailedEvent } from '../AddTokensWidgetEvents';
 import { retry } from '../../../lib/retry';
 import { withMetricsAsync } from '../../../lib/metrics';
-import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
+import { useAnalytics, UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { isRejectedError } from '../functions/errorType';
 
 const TRANSACTION_NOT_COMPLETED = 'transaction not completed';
 
 export const useExecute = (contextId: string, environment: Environment) => {
   const { showErrorHandover } = useError(environment);
+  const { user } = useAnalytics();
   const {
     eventTargetState: { eventTarget },
   } = useContext(EventTargetContext);
@@ -202,6 +203,15 @@ export const useExecute = (contextId: string, environment: Environment) => {
     return await waitForReceipt(provider, tx.hash);
   };
 
+  const getAnonymousId = async () => {
+    try {
+      const userData = await user();
+      return userData?.anonymousId() ?? undefined;
+    } catch (error) {
+      return undefined;
+    }
+  };
+
   const approve = async (
     fromProviderInfo: EIP6963ProviderInfo,
     provider: Web3Provider,
@@ -212,6 +222,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
         return await withMetricsAsync(
           (flow) => callApprove(flow, fromProviderInfo, provider, routeResponse),
           `${UserJourney.ADD_TOKENS}_Approve`,
+          await getAnonymousId(),
           (error) => (isRejectedError(error) ? 'rejected' : ''),
         );
       }
@@ -251,6 +262,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
       return await withMetricsAsync(
         (flow) => callExecute(flow, squid, fromProviderInfo, provider, routeResponse),
         `${UserJourney.ADD_TOKENS}_Execute`,
+        await getAnonymousId(),
         (error) => (isRejectedError(error) ? 'rejected' : ''),
       );
     } catch (error) {

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -29,6 +29,7 @@ import {
 import { Web3Provider } from '@ethersproject/providers';
 import { useTranslation } from 'react-i18next';
 import { ActionType } from '@0xsquid/squid-types';
+import { trackError } from '@imtbl/metrics';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import {
@@ -269,6 +270,8 @@ export function AddTokens({
         toTokenAddress,
         geoBlocked: !isSwapAvailable,
       },
+    }).catch((err) => {
+      trackError('commerce', 'addTokensLoaded', err);
     });
   }, [id, isSwapAvailable]);
 

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
@@ -27,6 +27,7 @@ import { t } from 'i18next';
 import { Trans } from 'react-i18next';
 import { Environment } from '@imtbl/config';
 import { ChainId } from '@imtbl/checkout-sdk';
+import { trackError } from '@imtbl/metrics';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { AddTokensContext } from '../context/AddTokensContext';
 import { useRoutes } from '../hooks/useRoutes';
@@ -398,6 +399,8 @@ export function Review({
           fromTokenSymbol: amountData?.fromToken.symbol,
           toTokenSymbol: amountData?.toToken.symbol,
         },
+      }).catch((err) => {
+        trackError('commerce', 'addTokensFundsAdded', err);
       });
 
       sendAddTokensSuccessEvent(eventTarget, executeTxnReceipt.transactionHash);