From 1773e1c8d50cb15b20791763a6ce1dc38f42b229 Mon Sep 17 00:00:00 2001 From: pedromcunha Date: Thu, 9 Jan 2025 16:07:28 -0500 Subject: [PATCH 1/2] Extract more error data out of error message --- .../DepositAddressModalRenderer.tsx | 9 +++++---- .../TransactionModalRenderer.tsx | 15 +++++++++------ .../components/widgets/SwapWidgetRenderer.tsx | 7 ++++--- packages/ui/src/utils/errors.ts | 17 +++++++++++++++++ 4 files changed, 35 insertions(+), 13 deletions(-) create mode 100644 packages/ui/src/utils/errors.ts diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx index d27561bc..da517607 100644 --- a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx +++ b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx @@ -32,6 +32,7 @@ import { extractDepositAddress, extractQuoteId } from '../../../utils/quote.js' import { getDeadAddress } from '@reservoir0x/relay-sdk' import { useQueryClient } from '@tanstack/react-query' import { bitcoin } from '../../../utils/bitcoin.js' +import { errorToJSON } from '../../../utils/errors.js' export enum TransactionProgressStep { WaitingForDeposit, @@ -171,9 +172,9 @@ export const DepositAddressModalRenderer: FC = ({ staleTime: Infinity }, (e: any) => { - const errorMessage = e?.response?.data?.message - ? new Error(e?.response?.data?.message) - : e + const errorMessage = errorToJSON( + e?.response?.data?.message ? new Error(e?.response?.data?.message) : e + ) onAnalyticEvent?.(EventNames.QUOTE_ERROR, { wallet_connector: connector?.name, error_message: errorMessage, @@ -246,7 +247,7 @@ export const DepositAddressModalRenderer: FC = ({ } setProgressStep(TransactionProgressStep.Error) onAnalyticEvent?.(EventNames.DEPOSIT_ADDRESS_SWAP_ERROR, { - error_message: executionStatus?.details ?? quoteError, + error_message: errorToJSON(executionStatus?.details ?? quoteError), wallet_connector: connector?.name, quote_id: requestId, amount_in: parseFloat(`${debouncedInputAmountValue}`), diff --git a/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx index 97e5daf2..9a830609 100644 --- a/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx +++ b/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx @@ -31,6 +31,7 @@ import { ProviderOptionsContext } from '../../../providers/RelayKitProvider.js' import { useAccount, useWalletClient } from 'wagmi' import { extractQuoteId, parseFees } from '../../../utils/quote.js' import { adaptViemWallet, getDeadAddress } from '@reservoir0x/relay-sdk' +import { errorToJSON } from '../../../utils/errors.js' export enum TransactionProgressStep { ReviewQuote, @@ -230,9 +231,9 @@ export const TransactionModalRenderer: FC = ({ : undefined }, (e: any) => { - const errorMessage = e?.response?.data?.message - ? new Error(e?.response?.data?.message) - : e + const errorMessage = errorToJSON( + e?.response?.data?.message ? new Error(e?.response?.data?.message) : e + ) onAnalyticEvent?.(EventNames.QUOTE_ERROR, { wallet_connector: connector?.name, error_message: errorMessage, @@ -254,9 +255,11 @@ export const TransactionModalRenderer: FC = ({ return } - const errorMessage = error?.response?.data?.message - ? new Error(error?.response?.data?.message) - : error + const errorMessage = errorToJSON( + error?.response?.data?.message + ? new Error(error?.response?.data?.message) + : error + ) onAnalyticEvent?.(EventNames.SWAP_ERROR, { error_message: errorMessage, diff --git a/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx b/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx index 5929c70d..f9436784 100644 --- a/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx +++ b/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx @@ -36,6 +36,7 @@ import { findSupportedWallet } from '../../utils/address.js' import { getDeadAddress } from '@reservoir0x/relay-sdk' +import { errorToJSON } from '../../utils/errors.js' export type TradeType = 'EXACT_INPUT' | 'EXPECTED_OUTPUT' @@ -490,9 +491,9 @@ const SwapWidgetRenderer: FC = ({ : undefined }, (e: any) => { - const errorMessage = e?.response?.data?.message - ? new Error(e?.response?.data?.message) - : e + const errorMessage = errorToJSON( + e?.response?.data?.message ? new Error(e?.response?.data?.message) : e + ) onAnalyticEvent?.(EventNames.QUOTE_ERROR, { wallet_connector: connector?.name, error_message: errorMessage, diff --git a/packages/ui/src/utils/errors.ts b/packages/ui/src/utils/errors.ts new file mode 100644 index 00000000..8935857d --- /dev/null +++ b/packages/ui/src/utils/errors.ts @@ -0,0 +1,17 @@ +export const errorToJSON = (error: any) => { + if (!(error instanceof Error)) { + return error + } + try { + return JSON.stringify({ + //@ts-expect-error + name: error.name, + //@ts-expect-error + message: error.message, + stack: error.stack, + ...error + }) + } catch (e) { + return error + } +} From 93d95565070e8bf84706f2422b727e9106b33592 Mon Sep 17 00:00:00 2001 From: pedromcunha Date: Thu, 9 Jan 2025 16:07:57 -0500 Subject: [PATCH 2/2] feat: changeset --- .changeset/witty-carrots-love.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-carrots-love.md diff --git a/.changeset/witty-carrots-love.md b/.changeset/witty-carrots-love.md new file mode 100644 index 00000000..9f4174e1 --- /dev/null +++ b/.changeset/witty-carrots-love.md @@ -0,0 +1,5 @@ +--- +'@reservoir0x/relay-kit-ui': patch +--- + +Extract more data out of error message when sending to analytics handler