diff --git a/dapp/.env b/dapp/.env index 50d08e6aa..19e9b2a84 100644 --- a/dapp/.env +++ b/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="" diff --git a/dapp/package.json b/dapp/package.json index a7e65482f..82d965362 100644 --- a/dapp/package.json +++ b/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", diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 9f496615e..4bf2cedf4 100644 --- a/dapp/src/DApp.tsx +++ b/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 ( <> diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 008deca62..d99f376a5 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -10,3 +10,4 @@ export * from "./useTransactionDetails" export * from "./useSignMessage" export * from "./useDepositBTCTransaction" export * from "./useTransactionHistoryTable" +export * from "./useSentry" diff --git a/dapp/src/hooks/useSentry.ts b/dapp/src/hooks/useSentry.ts new file mode 100644 index 000000000..3fb100e35 --- /dev/null +++ b/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) + } + }, []) +} diff --git a/dapp/src/sdk/sentry/index.ts b/dapp/src/sdk/sentry/index.ts new file mode 100644 index 000000000..8a6fd63fe --- /dev/null +++ b/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, + }) +} diff --git a/dapp/src/vite-env.d.ts b/dapp/src/vite-env.d.ts index 11f02fe2a..258064cc3 100644 --- a/dapp/src/vite-env.d.ts +++ b/dapp/src/vite-env.d.ts @@ -1 +1,10 @@ /// + +interface ImportMetaEnv { + readonly VITE_SENTRY_SUPPORT: boolean + readonly VITE_SENTRY_DSN: string +} + +interface ImportMeta { + readonly env: ImportMetaEnv +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 017c6f485..405e81c13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -135,6 +135,9 @@ importers: '@ledgerhq/wallet-api-client-react': specifier: ^1.3.0 version: 1.3.0(react@18.2.0) + '@sentry/react': + specifier: ^7.98.0 + version: 7.98.0(react@18.2.0) '@tanstack/react-table': specifier: ^8.11.3 version: 8.11.7(react-dom@18.2.0)(react@18.2.0) @@ -6010,6 +6013,47 @@ packages: '@scure/base': 1.1.3 dev: true + /@sentry-internal/feedback@7.98.0: + resolution: {integrity: sha512-t/mATvwkLcQLKRlx8SO5vlUjaadF6sT3lfR0PdWYyBy8qglbMTHDW4KP6JKh1gdzTVQGnwMByy+/4h9gy4AVzw==} + engines: {node: '>=12'} + dependencies: + '@sentry/core': 7.98.0 + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + dev: false + + /@sentry-internal/replay-canvas@7.98.0: + resolution: {integrity: sha512-vAR6KIycyazaY9HwxG5UONrPTe8jeKtZr6k04svPC8OvcoI0xF+l1jMEYcarffuzKpZlPfssYb5ChHtKuXCB+Q==} + engines: {node: '>=12'} + dependencies: + '@sentry/core': 7.98.0 + '@sentry/replay': 7.98.0 + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + dev: false + + /@sentry-internal/tracing@7.98.0: + resolution: {integrity: sha512-FnhD2uMLIAJvv4XsYPv3qsTTtxrImyLxiZacudJyaWFhxoeVQ8bKKbWJ/Ar68FAwqTtjXMeY5evnEBbRMcQlaA==} + engines: {node: '>=8'} + dependencies: + '@sentry/core': 7.98.0 + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + dev: false + + /@sentry/browser@7.98.0: + resolution: {integrity: sha512-/MzTS31N2iM6Qwyh4PSpHihgmkVD5xdfE5qi1mTlwQZz5Yz8t7MdMriX8bEDPlLB8sNxl7+D6/+KUJO8akX0nQ==} + engines: {node: '>=8'} + dependencies: + '@sentry-internal/feedback': 7.98.0 + '@sentry-internal/replay-canvas': 7.98.0 + '@sentry-internal/tracing': 7.98.0 + '@sentry/core': 7.98.0 + '@sentry/replay': 7.98.0 + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + dev: false + /@sentry/core@5.30.0: resolution: {integrity: sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==} engines: {node: '>=6'} @@ -6021,6 +6065,14 @@ packages: tslib: 1.14.1 dev: true + /@sentry/core@7.98.0: + resolution: {integrity: sha512-baRUcpCNGyk7cApQHMfqEZJkXdvAKK+z/dVWiMqWc5T5uhzMnPE8/gjP1JZsMtJSQ8g5nHimBdI5TwOyZtxPaA==} + engines: {node: '>=8'} + dependencies: + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + dev: false + /@sentry/hub@5.30.0: resolution: {integrity: sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==} engines: {node: '>=6'} @@ -6056,6 +6108,30 @@ packages: - supports-color dev: true + /@sentry/react@7.98.0(react@18.2.0): + resolution: {integrity: sha512-rTvsAaGPuOGm2FvJAD8aB7iE+rUIrwYWKT4gANvg8zxRzPCK7ukKkpmL3SeJi7bvLNHYLATl1hUVDgm8VpHDng==} + engines: {node: '>=8'} + peerDependencies: + react: 15.x || 16.x || 17.x || 18.x + dependencies: + '@sentry/browser': 7.98.0 + '@sentry/core': 7.98.0 + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + hoist-non-react-statics: 3.3.2 + react: 18.2.0 + dev: false + + /@sentry/replay@7.98.0: + resolution: {integrity: sha512-CQabv/3KnpMkpc2TzIquPu5krpjeMRAaDIO0OpTj5SQeH2RqSq3fVWNZkHa8tLsADxcfLFINxqOg2jd1NxvwxA==} + engines: {node: '>=12'} + dependencies: + '@sentry-internal/tracing': 7.98.0 + '@sentry/core': 7.98.0 + '@sentry/types': 7.98.0 + '@sentry/utils': 7.98.0 + dev: false + /@sentry/tracing@5.30.0: resolution: {integrity: sha512-dUFowCr0AIMwiLD7Fs314Mdzcug+gBVo/+NCMyDw8tFxJkwWAKl7Qa2OZxLQ0ZHjakcj1hNKfCQJ9rhyfOl4Aw==} engines: {node: '>=6'} @@ -6072,6 +6148,11 @@ packages: engines: {node: '>=6'} dev: true + /@sentry/types@7.98.0: + resolution: {integrity: sha512-pc034ziM0VTETue4bfBcBqTWGy4w0okidtoZJjGVrYAfE95ObZnUGVj/XYIQ3FeCYWIa7NFN2MvdsCS0buwivQ==} + engines: {node: '>=8'} + dev: false + /@sentry/utils@5.30.0: resolution: {integrity: sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==} engines: {node: '>=6'} @@ -6080,6 +6161,13 @@ packages: tslib: 1.14.1 dev: true + /@sentry/utils@7.98.0: + resolution: {integrity: sha512-0/LY+kpHxItVRY0xPDXPXVsKRb95cXsGSQf8sVMtfSjz++0bLL1U4k7PFz1c5s2/Vk0B8hS6duRrgMv6dMIZDw==} + engines: {node: '>=8'} + dependencies: + '@sentry/types': 7.98.0 + dev: false + /@sideway/address@4.1.4: resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==} dependencies: