using react error boundary

web/pages/_app.tsx

@@ -11,6 +11,7 @@ import { GameContextProvider } from "../src/contexts/GameContext";
 import { UserProvider } from "../src/contexts/UserContext";
 import Script from "next/script";
 import { sendReport } from "../src/utils/humbug";
+import ErrorBoundary from "../src/components/layout/ErrorBoundary";
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(new QueryClient());
@@ -36,29 +37,31 @@ export default function App({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
-    <>
-      <Script
-        id="google-tag-manager"
-        strategy="afterInteractive"
-        dangerouslySetInnerHTML={{
-          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    <ErrorBoundary>
+      <>
+        <Script
+          id="google-tag-manager"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                     })(window,document,'script','dataLayer','GTM-KSQM8K8K');`,
-        }}
-      />
-      <ChakraProvider theme={theme}>
-        <QueryClientProvider client={queryClient}>
-          <Web3Context>
-            <UserProvider>
-              <GameContextProvider>
-                <Component {...pageProps} />
-              </GameContextProvider>
-            </UserProvider>
-          </Web3Context>
-        </QueryClientProvider>
-      </ChakraProvider>
-    </>
+          }}
+        />
+        <ChakraProvider theme={theme}>
+          <QueryClientProvider client={queryClient}>
+            <Web3Context>
+              <UserProvider>
+                <GameContextProvider>
+                  <Component {...pageProps} />
+                </GameContextProvider>
+              </UserProvider>
+            </Web3Context>
+          </QueryClientProvider>
+        </ChakraProvider>
+      </>
+    </ErrorBoundary>
   );
 }

web/src/components/layout/ErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+import { sendReport } from "../../utils/humbug";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+    errorInfo: null,
+  };
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ errorInfo });
+    console.error("Uncaught error:", error, errorInfo);
+    const content = JSON.stringify({
+      error: error.toString(),
+      errorInfo: errorInfo.componentStack,
+    });
+    sendReport("React ErrorBoundary Error", content, ["type:error", "error_domain:react"]).catch(
+      (reportError) => {
+        console.error("Failed to send error report:", reportError);
+      },
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <h2>Oops, there is an error!</h2>
+          <button type="button" onClick={() => this.setState({ hasError: false })}>
+            Try again?
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;