feat: add tenderly urls to sentry metadata

app/react-query.provider.tsx

@@ -2,15 +2,15 @@
 
 import { captureError } from '@/lib/shared/utils/errors'
 import { SentryMetadata, captureSentryError, shouldIgnore } from '@/lib/shared/utils/query-errors'
-import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactNode } from 'react'
 
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
     // Global handler for every react-query error
     onError: (error, query) => {
       if (shouldIgnore(error.message, error.stack)) return
-      console.log('Sentry capturing error: ', {
+      console.log('Sentry capturing query error: ', {
         meta: query?.meta,
         error,
         queryKey: query.queryKey,
@@ -22,6 +22,22 @@ export const queryClient = new QueryClient({
       captureError(error, { extra: { queryKey: query.queryKey } })
     },
   }),
+  mutationCache: new MutationCache({
+    // Global handler for every react-query mutation error (i.e. useSendTransaction)
+    onError: (error, variables, _context, mutation) => {
+      if (shouldIgnore(error.message, error.stack)) return
+      console.log('Sentry capturing mutation error: ', {
+        meta: mutation?.meta,
+        error,
+        variables,
+      })
+
+      if (mutation?.meta) return captureSentryError(error, mutation?.meta as SentryMetadata)
+
+      // Unexpected error in mutation (as expected errors should have query.meta)
+      captureError(error, { extra: { variables: variables } })
+    },
+  }),
 })
 
 queryClient.setDefaultOptions({

lib/modules/pool/actions/add-liquidity/useAddLiquidityStep.tsx

@@ -12,15 +12,17 @@ import {
   useAddLiquidityBuildCallDataQuery,
 } from './queries/useAddLiquidityBuildCallDataQuery'
 import { usePool } from '../../PoolProvider'
+import { useTenderly } from '@/lib/modules/web3/useTenderly'
 
 export const addLiquidityStepId = 'add-liquidity'
 
 export type AddLiquidityStepParams = AddLiquidityBuildQueryParams
 
 export function useAddLiquidityStep(params: AddLiquidityStepParams): TransactionStep {
-  const { pool, refetch: refetchPoolBalances } = usePool()
+  const { pool, refetch: refetchPoolBalances, chainId } = usePool()
   const [isStepActivated, setIsStepActivated] = useState(false)
   const { getTransaction } = useTransactionState()
+  const { buildTenderlyUrl } = useTenderly({ chainId })
 
   const { simulationQuery } = params
 
@@ -42,6 +44,7 @@ export function useAddLiquidityStep(params: AddLiquidityStepParams): Transaction
   const gasEstimationMeta = sentryMetaForWagmiSimulation('Error in AddLiquidity gas estimation', {
     simulationQueryData: simulationQuery.data,
     buildCallQueryData: buildCallDataQuery.data,
+    tenderlyUrl: buildTenderlyUrl(buildCallDataQuery.data),
   })
 
   const transaction = getTransaction(addLiquidityStepId)

lib/modules/pool/actions/remove-liquidity/useRemoveLiquidityStep.tsx

@@ -12,15 +12,17 @@ import {
   RemoveLiquidityBuildQueryParams,
   useRemoveLiquidityBuildCallDataQuery,
 } from './queries/useRemoveLiquidityBuildCallDataQuery'
+import { useTenderly } from '@/lib/modules/web3/useTenderly'
 
 export const removeLiquidityStepId = 'remove-liquidity'
 
 export type RemoveLiquidityStepParams = RemoveLiquidityBuildQueryParams
 
 export function useRemoveLiquidityStep(params: RemoveLiquidityStepParams): TransactionStep {
   const [isStepActivated, setIsStepActivated] = useState(false)
-  const { pool, refetch: refetchPoolUserBalances } = usePool()
+  const { pool, refetch: refetchPoolUserBalances, chainId } = usePool()
   const { getTransaction } = useTransactionState()
+  const { buildTenderlyUrl } = useTenderly({ chainId })
 
   const { simulationQuery } = params
 
@@ -44,6 +46,7 @@ export function useRemoveLiquidityStep(params: RemoveLiquidityStepParams): Trans
     {
       simulationQueryData: simulationQuery.data,
       buildCallQueryData: buildCallDataQuery.data,
+      tenderlyUrl: buildTenderlyUrl(buildCallDataQuery.data),
     }
   )
 

lib/modules/swap/useSwapStep.tsx

@@ -15,6 +15,8 @@ import { swapActionPastTense } from './swap.helpers'
 import { SwapAction } from './swap.types'
 import { useTokenBalances } from '../tokens/TokenBalancesProvider'
 import { useUserAccount } from '../web3/UserAccountProvider'
+import { useTenderly } from '../web3/useTenderly'
+import { getChainId } from '@/lib/config/app.config'
 
 export const swapStepId = 'swap'
 
@@ -37,6 +39,9 @@ export function useSwapStep({
   const [isBuildQueryEnabled, setIsBuildQueryEnabled] = useState(false)
   const { getTransaction } = useTransactionState()
   const { refetchBalances } = useTokenBalances()
+  const { buildTenderlyUrl } = useTenderly({
+    chainId: getChainId(swapState.selectedChain),
+  })
 
   const buildSwapQuery = useBuildSwapQuery({
     handler,
@@ -65,10 +70,10 @@ export function useSwapStep({
     }
   }, [simulationQuery.data])
 
-  const gasEstimationMeta = sentryMetaForWagmiSimulation(
-    'Error in swap gas estimation',
-    buildSwapQuery.data || {}
-  )
+  const gasEstimationMeta = sentryMetaForWagmiSimulation('Error in swap gas estimation', {
+    buildCallQueryData: buildSwapQuery.data,
+    tenderlyUrl: buildTenderlyUrl(buildSwapQuery.data),
+  })
 
   const transaction = getTransaction(swapStepId)
 

lib/modules/web3/contracts/useManagedSendTransaction.ts

@@ -45,16 +45,17 @@ export function useManagedSendTransaction({
     },
   })
 
-  const writeQuery = useSendTransaction({
+  const writeMutation = useSendTransaction({
     mutation: {
       meta: sentryMetaForWagmiExecution('Error sending transaction', {
         txConfig,
         estimatedGas: estimateGasQuery.data,
+        tenderlyUrl: gasEstimationMeta?.tenderlyUrl,
       }),
     },
   })
 
-  const { txHash, isSafeTxLoading } = useTxHash({ chainId, wagmiTxHash: writeQuery.data })
+  const { txHash, isSafeTxLoading } = useTxHash({ chainId, wagmiTxHash: writeMutation.data })
 
   const transactionStatusQuery = useWaitForTransactionReceipt({
     chainId,
@@ -66,7 +67,7 @@ export function useManagedSendTransaction({
   const bundle = {
     chainId,
     simulation: estimateGasQuery as TransactionSimulation,
-    execution: writeQuery as TransactionExecution,
+    execution: writeMutation as TransactionExecution,
     result: transactionStatusQuery,
     isSafeTxLoading,
   }
@@ -125,7 +126,7 @@ export function useManagedSendTransaction({
     if (!estimateGasQuery.data) return
     if (!txConfig?.to) return
     try {
-      return writeQuery.sendTransactionAsync({
+      return writeMutation.sendTransactionAsync({
         chainId,
         to: txConfig.to,
         data: txConfig.data,

lib/modules/web3/useTenderly.ts

@@ -0,0 +1,28 @@
+import { useBlockNumber, useGasPrice } from 'wagmi'
+import { TransactionConfig } from './contracts/contract.types'
+/*
+  Checks the current blocknumber and gasPrice for the given chainId and provides a function to build a Tenderly simulation URL
+  Used in sentry metadata to be able to simulate tx from Sentry issues in Tenderly
+*/
+export function useTenderly({ chainId }: { chainId: number }) {
+  const { data: _blockNumber } = useBlockNumber({ chainId })
+  const { data: _gasPrice } = useGasPrice({ chainId })
+
+  function buildTenderlyUrl(txConfig?: TransactionConfig) {
+    if (!txConfig) return
+    const { chainId: buildCallChainId, account, to, data, value } = txConfig
+    if (chainId !== buildCallChainId) {
+      throw new Error(
+        `Chain Id mismatch (${buildCallChainId} VS ${chainId}) when building Tenderly simulation URL`
+      )
+    }
+
+    const txValue = value ? value.toString() : '0'
+    const blockNumber = _blockNumber ? _blockNumber.toString() : '0'
+    const gasPrice = _gasPrice ? _gasPrice.toString() : '0'
+
+    return `https://dashboard.tenderly.co/balancer/v2/simulator/new?rawFunctionInput=${data}&block=${blockNumber}&blockIndex=0&from=${account}&gas=8000000&gasPrice=${gasPrice}&value=${txValue}&contractAddress=${to}&network=${chainId}`
+  }
+
+  return { buildTenderlyUrl }
+}