chore(checkout-widgets): Track errors (#2681)

Author: keithbro-imx

packages/checkout/widgets-lib/src/lib/hooks/useSignOrder.ts

@@ -23,7 +23,7 @@ import {
   SignCurrencyFilter,
   SquidPostHookCall,
 } from '../primary-sales';
-import { filterAllowedTransactions, hexToText } from '../utils';
+import { errorToString, filterAllowedTransactions, hexToText } from '../utils';
 
 const toSignedProduct = (
   product: SignApiProduct,
@@ -194,7 +194,7 @@ export const useSignOrder = (input: SignOrderInput) => {
         }
         const error: SignOrderError = {
           type: errorType,
-          data: { error: err },
+          data: { error: errorToString(err) },
         };
         setSignError(error);
         return [undefined, error];

packages/checkout/widgets-lib/src/lib/primary-sales.ts

@@ -61,7 +61,7 @@ export type SignOrderInput = {
 
 export type SignOrderError = {
   type: SaleErrorTypes;
-  data?: Record<string, unknown>;
+  data?: Record<string, string>;
 };
 
 export type ExecutedTransaction = {

packages/checkout/widgets-lib/src/lib/utils.ts

@@ -240,6 +240,17 @@ export function removeSpace(str: string): string {
   return str.replace(/\s/g, '');
 }
 
+export const errorToString = (error: unknown) => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  return JSON.stringify(error);
+};
+
 export const filterAllowedTransactions = async (
   transactions: SignedTransaction[],
   provider: WrappedBrowserProvider,

packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx

@@ -16,6 +16,7 @@ import {
   useState,
 } from 'react';
 import { Environment } from '@imtbl/config';
+import { trackError } from '@imtbl/metrics';
 import { ConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext';
 import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import {
@@ -88,7 +89,7 @@ type SaleContextValues = SaleContextProps & {
     paymentMethod?: SalePaymentTypes | undefined,
     data?: Record<string, unknown>
   ) => void;
-  goToErrorView: (type: SaleErrorTypes, data?: Record<string, unknown>) => void;
+  goToErrorView: (type: SaleErrorTypes, data?: Record<string, string>) => void;
   goToSuccessView: (data?: Record<string, unknown>) => void;
   fundingRoutes: FundingRoute[];
   disabledPaymentTypes: SalePaymentTypes[];
@@ -306,13 +307,15 @@ export function SaleContextProvider(props: {
   );
 
   const goToErrorView = useCallback(
-    (errorType: SaleErrorTypes, data: Record<string, unknown> = {}) => {
+    (errorType: SaleErrorTypes, data: Record<string, string> = {}) => {
       errorRetries.current += 1;
       if (errorRetries.current > MAX_ERROR_RETRIES) {
         errorRetries.current = 0;
         setPaymentMethod(undefined);
       }
 
+      trackError('commerce', 'saleError', new Error(errorType), data);
+
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,

packages/checkout/widgets-lib/src/widgets/sale/hooks/useQuoteOrder.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { Environment } from '@imtbl/config';
 import { WrappedBrowserProvider, SaleItem } from '@imtbl/checkout-sdk';
-import { compareStr } from '../../../lib/utils';
+import { compareStr, errorToString } from '../../../lib/utils';
 import { PRIMARY_SALES_API_BASE_URL } from '../utils/config';
 
 import { OrderQuote, OrderQuoteCurrency, SaleErrorTypes } from '../types';
@@ -26,7 +26,7 @@ export const defaultOrderQuote: OrderQuote = {
 
 export type ConfigError = {
   type: SaleErrorTypes;
-  data?: Record<string, unknown>;
+  data?: Record<string, string>;
 };
 
 export const useQuoteOrder = ({
@@ -46,7 +46,7 @@ export const useQuoteOrder = ({
   ConfigError | undefined
   >(undefined);
 
-  const setError = (error: unknown) => {
+  const setError = (error: string) => {
     setOrderQuoteError({
       type: SaleErrorTypes.SERVICE_BREAKDOWN,
       data: { reason: 'Error fetching settlement currencies', error },
@@ -69,7 +69,7 @@ export const useQuoteOrder = ({
 
         setQueryParams(params.toString());
       } catch (error) {
-        setError(error);
+        setError(errorToString(error));
       }
     })();
   }, [items, provider]);
@@ -102,7 +102,7 @@ export const useQuoteOrder = ({
         );
         setOrderQuote(config);
       } catch (error) {
-        setError(error);
+        setError(errorToString(error));
       } finally {
         fetching.current = false;
       }

packages/checkout/widgets-lib/src/widgets/sale/hooks/useSignOrder.ts

@@ -17,6 +17,7 @@ import {
 import { PRIMARY_SALES_API_BASE_URL } from '../utils/config';
 import { hexToText } from '../functions/utils';
 import { filterAllowedTransactions } from '../functions/signUtils';
+import { errorToString } from '../../../lib/utils';
 
 type SignApiTransaction = {
   contract_address: string;
@@ -249,7 +250,7 @@ export const useSignOrder = (input: SignOrderInput) => {
         }
         const error: SignOrderError = {
           type: errorType,
-          data: { error: err },
+          data: { error: errorToString(err) },
         };
         setSignError(error);
         return [undefined, error];

packages/checkout/widgets-lib/src/widgets/sale/types.ts

@@ -59,7 +59,7 @@ export type SignOrderInput = {
 
 export type SignOrderError = {
   type: SaleErrorTypes;
-  data?: Record<string, unknown>;
+  data?: Record<string, string>;
 };
 
 export type ExecutedTransaction = {

packages/checkout/widgets-lib/src/widgets/sale/views/OrderSummary.tsx

@@ -32,7 +32,7 @@ import {
 import { HandoverTarget } from '../../../context/handover-context/HandoverContext';
 import { ViewContext, ViewActions, SharedViews } from '../../../context/view-context/ViewContext';
 import { useHandover } from '../../../lib/hooks/useHandover';
-import { getRemoteRive } from '../../../lib/utils';
+import { errorToString, getRemoteRive } from '../../../lib/utils';
 
 type OrderSummaryProps = {
   subView: OrderSummarySubViews;
@@ -202,8 +202,10 @@ export function OrderSummary({ subView }: OrderSummaryProps) {
           },
         },
       });
-    } catch (error: any) {
-      goToErrorView(SaleErrorTypes.SERVICE_BREAKDOWN, error);
+    } catch (error: unknown) {
+      goToErrorView(SaleErrorTypes.SERVICE_BREAKDOWN, {
+        error: errorToString(error),
+      });
     }
   }, [fundingBalances, loadingBalances, fundingBalancesResult]);
 

packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx

@@ -16,7 +16,7 @@ import { HandoverTarget } from '../../../context/handover-context/HandoverContex
 import { HandoverContent } from '../../../components/Handover/HandoverContent';
 import { SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
 import { isPassportProvider } from '../../../lib/provider';
-import { getRemoteRive } from '../../../lib/utils';
+import { errorToString, getRemoteRive } from '../../../lib/utils';
 import { HandoverDuration } from '../../../context/handover-context/HandoverProvider';
 
 interface StepConfig {
@@ -120,7 +120,7 @@ export function PayWithCoins() {
           onTxnStepExecuteNextTransaction,
         );
       } catch (error) {
-        goToErrorView(SaleErrorTypes.SERVICE_BREAKDOWN, { error });
+        goToErrorView(SaleErrorTypes.SERVICE_BREAKDOWN, { error: errorToString(error) });
       }
     };