fix: update web client sentry config (#1580)

* chore: update sentry CLI

* chore: gitignore sentry CLI config

* fix: update sentry config

* fix: rename SENTRY_DSN environment variable to REACT_APP_SENTRY_DSN

* chore: update @sentry/react

.gitignore

@@ -30,3 +30,6 @@ src/terrasoApi/shared/graphqlSchema
 
 # Sentry Config File
 .sentryclirc
+
+# Sentry Config File
+.sentryclirc

local.env.sample

@@ -4,5 +4,5 @@ REACT_APP_PLAUSIBLE_DOMAIN=app.local.terraso.org
 REACT_APP_SHARED_DATA_ACCEPTED_EXTENSIONS=csv,doc,docx,pdf,ppt,pptx,xlsx,xls
 REACT_APP_IMAGE_ACCEPTED_EXTENSIONS=jpeg,jpg
 REACT_APP_MAPBOX_ACCESS_TOKEN=
+REACT_APP_SENTRY_DSN=https://[email protected]/abcd
 SENTRY_AUTH_TOKEN=sntrys_eyxxxxxxxxxxx
-SENTRY_DSN=https://[email protected]/abcd

package.json

@@ -14,8 +14,8 @@
     "@mui/material": "^5.15.3",
     "@mui/x-data-grid": "^6.19.1",
     "@reduxjs/toolkit": "^1.9.7",
-    "@sentry/cli": "^2.22.3",
-    "@sentry/react": "^7.102.1",
+    "@sentry/cli": "^2.28.6",
+    "@sentry/react": "^7.103.0",
     "@turf/bbox": "^6.5.0",
     "@turf/center": "^6.5.0",
     "@turf/helpers": "^6.5.0",

src/config.ts

@@ -34,7 +34,7 @@ export const COOKIES_DOMAIN =
 
 const COOKIES_PARAMS = { path: '/', domain: COOKIES_DOMAIN };
 
-export const SENTRY_DSN = process.env.SENTRY_DSN;
+export const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN || '';
 
 setAPIConfig({
   terrasoAPIURL: TERRASO_API_URL,

src/index.js

@@ -38,17 +38,25 @@ Sentry.init({
   dsn: SENTRY_DSN,
   environment: TERRASO_ENV,
   integrations: [
-    new Sentry.BrowserTracing({
-      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-      tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+    // See docs for support of different versions of variation of react router
+    // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect: React.useEffect,
     }),
-    new Sentry.Replay(),
+    Sentry.replayIntegration(),
   ],
-  // Performance Monitoring
-  tracesSampleRate: 1.0, // Capture 100% of the transactions
-  // 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.
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  tracesSampleRate: 1.0,
+
+  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['127.0.0.1', /^https:\/\/terraso\.org/],
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
 });
 
 createRoot(document.getElementById('root')).render(