From 55b11478e99bd4cb8f5a57f97472537d50d782e0 Mon Sep 17 00:00:00 2001 From: ioay Date: Fri, 26 Jan 2024 00:12:53 +0100 Subject: [PATCH] Sentry SDK initialization --- dapp/.env | 4 + dapp/.env.production | 5 + dapp/package.json | 1 + dapp/src/DApp.tsx | 2 + dapp/src/hooks/useSentry.ts | 12 +++ dapp/src/sdk/sentry/index.ts | 16 +++ pnpm-lock.yaml | 196 +++++++++++++++++------------------ 7 files changed, 137 insertions(+), 99 deletions(-) create mode 100644 dapp/.env.production create mode 100644 dapp/src/hooks/useSentry.ts create mode 100644 dapp/src/sdk/sentry/index.ts diff --git a/dapp/.env b/dapp/.env index 50d08e6aa..0949a7a2c 100644 --- a/dapp/.env +++ b/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 diff --git a/dapp/.env.production b/dapp/.env.production new file mode 100644 index 000000000..3fc2aad34 --- /dev/null +++ b/dapp/.env.production @@ -0,0 +1,5 @@ +VITE_USE_TESTNET=false + +# Configuration of sentry.io +VITE_SENTRY_SUPPORT=false +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..f06823e64 100644 --- a/dapp/src/DApp.tsx +++ b/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 ( <> diff --git a/dapp/src/hooks/useSentry.ts b/dapp/src/hooks/useSentry.ts new file mode 100644 index 000000000..f671602f1 --- /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..74ba1bed5 --- /dev/null +++ b/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, + }) +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2f83c5f7..7667f4ecc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -129,6 +129,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.3(react-dom@18.2.0)(react@18.2.0) @@ -382,7 +385,7 @@ packages: '@babel/traverse': 7.23.4 '@babel/types': 7.23.4 convert-source-map: 2.0.0 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 6.3.1 @@ -1626,7 +1629,7 @@ packages: '@babel/helper-split-export-declaration': 7.22.6 '@babel/parser': 7.23.4 '@babel/types': 7.23.4 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -3179,7 +3182,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) espree: 9.6.1 globals: 13.23.0 ignore: 5.3.0 @@ -3784,7 +3787,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 2.0.1 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -5241,6 +5244,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'} @@ -5252,6 +5296,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'} @@ -5287,6 +5339,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'} @@ -5303,6 +5379,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'} @@ -5311,6 +5392,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: @@ -5406,35 +5494,6 @@ packages: engines: {node: '>=12'} dev: false - /@thesis-co/eslint-config@0.6.1(eslint@8.54.0)(prettier@3.1.0)(typescript@5.3.2): - resolution: {integrity: sha512-0vJCCI4UwUdniDCQeTFlMBT+bSp5pGkrtHrZrG2vmyLZwSVdJNtInjkBc/Jd0sGfMtPo3pqQRwA40Zo80lPi+Q==} - engines: {node: '>=14.0.0'} - peerDependencies: - eslint: '>=6.8.0' - dependencies: - '@thesis-co/prettier-config': github.com/thesis/prettier-config/daeaac564056a7885e4366ce12bfde6fd823fc90(prettier@3.1.0) - '@typescript-eslint/eslint-plugin': 6.12.0(@typescript-eslint/parser@6.12.0)(eslint@8.54.0)(typescript@5.3.2) - '@typescript-eslint/parser': 6.12.0(eslint@8.54.0)(typescript@5.3.2) - eslint: 8.54.0 - eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.33.2)(eslint@8.54.0) - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.54.0) - eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@6.12.0)(@typescript-eslint/parser@6.12.0)(eslint-plugin-import@2.29.1)(eslint@8.54.0) - eslint-config-prettier: 9.0.0(eslint@8.54.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.12.0)(eslint@8.54.0) - eslint-plugin-jsx-a11y: 6.8.0(eslint@8.54.0) - eslint-plugin-no-only-tests: 3.1.0 - eslint-plugin-prettier: 5.0.1(eslint-config-prettier@9.0.0)(eslint@8.54.0)(prettier@3.1.0) - eslint-plugin-react: 7.33.2(eslint@8.54.0) - eslint-plugin-react-hooks: 4.6.0(eslint@8.54.0) - transitivePeerDependencies: - - '@types/eslint' - - eslint-import-resolver-typescript - - eslint-import-resolver-webpack - - prettier - - supports-color - - typescript - dev: true - /@tokenizer/token@0.3.0: resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==} @@ -5819,7 +5878,7 @@ packages: '@typescript-eslint/type-utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) '@typescript-eslint/visitor-keys': 6.12.0 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) eslint: 8.54.0 graphemer: 1.4.0 ignore: 5.3.0 @@ -5864,7 +5923,7 @@ packages: '@typescript-eslint/types': 6.12.0 '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) '@typescript-eslint/visitor-keys': 6.12.0 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) eslint: 8.54.0 typescript: 5.3.2 transitivePeerDependencies: @@ -5915,7 +5974,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 6.12.0(typescript@5.3.2) '@typescript-eslint/utils': 6.12.0(eslint@8.54.0)(typescript@5.3.2) - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) eslint: 8.54.0 ts-api-utils: 1.0.3(typescript@5.3.2) typescript: 5.3.2 @@ -5962,7 +6021,7 @@ packages: dependencies: '@typescript-eslint/types': 6.12.0 '@typescript-eslint/visitor-keys': 6.12.0 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.4 @@ -7992,17 +8051,6 @@ packages: dependencies: ms: 2.1.3 - /debug@4.3.4: - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.2 - /debug@4.3.4(supports-color@8.1.1): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -8614,21 +8662,6 @@ packages: semver: 6.3.1 dev: true - /eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.29.1)(eslint@8.54.0): - resolution: {integrity: sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==} - engines: {node: ^10.12.0 || >=12.0.0} - peerDependencies: - eslint: ^7.32.0 || ^8.2.0 - eslint-plugin-import: ^2.25.2 - dependencies: - confusing-browser-globals: 1.0.11 - eslint: 8.54.0 - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.12.0)(eslint@8.54.0) - object.assign: 4.1.4 - object.entries: 1.1.7 - semver: 6.3.1 - dev: true - /eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.12.0)(@typescript-eslint/parser@6.12.0)(eslint-plugin-import@2.29.0)(eslint@8.54.0): resolution: {integrity: sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==} peerDependencies: @@ -8644,21 +8677,6 @@ packages: eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.12.0)(eslint@8.54.0) dev: true - /eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.12.0)(@typescript-eslint/parser@6.12.0)(eslint-plugin-import@2.29.1)(eslint@8.54.0): - resolution: {integrity: sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==} - peerDependencies: - '@typescript-eslint/eslint-plugin': ^5.13.0 || ^6.0.0 - '@typescript-eslint/parser': ^5.0.0 || ^6.0.0 - eslint: ^7.32.0 || ^8.2.0 - eslint-plugin-import: ^2.25.3 - dependencies: - '@typescript-eslint/eslint-plugin': 6.12.0(@typescript-eslint/parser@6.12.0)(eslint@8.54.0)(typescript@5.3.2) - '@typescript-eslint/parser': 6.12.0(eslint@8.54.0)(typescript@5.3.2) - eslint: 8.54.0 - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.54.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.12.0)(eslint@8.54.0) - dev: true - /eslint-config-airbnb@19.0.4(eslint-plugin-import@2.29.0)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.33.2)(eslint@8.54.0): resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==} engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -8679,26 +8697,6 @@ packages: object.entries: 1.1.7 dev: true - /eslint-config-airbnb@19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.33.2)(eslint@8.54.0): - resolution: {integrity: sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==} - engines: {node: ^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0} - peerDependencies: - eslint: ^7.32.0 || ^8.2.0 - eslint-plugin-import: ^2.25.3 - eslint-plugin-jsx-a11y: ^6.5.1 - eslint-plugin-react: ^7.28.0 - eslint-plugin-react-hooks: ^4.3.0 - dependencies: - eslint: 8.54.0 - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.54.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.12.0)(eslint@8.54.0) - eslint-plugin-jsx-a11y: 6.8.0(eslint@8.54.0) - eslint-plugin-react: 7.33.2(eslint@8.54.0) - eslint-plugin-react-hooks: 4.6.0(eslint@8.54.0) - object.assign: 4.1.4 - object.entries: 1.1.7 - dev: true - /eslint-config-prettier@9.0.0(eslint@8.54.0): resolution: {integrity: sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==} hasBin: true @@ -9063,7 +9061,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.2