Skip to content

Commit

Permalink
feat(bridge-ui): sentry integration (#13943)
Browse files Browse the repository at this point in the history
  • Loading branch information
jscriptcoder authored and dantaik committed Jun 12, 2023
1 parent 32e80fe commit ffa4253
Show file tree
Hide file tree
Showing 18 changed files with 1,643 additions and 89 deletions.
2 changes: 2 additions & 0 deletions packages/bridge-ui/.default.env
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,5 @@ VITE_L2_BRIDGE_ADDRESS=""

VITE_L1_SIGNAL_SERVICE_ADDRESS=""
VITE_L2_SIGNAL_SERVICE_ADDRESS=""

VITE_SENTRY_DSN=""
2 changes: 2 additions & 0 deletions packages/bridge-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions packages/bridge-ui/src/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
3 changes: 3 additions & 0 deletions packages/bridge-ui/src/components/AddressDropdown.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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.');
}
});
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
});
}
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -423,6 +425,7 @@
);
} catch (error) {
console.error(error);
Sentry.captureException(error);
const headerError = '<strong>Failed to bridge funds</strong><br />';
const noteError =
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import * as Sentry from '@sentry/svelte';
import { _ } from 'svelte-i18n';
import { ProcessingFeeMethod } from '../../domain/fee';
Expand All @@ -25,6 +26,7 @@
})
.catch((error) => {
console.error(error);
Sentry.captureException(error);
amount = '0';
cannotCompute = true;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script>
import * as Sentry from '@sentry/svelte';
import { UserRejectedRequestError } from '@wagmi/core';
import { ArrowRight } from 'svelte-heros-v2';
Expand Down Expand Up @@ -30,6 +31,8 @@
if (error instanceof UserRejectedRequestError) {
warningToast('Switch chain request canceled.');
} else {
Sentry.captureException(error);
errorToast('Error switching chain.');
}
}
Expand Down
3 changes: 3 additions & 0 deletions packages/bridge-ui/src/components/ChainDropdown.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -34,6 +35,8 @@
if (error instanceof UserRejectedRequestError) {
warningToast('Switch chain request rejected.');
} else {
Sentry.captureException(error);
errorToast('Error switching chain.');
}
}
Expand Down
6 changes: 6 additions & 0 deletions packages/bridge-ui/src/components/ConnectWallet.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import * as Sentry from '@sentry/svelte';
import {
connect as wagmiConnect,
Connector,
Expand Down Expand Up @@ -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');
}
}
Expand Down
5 changes: 4 additions & 1 deletion packages/bridge-ui/src/components/Faucet/Faucet.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import * as Sentry from '@sentry/svelte';
import { UserRejectedRequestError } from '@wagmi/core';
import { ethers, type Signer } from 'ethers';
Expand Down Expand Up @@ -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.`,
);
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -169,6 +170,7 @@
$token = $token;
} catch (error) {
console.error(error);
Sentry.captureException(error);
const headerError = '<strong>Failed to claim funds</strong>';
Expand Down Expand Up @@ -260,6 +262,7 @@
$token = $token;
} catch (error) {
console.error(error);
Sentry.captureException(error);
const headerError = '<strong>Failed to release funds</strong>';
Expand Down
2 changes: 2 additions & 0 deletions packages/bridge-ui/src/constants/__mocks__/envVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,5 @@ export const TEST_ERC20 = [
logoUrl: 'https://internet.com/horse',
},
];

export const SENTRY_DSN = 'https://sentry.io/1234567890';
2 changes: 2 additions & 0 deletions packages/bridge-ui/src/constants/envVars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
41 changes: 41 additions & 0 deletions packages/bridge-ui/src/sentry.ts
Original file line number Diff line number Diff line change
@@ -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;
},
});
}
2 changes: 2 additions & 0 deletions packages/bridge-ui/src/signer/subscriber.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as Sentry from '@sentry/svelte';
import type { Address } from '@wagmi/core';
import { constants, type Signer } from 'ethers';

Expand Down Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions packages/bridge-ui/src/vite-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
21 changes: 17 additions & 4 deletions packages/bridge-ui/svelte.config.cjs
Original file line number Diff line number Diff line change
@@ -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);
Loading

0 comments on commit ffa4253

Please sign in to comment.