feat(bridge-ui): sentry integration (#13943)

packages/bridge-ui/.default.env

@@ -24,3 +24,5 @@ VITE_L2_BRIDGE_ADDRESS=""
 
 VITE_L1_SIGNAL_SERVICE_ADDRESS=""
 VITE_L2_SIGNAL_SERVICE_ADDRESS=""
+
+VITE_SENTRY_DSN=""

packages/bridge-ui/package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.16.0",
+    "@sentry/vite-plugin": "^2.2.1",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
     "@types/debug": "^4.1.7",
@@ -70,6 +71,7 @@
     "@coinbase/wallet-sdk": "^3.6.3",
     "@ethersproject/experimental": "^5.7.0",
     "@lottiefiles/svelte-lottie-player": "^0.2.0",
+    "@sentry/svelte": "^7.54.0",
     "@sveltestack/svelte-query": "^1.6.0",
     "@wagmi/connectors": "^0.1.1",
     "@wagmi/core": "^0.8.0",

packages/bridge-ui/src/app.ts

@@ -3,8 +3,11 @@ import './styles/app.css';
 import { Buffer } from 'buffer';
 
 import App from './App.svelte';
+import { SENTRY_DSN } from './constants/envVars';
 import { setupI18n } from './i18n';
+import { setupSentry } from './sentry';
 
+setupSentry(SENTRY_DSN);
 setupI18n({ withLocale: 'en' });
 
 const app = new App({

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import { disconnect as wagmiDisconnect, RpcError } from '@wagmi/core';
   import { ethers, type Signer } from 'ethers';
   import { onMount } from 'svelte';
@@ -61,6 +62,8 @@
         'Cannot communicate with the network. Please try again later or contact support.',
       );
     } else {
+      Sentry.captureException(error);
+
       errorToast('There was an error getting your balance.');
     }
   });

packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import { type Address, fetchFeeData } from '@wagmi/core';
   import { BigNumber, Contract, ethers, type Signer } from 'ethers';
   import { _ } from 'svelte-i18n';
@@ -110,7 +111,7 @@
 
           tokenBalance = '0.0';
 
-          throw Error(`Failed to get balance for ${token.symbol}`, {
+          throw Error(`failed to get balance for ${token.symbol}`, {
             cause: error,
           });
         }
@@ -230,6 +231,7 @@
       );
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
 
       // TODO: we need to improve the toast API so we can simply pass
       //       title (header), note (footer), icon, etc.
@@ -423,6 +425,7 @@
       );
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
 
       const headerError = '<strong>Failed to bridge funds</strong><br />';
       const noteError =

packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import { _ } from 'svelte-i18n';
 
   import { ProcessingFeeMethod } from '../../domain/fee';
@@ -25,6 +26,7 @@
     })
     .catch((error) => {
       console.error(error);
+      Sentry.captureException(error);
 
       amount = '0';
       cannotCompute = true;

packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte

@@ -1,4 +1,5 @@
 <script>
+  import * as Sentry from '@sentry/svelte';
   import { UserRejectedRequestError } from '@wagmi/core';
   import { ArrowRight } from 'svelte-heros-v2';
 
@@ -30,6 +31,8 @@
       if (error instanceof UserRejectedRequestError) {
         warningToast('Switch chain request canceled.');
       } else {
+        Sentry.captureException(error);
+
         errorToast('Error switching chain.');
       }
     }

packages/bridge-ui/src/components/ChainDropdown.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import { UserRejectedRequestError } from '@wagmi/core';
   import { ChevronDown, ExclamationTriangle } from 'svelte-heros-v2';
 
@@ -34,6 +35,8 @@
       if (error instanceof UserRejectedRequestError) {
         warningToast('Switch chain request rejected.');
       } else {
+        Sentry.captureException(error);
+
         errorToast('Error switching chain.');
       }
     }

packages/bridge-ui/src/components/ConnectWallet.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import {
     connect as wagmiConnect,
     Connector,
@@ -37,10 +38,15 @@
         console.error(error);
 
         if (error instanceof ConnectorNotFoundError) {
+          // I'm curious to know how often this happens
+          Sentry.captureMessage(`${connector.name} not installed.`);
+
           errorToast(`${connector.name} not installed.`);
         } else if (error instanceof UserRejectedRequestError) {
           warningToast('Connect request canceled.');
         } else {
+          Sentry.captureException(error);
+
           errorToast('Error connecting wallet');
         }
       }

packages/bridge-ui/src/components/Faucet/Faucet.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import { UserRejectedRequestError } from '@wagmi/core';
   import { ethers, type Signer } from 'ethers';
 
@@ -71,8 +72,10 @@
       console.error(error);
 
       if (!wrongChain) {
-        // We only want to inform the user there is a problem here if
+        // We only want to capture and inform the user there is a problem here if
         // they are in the right network. Otherwise, the error is expected.
+        Sentry.captureException(error);
+
         errorToast(
           `There seems to be a problem with minting ${_token.symbol} tokens.`,
         );

packages/bridge-ui/src/components/Transactions/Transaction.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Sentry from '@sentry/svelte';
   import { UserRejectedRequestError } from '@wagmi/core';
   import { Contract, errors, type Transaction, utils } from 'ethers';
   import { createEventDispatcher } from 'svelte';
@@ -169,6 +170,7 @@
       $token = $token;
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
 
       const headerError = '<strong>Failed to claim funds</strong>';
 
@@ -260,6 +262,7 @@
       $token = $token;
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
 
       const headerError = '<strong>Failed to release funds</strong>';
 

packages/bridge-ui/src/constants/__mocks__/envVars.ts

@@ -54,3 +54,5 @@ export const TEST_ERC20 = [
     logoUrl: 'https://internet.com/horse',
   },
 ];
+
+export const SENTRY_DSN = 'https://sentry.io/1234567890';

packages/bridge-ui/src/constants/envVars.ts

@@ -53,3 +53,5 @@ export const TEST_ERC20: {
   name: string;
   logoUrl?: string;
 }[] = JSON.parse(import.meta.env?.VITE_TEST_ERC20);
+
+export const SENTRY_DSN: string = import.meta.env?.VITE_SENTRY_DSN;

packages/bridge-ui/src/sentry.ts

@@ -0,0 +1,41 @@
+import * as Sentry from '@sentry/svelte';
+
+const hostname = globalThis?.location?.hostname ?? 'localhost';
+const environment =
+  hostname === 'localhost'
+    ? 'local'
+    : hostname.match(/\.vercel\.app$|\.internal.taiko.xyz$/)
+    ? 'development'
+    : hostname.match(/\.test\.taiko\.xyz$/)
+    ? 'production'
+    : 'unknown';
+
+const isProd = environment === 'production';
+
+export function setupSentry(dsn: string) {
+  Sentry.init({
+    dsn,
+    environment,
+
+    integrations: [new Sentry.BrowserTracing()],
+
+    sampleRate: isProd ? 0.6 : 1.0,
+    tracesSampleRate: isProd ? 0.6 : 1.0,
+    maxBreadcrumbs: 50,
+
+    beforeSend(event, hint) {
+      const processedEvent = { ...event };
+      const { cause } = hint?.originalException as Error;
+
+      // If we have "cause", we want to know about it as additional data
+      if (cause) {
+        processedEvent.extra = {
+          ...processedEvent.extra,
+          cause,
+        };
+      }
+
+      return processedEvent;
+    },
+  });
+}

packages/bridge-ui/src/signer/subscriber.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/svelte';
 import type { Address } from '@wagmi/core';
 import { constants, type Signer } from 'ethers';
 
@@ -53,6 +54,7 @@ export async function subscribeToSigner(newSigner: Signer | null) {
       relayerBlockInfoMap.set(blockInfoMap);
     } catch (error) {
       console.error(error);
+      Sentry.captureException(error);
     }
 
     const txs = await storageService.getAllByAddress(userAddress);

packages/bridge-ui/src/vite-env.d.ts

@@ -20,6 +20,7 @@ interface ImportMetaEnv {
   readonly VITE_L1_SIGNAL_SERVICE_ADDRESS: string;
   readonly VITE_L2_SIGNAL_SERVICE_ADDRESS: string;
   readonly VITE_TEST_ERC20: string;
+  readonly VITE_SENTRY_DSN: string;
 }
 
 interface ImportMeta {

packages/bridge-ui/svelte.config.cjs

@@ -1,7 +1,20 @@
+const { withSentryConfig } = require('@sentry/svelte');
 const sveltePreprocess = require('svelte-preprocess');
 
-module.exports = {
-  // Consult https://github.com/sveltejs/svelte-preprocess
-  // for more information about preprocessors
-  preprocess: sveltePreprocess(),
+const svelteConfig = {
+  compilerOptions: {
+    enableSourcemap: true,
+  },
+
+  preprocess: sveltePreprocess({
+    sourceMap: true,
+  }),
+};
+
+const sentryOptions = {
+  componentTracking: {
+    trackComponents: ['BridgeForm', 'Transactions', 'Transaction', 'Faucet'],
+  },
 };
+
+module.exports = withSentryConfig(svelteConfig, sentryOptions);