Sentry SDK initialization

dapp/.env

@@ -1 +1,5 @@
 VITE_USE_TESTNET=true
+
+# Configuration of sentry.io
+VITE_SENTRY_SUPPORT=true
+VITE_SENTRY_DSN=https://4c1f78c9a9f5e2b556d94abd754ccf20@o4506637342539776.ingest.sentry.io/4506637357416448

dapp/.env.production

@@ -0,0 +1,5 @@
+VITE_USE_TESTNET=false
+
+# Configuration of sentry.io
+VITE_SENTRY_SUPPORT=false
+VITE_SENTRY_DSN=""

dapp/package.json

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@ledgerhq/wallet-api-client": "^1.5.0",
     "@ledgerhq/wallet-api-client-react": "^1.3.0",
+    "@sentry/react": "^7.98.0",
     "@tanstack/react-table": "^8.11.3",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.5",

dapp/src/DApp.tsx

@@ -13,9 +13,11 @@ import Overview from "./components/Overview"
 import Sidebar from "./components/Sidebar"
 import DocsDrawer from "./components/DocsDrawer"
 import GlobalStyles from "./components/GlobalStyles"
+import { useSentry } from "./hooks/useSentry"
 
 function DApp() {
   useDetectThemeMode()
+  useSentry()
 
   return (
     <>

dapp/src/hooks/useSentry.ts

@@ -0,0 +1,12 @@
+import { initializeSentry } from "#/sdk/sentry"
+import { useEffect } from "react"
+
+export const useSentry = () => {
+  useEffect(() => {
+    const { VITE_SENTRY_SUPPORT, VITE_SENTRY_DSN } = import.meta.env
+
+    if (VITE_SENTRY_SUPPORT) {
+      initializeSentry(`${VITE_SENTRY_DSN}`)
+    }
+  }, [])
+}

dapp/src/sdk/sentry/index.ts

@@ -0,0 +1,16 @@
+import * as Sentry from "@sentry/react"
+
+export const initializeSentry = (dsn: string) => {
+  Sentry.init({
+    dsn,
+    integrations: [
+      new Sentry.BrowserTracing({
+        // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+        tracePropagationTargets: ["localhost"],
+      }),
+    ],
+    // Performance Monitoring
+    // Capture 100% of the transactions
+    tracesSampleRate: 1.0,
+  })
+}