feat: add sentry monitoring

.env.sample

@@ -2,3 +2,5 @@ VITE_BASE_SIGNING_URL=
 VITE_BTC_DEFAULT_FEE_RATE=
 VITE_BTC_TX_BASE_URL=
 VITE_BTC_TESTNET=
+VITE_SENTRY_DSN=
+VITE_SENTRY_ENVIRONMENT=

package.json

@@ -10,6 +10,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@sentry/react": "^10.17.0",
     "@solana/web3.js": "^1.63.1",
     "antd": "^4.21.3",
     "bech32": "^2.0.0",
@@ -66,5 +67,6 @@
   },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
 }

src/App.tsx

@@ -1,16 +1,27 @@
 import React from "react";
+import * as Sentry from "@sentry/react";
 import "antd/dist/antd.dark.min.css";
 import "./styles.css";
 import { Main } from "./components";
 import { AppContextProvider } from "./store/AppContext";
 
 function App() {
   return (
-    <div className="App">
-      <AppContextProvider>
-        <Main />
-      </AppContextProvider>
-    </div>
+    <Sentry.ErrorBoundary
+      fallback={({ error, resetError }) => (
+        <div style={{ padding: "20px", textAlign: "center" }}>
+          <h1>Something went wrong</h1>
+          <p>{error instanceof Error ? error.message : "An unexpected error occurred"}</p>
+          <button onClick={resetError}>Try again</button>
+        </div>
+      )}
+    >
+      <div className="App">
+        <AppContextProvider>
+          <Main />
+        </AppContextProvider>
+      </div>
+    </Sentry.ErrorBoundary>
   );
 }
 

src/index.tsx

@@ -1,7 +1,26 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import * as Sentry from "@sentry/react";
 import App from "./App";
 
+// Initialize Sentry if DSN is provided
+if (SENTRY_DSN) {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: SENTRY_ENVIRONMENT || "production",
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration(),
+    ],
+    // Performance Monitoring
+    tracesSampleRate: 1.0,
+    // Session Replay
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+    release: APP_VERSION,
+  });
+}
+
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />

src/vite-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="vite/client" />
 
 declare const APP_VERSION: string;
+declare const SENTRY_DSN: string;
+declare const SENTRY_ENVIRONMENT: string;

vite.config.ts

@@ -11,6 +11,8 @@ export default defineConfig(({ mode }) => ({
     BTC_DEFAULT_FEE_RATE: JSON.stringify(process.env.VITE_BTC_DEFAULT_FEE_RATE),
     BTC_TX_BASE_URL: JSON.stringify(process.env.VITE_BTC_TX_BASE_URL),
     BTC_TESTNET: JSON.stringify(process.env.VITE_BTC_TESTNET),
+    SENTRY_DSN: JSON.stringify(process.env.VITE_SENTRY_DSN),
+    SENTRY_ENVIRONMENT: JSON.stringify(process.env.VITE_SENTRY_ENVIRONMENT),
     "process.env": {},
   },
   server: {