Sentry setup (#822)

* Install and setup

* Integrated into vitejs

* Test sentry auth token setup

* Revert last commit

.github/workflows/deploy-prd.yml

@@ -30,6 +30,8 @@ jobs:
           enable_notify_slack: true
           slack_channel: helix-ui
           slack_webhook: ${{ secrets.SLACK_INCOMING_WEBHOOK_URL }}
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - uses: darwinia-network/devops/actions/smart-vercel@main
         name: Deploy web (testnet)
@@ -63,6 +65,7 @@ jobs:
       - name: Publish ipfs
         env:
           FLEEK_TOKEN: ${{ secrets.FLEEK_TOKEN }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
         run: |
           pnpm install
           pnpm web build:mainnet

apps/web/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Sentry Config File
+.env.sentry-build-plugin

apps/web/package.json

@@ -21,6 +21,8 @@
     "@floating-ui/react": "^0.26.14",
     "@helixbridge/helixconf": "1.1.14",
     "@rainbow-me/rainbowkit": "^1.3.7",
+    "@sentry/react": "^8.30.0",
+    "@sentry/vite-plugin": "^2.22.4",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
     "graphql": "^16.8.1",

apps/web/src/main.tsx

@@ -5,6 +5,20 @@ import { RouterProvider } from "react-router-dom";
 import { router } from "./router.tsx";
 import PWABadge from "./components/pwa-badge.tsx";
 
+import * as Sentry from "@sentry/react";
+
+Sentry.init({
+  dsn: "https://a66eef9c0aaa54aab451554089b9bebd@o4507939319906304.ingest.us.sentry.io/4507939325411328",
+  integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+});
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <RouterProvider router={router} />

apps/web/vite.config.ts

@@ -1,3 +1,4 @@
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 /// <reference types="vitest" />
 
 import { defineConfig } from "vite";
@@ -7,6 +8,7 @@ import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "",
+
   plugins: [
     react(),
     VitePWA({
@@ -36,5 +38,13 @@ export default defineConfig({
         type: "module",
       },
     }),
+    sentryVitePlugin({
+      org: "helix-ck",
+      project: "javascript-react",
+    }),
   ],
+
+  build: {
+    sourcemap: true,
+  },
 });