feat(js/frontend): add error tracking (#814)

Author: nikitayutanov

.github/workflows/deploy-frontend.yml

@@ -98,6 +98,7 @@ jobs:
             VITE_VARA_ARCHIVE_NODE_ADDRESSES=${{ secrets.VITE_VARA_ARCHIVE_NODE_ADDRESSES }}
             VITE_ETH_BEACON_NODE_ADDRESSES=${{ secrets.VITE_ETH_BEACON_NODE_ADDRESSES }}
             VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=${{ secrets.VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES }}
+            VITE_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }}
             VITE_GTM_ID=${{ secrets.VITE_GTM_ID }}
             
   deploy-to-k8s:

js/frontend/.env.example

@@ -29,5 +29,6 @@ VITE_VARA_ARCHIVE_NODE_ADDRESSES=
 VITE_ETH_BEACON_NODE_ADDRESSES=
 VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=
 
-# analytics
+# error tracking and analytics
+VITE_SENTRY_DSN=
 VITE_GTM_ID=

js/frontend/Dockerfile

@@ -29,6 +29,7 @@ ARG VITE_VARA_NODE_ADDRESSES \
     VITE_VARA_ARCHIVE_NODE_ADDRESSES \
     VITE_ETH_BEACON_NODE_ADDRESSES \
     VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES \
+    VITE_SENTRY_DSN \
     VITE_GTM_ID
 
 ENV VITE_VARA_NODE_ADDRESSES=${VITE_VARA_NODE_ADDRESSES} \
@@ -46,6 +47,7 @@ ENV VITE_VARA_NODE_ADDRESSES=${VITE_VARA_NODE_ADDRESSES} \
     VITE_VARA_ARCHIVE_NODE_ADDRESSES=${VITE_VARA_ARCHIVE_NODE_ADDRESSES} \
     VITE_ETH_BEACON_NODE_ADDRESSES=${VITE_ETH_BEACON_NODE_ADDRESSES} \
     VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES=${VITE_ETH_MESSAGE_QUEUE_CONTRACT_ADDRESSES} \
+    VITE_SENTRY_DSN=${VITE_SENTRY_DSN} \
     VITE_GTM_ID=${VITE_GTM_ID}
 
 

js/frontend/package.json

@@ -23,6 +23,7 @@
     "@polkadot/react-identicon": "3.16.4",
     "@reown/appkit": "1.8.15",
     "@reown/appkit-adapter-wagmi": "1.8.15",
+    "@sentry/react": "10.40.0",
     "@tanstack/react-query": "5.90.12",
     "gear-bridge-common": "workspace:*",
     "graphql": "16.12.0",

js/frontend/src/components/layout/error-boundary/error-boundary.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@gear-js/vara-ui';
-import { Component, ReactNode } from 'react';
+import { ErrorBoundary as SentryErrorBoundary, FallbackRender } from '@sentry/react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useChangeEffect } from '@/hooks';
@@ -8,56 +9,27 @@ import { Container } from '../container';
 
 import styles from './error-boundary.module.scss';
 
-type Props = {
-  children: ReactNode;
-};
-
-type FallbackProps = {
-  message: string;
-  reset: () => void;
-};
-
-type State = {
-  error: Error | null;
-};
-
-function Fallback({ message, reset }: FallbackProps) {
+// eslint-disable-next-line @typescript-eslint/unbound-method
+function Fallback({ error, resetError }: ComponentProps<FallbackRender>) {
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
   useChangeEffect(() => {
-    reset();
+    resetError();
   }, [pathname]);
 
   return (
     <Container>
       <h2 className={styles.heading}>Oops! Something went wrong:</h2>
-      <p className={styles.error}>{message}</p>
+      <p className={styles.error}>{error instanceof Error ? error.message : String(error)}</p>
 
       <Button text="Go Back" size="small" onClick={() => navigate(-1)} />
     </Container>
   );
 }
 
-class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { error: null };
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { error };
-  }
-
-  reset = () => {
-    this.setState({ error: null });
-  };
-
-  render() {
-    if (!this.state.error) return this.props.children;
-
-    return <Fallback message={this.state.error.message} reset={this.reset} />;
-  }
+function ErrorBoundary({ children }: PropsWithChildren) {
+  return <SentryErrorBoundary fallback={Fallback}>{children}</SentryErrorBoundary>;
 }
 
 export { ErrorBoundary };

js/frontend/src/consts/env.ts

@@ -1,3 +1,4 @@
+const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN as string | undefined;
 const GTM_ID = import.meta.env.VITE_GTM_ID as string | undefined;
 
-export { GTM_ID };
+export { SENTRY_DSN, GTM_ID };

js/frontend/src/consts/index.ts

@@ -1,6 +1,6 @@
 import { ERC20_ABI, WRAPPED_ETH_ABI } from './abi';
-import { GTM_ID } from './env';
+import { SENTRY_DSN, GTM_ID } from './env';
 import { ROUTE } from './routing';
 import { VftProgram, WrappedVaraProgram } from './sails';
 
-export { ERC20_ABI, WRAPPED_ETH_ABI, ROUTE, GTM_ID, VftProgram, WrappedVaraProgram };
+export { ERC20_ABI, WRAPPED_ETH_ABI, ROUTE, SENTRY_DSN, GTM_ID, VftProgram, WrappedVaraProgram };

js/frontend/src/context/network-type/provider.tsx

@@ -1,5 +1,6 @@
 import { useApi, useAlert } from '@gear-js/react-hooks';
 import { useAppKitNetwork } from '@reown/appkit/react';
+import { captureException } from '@sentry/react';
 import { PropsWithChildren, useState, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useChainId, useConfig, useSwitchChain } from 'wagmi';
@@ -82,6 +83,7 @@ function NetworkTypeProvider({ children }: PropsWithChildren) {
     switchNetwork({ endpoint: NEXT_PRESET.NODE_ADDRESS }).catch((error: Error) => {
       alert.error(`Failed to switch network. ${error.message}`);
       logger.error('Network switch', error);
+      captureException(error, { tags: { feature: 'network-switch' } });
     });
   };
 

js/frontend/src/features/faucet/components/get-balance-button/get-balance-button.tsx

@@ -2,6 +2,7 @@ import { HexString } from '@gear-js/api';
 import { useAccount, useAlert, useApi } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/vara-ui';
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
+import { captureException } from '@sentry/react';
 import { useMutation } from '@tanstack/react-query';
 import { useRef, useState } from 'react';
 
@@ -62,13 +63,19 @@ function ButtonComponent<T>({ getBalance, onSuccess, ...parameters }: Props<T>)
           'Your request for test tokens has been received and is being processed. The tokens will appear in your balance shortly.',
         );
       })
-      .catch((error) => alert.error(error instanceof Error ? error.message : String(error)));
+      .catch((error) => {
+        alert.error(error instanceof Error ? error.message : String(error));
+        captureException(error, { tags: { feature: 'faucet', flow: 'request' } });
+      });
   };
 
   const handleVerificationError = (code: string) => {
     settleVerification();
+    alert.error(`Error verifying that you are a human. Please try again.`);
 
-    alert.error(`Error verifying that you are a human, code: ${code}. Please try again.`);
+    const error = new Error(`Cloudflare Turnstile (human verification) error. Code: ${code}`);
+
+    captureException(error, { tags: { feature: 'faucet', flow: 'verification' } });
   };
 
   return (

js/frontend/src/features/swap/components/pay-vara-fee-button/pay-vara-fee-button.tsx

@@ -1,6 +1,7 @@
 import { useAccount, useAlert } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/vara-ui';
 import { WalletModal } from '@gear-js/wallet-connect';
+import { captureException } from '@sentry/react';
 
 import { Tooltip } from '@/components';
 import { useModal } from '@/hooks';
@@ -32,7 +33,10 @@ function PayVaraFeeButton({ nonce, onInBlock }: Props) {
         alert.success('Fee paid successfully');
         onInBlock();
       })
-      .catch((error: Error) => alert.error(getErrorMessage(error)));
+      .catch((error: Error) => {
+        alert.error(getErrorMessage(error));
+        captureException(error, { tags: { feature: 'pay-tx-fee' } });
+      });
   };
 
   const renderTooltipText = () => (