feat(widget): suppress console errors (#2594)

* Allow widget to suppress Synapse console errors * feat(sdk-router): router cache error log (#2591) * Improve RouterCache error logging * Add common error string to target at Consumer level * Add common string to all console errors * feat(widget): error logs (#2593) * Add common base string to allow hiding Widget related errors outputted in Consumer app * Convert logs into errors if firing in catch statement * Update README * Optional prop * Switch catch log to error * Re-trigger action * Remove line
synapsecns · May 9, 2024 · 925447b · 925447b
1 parent f1f61b0
commit 925447b
Show file tree

Hide file tree

Showing 20 changed files with 92 additions and 22 deletions.
diff --git a/packages/sdk-router/src/rfq/fastBridgeRouter.ts b/packages/sdk-router/src/rfq/fastBridgeRouter.ts
@@ -62,7 +62,10 @@ export class FastBridgeRouter implements SynapseModule {
   //     try {
   //       await Promise.all([this.getProtocolFeeRate()])
   //     } catch (e) {
-  //       console.error('fastBridgeRouter: Error hydrating cache', e)
+  //       console.error(
+  //         '[SynapseSDK: FastBridgeRouter] Error hydrating cache: ',
+  //         e
+  //       )
   //     }
   //   }
   // }

diff --git a/packages/sdk-router/src/router/router.ts b/packages/sdk-router/src/router/router.ts
@@ -117,7 +117,10 @@ export abstract class Router implements SynapseModule {
       // Don't filter anything, as the amount of returned queries should match the amount of symbols
       return this.getOriginAmountOut(tokenIn, tokenSymbols, amountIn)
     } catch (error) {
-      console.error('Failed to fetch origin queries', error)
+      console.error(
+        '[SynapseSDK: Router] Failed to fetch origin queries',
+        error
+      )
       throw error
     }
   }
@@ -138,7 +141,10 @@ export abstract class Router implements SynapseModule {
       // Don't filter anything, as the amount of returned queries should match the amount of requests
       return this.getDestinationAmountOut(requests, tokenOut)
     } catch (error) {
-      console.error('Failed to fetch destination queries', error)
+      console.error(
+        '[SynapseSDK: Router] Failed to fetch destination queries',
+        error
+      )
       throw error
     }
   }

diff --git a/packages/sdk-router/src/router/routerSet.ts b/packages/sdk-router/src/router/routerSet.ts
@@ -141,7 +141,7 @@ export abstract class RouterSet extends SynapseModuleSet {
       )
     } catch (error) {
       console.error(
-        `Error when trying to calculate the best quote with bridge tokens: ${bridgeTokens}`,
+        `[SynapseSDK: RouterSet] Error when trying to calculate the best quote with bridge tokens: ${bridgeTokens} `,
         error
       )
       return []

diff --git a/packages/sdk-router/src/router/synapseCCTPRouter.ts b/packages/sdk-router/src/router/synapseCCTPRouter.ts
@@ -59,7 +59,10 @@ export class SynapseCCTPRouter extends Router {
   //     try {
   //       await Promise.all([this.chainGasAmount()])
   //     } catch (e) {
-  //       console.error('synapseCCTPRouter: Error hydrating cache', e)
+  //       console.error(
+  //         '[SynapseSDK: SynapseCCTPRouter] Error hydrating cache: ',
+  //         e
+  //       )
   //     }
   //   }
   // }

diff --git a/packages/sdk-router/src/router/synapseRouter.ts b/packages/sdk-router/src/router/synapseRouter.ts
@@ -110,7 +110,7 @@ export class SynapseRouter extends Router {
   //     try {
   //       await Promise.all([this.chainGasAmount()])
   //     } catch (e) {
-  //       console.error('synapseRouter: Error hydrating cache', e)
+  //       console.error('[SynapseSDK: SynapseRouter] Error hydrating cache: ', e)
   //     }
   //   }
   // }

diff --git a/packages/sdk-router/src/utils/RouterCache.ts b/packages/sdk-router/src/utils/RouterCache.ts
@@ -57,8 +57,10 @@ export const RouterCache = (maxAge: number) => {
             return res
           })
           .catch((e) => {
-            console.error('RouterCache error', e)
-            console.log(this.chainId)
+            console.error(
+              `[SynapseSDK: RouterCache] Error on ChainID ${this.chainId}: `,
+              e
+            )
           })
         return result
       }

diff --git a/packages/widget/README.md b/packages/widget/README.md
@@ -73,6 +73,9 @@ List of tokens to display in the widget. These tokens are imported from the widg
 `protocolName`
 A short name for users of the widget to identify the protocol. Optional. If not provided, defaults to 'Target'.
 
+`hideConsoleErrors`
+Boolean to enable suppressing Synapse (SDK, Widget) console.error messages in your consumer app's browser. If not provided, defaults to logging error messages.
+
 - A list of `targetTokens` can be found [here](https://github.com/synapsecns/sanguine/blob/master/packages/widget/src/constants/bridgeable.ts)
 - A list of Synapse Protocol supported chains can be found [here](https://github.com/synapsecns/sanguine/blob/master/packages/widget/src/constants/chains.ts)
 

diff --git a/packages/widget/src/components/Widget.tsx b/packages/widget/src/components/Widget.tsx
@@ -285,7 +285,7 @@ export const Widget = ({
         )
       }
     } catch (error) {
-      console.error('Error approving: ', error)
+      console.error(`[Synapse Widget] Error while approving token: `, error)
     }
   }
 
@@ -339,7 +339,7 @@ export const Widget = ({
         }
       }
     } catch (error) {
-      console.log('Error bridging: ', error)
+      console.error('[Synapse Widget] Error bridging: ', error)
     }
   }
 

diff --git a/packages/widget/src/hooks/useBridgeTxStatus.tsx b/packages/widget/src/hooks/useBridgeTxStatus.tsx
@@ -36,7 +36,10 @@ export const useBridgeTxStatus = ({
 
       return kappa
     } catch (error) {
-      console.error('Error in getKappa:', error)
+      console.error(
+        '[Synapse Widget] Error retrieving Synapse Transaction ID: ',
+        error
+      )
       return null
     }
   }
@@ -56,7 +59,10 @@ export const useBridgeTxStatus = ({
       )
       return status
     } catch (error) {
-      console.error('Error in getBridgeTxStatus:', error)
+      console.error(
+        '[Synapse Widget] Error resolving Bridge Transaction status: ',
+        error
+      )
       return null
     }
   }

diff --git a/packages/widget/src/index.tsx b/packages/widget/src/index.tsx
@@ -11,6 +11,7 @@ import * as BRIDGEABLE from '@/constants/bridgeable'
 import { CHAINS_ARRAY } from '@/constants/chains'
 import { BackgroundListenerProvider } from '@/providers/BackgroundListenerProvider'
 import { useBridgeSelectionData } from '@/hooks/useBridgeSelectionData'
+import { suppressSynapseConsoleErrors } from '@/utils/suppressSynapseConsoleErrors'
 
 export const Bridge = ({
   web3Provider,
@@ -20,11 +21,16 @@ export const Bridge = ({
   targetChainIds,
   targetTokens,
   protocolName,
+  hideConsoleErrors,
 }: BridgeProps) => {
   if (!web3Provider) {
     return null
   }
 
+  if (hideConsoleErrors) {
+    suppressSynapseConsoleErrors()
+  }
+
   return (
     <Web3Provider config={web3Provider}>
       <SynapseProvider chains={CHAINS_ARRAY} customRpcs={customRpcs}>

diff --git a/packages/widget/src/providers/Web3Provider.tsx b/packages/widget/src/providers/Web3Provider.tsx
@@ -42,7 +42,7 @@ export const Web3Provider = ({
           provider: config,
         })
       } catch (e) {
-        console.log('Error', e)
+        console.error('[Synapse Widget] Error setting up Provider: ', e)
       }
     }
 

diff --git a/packages/widget/src/types/index.d.ts b/packages/widget/src/types/index.d.ts
@@ -68,6 +68,9 @@ export interface BridgeProps {
 
   /* Custom name prop for consumer protocol */
   protocolName?: string
+
+  /* Supress Consumer browser console errors */
+  hideConsoleErrors?: boolean
 }
 
 export interface Chain {

diff --git a/packages/widget/src/utils/actions/fetchTokenBalances.ts b/packages/widget/src/utils/actions/fetchTokenBalances.ts
@@ -31,11 +31,15 @@ export const fetchTokenBalances = async ({
   const multicall: Contract = useMulticallContract(signerOrProvider)
 
   if (!signerOrProvider) {
-    console.error('Require valid Signer or Provider')
+    console.error(
+      '[Synapse Widget] Error fetching token balances: Require valid Signer or Provider'
+    )
     return
   }
   if (Number(signerOrProvider?._network.chainId.toString()) !== chainId) {
-    console.error('Signer or Provider does not match selected chainId')
+    console.error(
+      '[Synapse Widget] Error fetching token balances: Signer or Provider does not match selected chainId'
+    )
     return
   }
 
@@ -94,7 +98,7 @@ export const fetchTokenBalances = async ({
 
     return data
   } catch (error) {
-    console.error('Error fetching token balances:', error)
+    console.error('[Synapse Widget] Error fetching token balances: ', error)
     return error
   }
 }
diff --git a/packages/widget/src/utils/actions/switchNetwork.ts b/packages/widget/src/utils/actions/switchNetwork.ts
@@ -11,6 +11,6 @@ export const switchNetwork = async (chainId: number, provider: any) => {
     const hexChainId: string = toHexStr(chainId)
     await provider.send('wallet_switchEthereumChain', [{ chainId: hexChainId }])
   } catch (error) {
-    console.error('switchNetwork: ', error)
+    console.error('[Synapse Widget] Error switching networks: ', error)
   }
 }
diff --git a/packages/widget/src/utils/formatBigIntToString.ts b/packages/widget/src/utils/formatBigIntToString.ts
@@ -48,6 +48,6 @@ export const formatBigIntToString = (
 
     return str
   } catch (error) {
-    console.log(`error`, error)
+    console.error(`[Synapse Widget] Error converting bigint to string: `, error)
   }
 }
diff --git a/packages/widget/src/utils/getExplorerAddressLink.ts b/packages/widget/src/utils/getExplorerAddressLink.ts
@@ -10,6 +10,8 @@ export const getExplorerAddressUrl = (chainId: number, address: string) => {
     return [explorerUrl, explorerName]
   }
 
-  console.error('getExplorerAddressUrl: ChainId or Address missing')
+  console.error(
+    '[Synapse Widget] Error retrieving Native Explorer Address URL: ChainId or Address missing'
+  )
   return [null, null]
 }
diff --git a/packages/widget/src/utils/getTxBlockExplorerLink.ts b/packages/widget/src/utils/getTxBlockExplorerLink.ts
@@ -10,6 +10,8 @@ export const getTxBlockExplorerLink = (chainId: number, txHash: string) => {
     return [explorerUrl, explorerName]
   }
 
-  console.error('getTxBlockExplorerLink: ChainID or Transaction Hash missing')
+  console.error(
+    '[Synapse Widget] Error retrieving Native Explorer Transaction URL: ChainID or Transaction Hash missing'
+  )
   return [null, null]
 }
diff --git a/packages/widget/src/utils/getTxSynapseExplorerLink.ts b/packages/widget/src/utils/getTxSynapseExplorerLink.ts
@@ -24,6 +24,9 @@ export const getTxSynapseExplorerLink = ({
     return `${SYNAPSE_EXPLORER}txs?hash=${txHash}`
   }
 
-  console.error('Transaction Hash and Synapse Transaction ID missing')
+  console.error(
+    '[Synapse Widget] Error retrieving Synapse Explorer Transaction URL: Transaction Hash or Synapse Transaction ID missing'
+  )
+
   return null
 }
diff --git a/packages/widget/src/utils/stringToBigInt.ts b/packages/widget/src/utils/stringToBigInt.ts
@@ -32,6 +32,6 @@ export const stringToBigInt = (rawVal: string, rawDecimals: number) => {
 
     return wholeBigInt + fractionalBigInt
   } catch (error) {
-    console.log(error)
+    console.error('[Synapse Widget] Error converting string to bigint: ', error)
   }
 }
diff --git a/packages/widget/src/utils/suppressSynapseConsoleErrors.ts b/packages/widget/src/utils/suppressSynapseConsoleErrors.ts
@@ -0,0 +1,27 @@
+enum SynapseErrorPrefix {
+  SDK = 'SynapseSDK',
+  WIDGET = 'Synapse Widget',
+}
+
+export const suppressSynapseConsoleErrors = () => {
+  console.log('Supressing Synapse console errors.')
+
+  // Store the original console.error function
+  const originalConsoleError = console.error
+
+  // Redefine console.error to filter out specific messages
+  console.error = (...args) => {
+    const message = args.join(' ')
+
+    // Suppress Synapse console.error messages
+    if (
+      message.includes(SynapseErrorPrefix.SDK) ||
+      message.includes(SynapseErrorPrefix.WIDGET)
+    ) {
+      return
+    }
+
+    // Call the original console.error for other messages
+    originalConsoleError(...args)
+  }
+}