add error boundaries to app.tsx

components/DepositModal.tsx

@@ -85,6 +85,7 @@ const DepositModal: FunctionComponent<DepositModalProps> = ({
         notify({
           title: t('deposit-failed'),
           description: err.message,
+          txid: err?.txid,
           type: 'error',
         })
       })

components/ErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+class ErrorBoundary extends React.Component<
+  any,
+  { hasError: boolean; error: any }
+> {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error: error }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    // logErrorToMyService(error, errorInfo)
+
+    if (process.env.NEXT_ERROR_WEBHOOK_URL) {
+      try {
+        fetch(process.env.NEXT_ERROR_WEBHOOK_URL, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            content: `UI ERROR: ${error} : ${errorInfo?.componentStack}`,
+          }),
+        })
+      } catch (err) {
+        console.error('Error posting to notify webhook:', err)
+      }
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div className="text-th-bkg-2 text-center pt-1">
+          <div>Something went wrong.</div>
+          <div className="text-th-red">{this.state.error.message}</div>
+          <button className="mt-2" onClick={() => location.reload()}>
+            Refresh and try again
+          </button>
+          <div className="mt-4 px-4">{this.state.error.stack}</div>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary

pages/_app.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/router'
 import { ViewportProvider } from '../hooks/useViewport'
 import BottomBar from '../components/mobile/BottomBar'
 import { appWithTranslation } from 'next-i18next'
+import ErrorBoundary from '../components/ErrorBoundary'
 
 const MangoStoreUpdater = () => {
   useHydrateStore()
@@ -85,19 +86,29 @@ function App({ Component, pageProps }) {
 
         <link rel="manifest" href="/manifest.json"></link>
       </Head>
-      <PageTitle />
-      <MangoStoreUpdater />
-      <ThemeProvider defaultTheme="Mango">
-        <ViewportProvider>
-          <div className="bg-th-bkg-1 min-h-screen">
-            <Component {...pageProps} />
-          </div>
-          <div className="md:hidden fixed bottom-0 left-0 w-full z-20">
-            <BottomBar />
-          </div>
-          <Notifications />
-        </ViewportProvider>
-      </ThemeProvider>
+      <ErrorBoundary>
+        <ErrorBoundary>
+          <PageTitle />
+          <MangoStoreUpdater />
+        </ErrorBoundary>
+
+        <ThemeProvider defaultTheme="Mango">
+          <ViewportProvider>
+            <div className="bg-th-bkg-1 min-h-screen">
+              <ErrorBoundary>
+                <Component {...pageProps} />
+              </ErrorBoundary>
+            </div>
+            <div className="md:hidden fixed bottom-0 left-0 w-full z-20">
+              <ErrorBoundary>
+                <BottomBar />
+              </ErrorBoundary>
+            </div>
+
+            <Notifications />
+          </ViewportProvider>
+        </ThemeProvider>
+      </ErrorBoundary>
     </>
   )
 }