Sentry SDK initialization

dapp/.env

@@ -1 +1,6 @@
 VITE_USE_TESTNET=true
+
+# Configuration of sentry.io
+VITE_SENTRY_SUPPORT=false
+# TODO: Sentry DSN will be added during the application building process when it is ready
+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

@@ -1,6 +1,6 @@
 import React from "react"
 import { Box, ChakraProvider } from "@chakra-ui/react"
-import { useDetectThemeMode } from "./hooks"
+import { useDetectThemeMode, useSentry } from "./hooks"
 import theme from "./theme"
 import {
   DocsDrawerContextProvider,
@@ -16,6 +16,7 @@ import GlobalStyles from "./components/GlobalStyles"
 
 function DApp() {
   useDetectThemeMode()
+  useSentry()
 
   return (
     <>

dapp/src/hooks/index.ts

@@ -10,3 +10,4 @@ export * from "./useTransactionDetails"
 export * from "./useSignMessage"
 export * from "./useDepositBTCTransaction"
 export * from "./useTransactionHistoryTable"
+export * from "./useSentry"

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,11 @@
+import * as Sentry from "@sentry/react"
+
+export const initializeSentry = (dsn: string) => {
+  Sentry.init({
+    dsn,
+    integrations: [new Sentry.BrowserTracing()],
+    // Performance Monitoring
+    // TODO: Now, it's capturing 100% of the transactions. It should be changed when prod mode is enabled
+    tracesSampleRate: 1.0,
+  })
+}

dapp/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SENTRY_SUPPORT: boolean
+  readonly VITE_SENTRY_DSN: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}