fix: improve sentry config (#1621)

* fix: add REACT_APP_SENTRY_ENABLED to sample environment
* fix: add SENTRY_ENABLED config variable

.depcheckrc

@@ -1 +1 @@
-ignores: [ "@graphql-codegen/client-preset", "@babel/plugin-proposal-private-property-in-object", "@graphql-codegen/cli", "@ianvs/prettier-plugin-sort-imports", "@mui/system", "@mui/utils", "account", "App", "assets", "collaboration", "common", "config", "contact", "custom-hooks", "eslint-config-react-app", "forms", "gis", "group", "home", "index.css", "landscape", "layout", "localization", "media", "monitoring", "navigation", "notifications", "permissions", "react-hoc", "rollbar", "sharedData", "slate", "storyMap", "stringUtils", "stylelint-prettier", "taxonomies", "terrasoApi", "tests", "theme", "timeUtils", "tool" ]
+ignores: [ "@graphql-codegen/client-preset", "@babel/plugin-proposal-private-property-in-object", "@graphql-codegen/cli", "@ianvs/prettier-plugin-sort-imports", "@mui/system", "@mui/utils", "account", "App", "assets", "collaboration", "common", "config", "contact", "custom-hooks", "eslint-config-react-app", "forms", "gis", "group", "home", "index.css", "landscape", "layout", "localization", "media", "monitoring", "navigation", "notifications", "permissions", "react-hoc", "rollbar", "sharedData", "slate", "storyMap", "stringUtils", "stylelint-prettier", "taxonomies", "terrasoApi", "tests", "theme", "timeUtils", "tool", "utils" ]

.prettierrc

@@ -8,7 +8,7 @@
 		"<THIRD_PARTY_MODULES>",
 		"^@mui/(.*)$",
 		"",
-		"^(custom-hooks|react-hoc|timeUtils)$",
+		"^(custom-hooks|react-hoc|timeUtils|utils)$",
 		"",
 		"^(collaboration|common|forms|layout|localization|monitoring|navigation|notifications|permissions|state)/(.*)$",
 		"^(account|contact|gis|group|home|landscape|sharedData|storyMap|taxonomies|terrasoBackend|tool|user)/(.*)$",

local.env.sample

@@ -4,3 +4,4 @@ REACT_APP_PLAUSIBLE_DOMAIN=app.local.terraso.org
 REACT_APP_MAPBOX_ACCESS_TOKEN=
 REACT_APP_SENTRY_DSN=https://[email protected]/abcd
 SENTRY_AUTH_TOKEN=sntrys_eyxxxxxxxxxxx
+REACT_APP_SENTRY_ENABLED=false

src/config.ts

@@ -36,6 +36,9 @@ const COOKIES_PARAMS = { path: '/', domain: COOKIES_DOMAIN };
 
 export const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN || '';
 
+export const SENTRY_ENABLED =
+  process.env.REACT_APP_SENTRY_ENABLED === 'true' || false;
+
 setAPIConfig({
   terrasoAPIURL: TERRASO_API_URL,
   graphQLEndpoint: GRAPHQL_ENDPOINT,

src/index.js

@@ -26,38 +26,49 @@ import AppWrappers from 'layout/AppWrappers';
 import reportWebVitals from 'monitoring/reportWebVitals';
 import rules from 'permissions/rules';
 
-import { SENTRY_DSN, TERRASO_ENV } from 'config';
+import {
+  REACT_APP_BASE_URL,
+  SENTRY_DSN,
+  SENTRY_ENABLED,
+  TERRASO_ENV,
+} from 'config';
 
 import theme from 'theme';
 
 import 'index.css';
 
 import App from 'App';
 
-Sentry.init({
-  dsn: SENTRY_DSN,
-  environment: TERRASO_ENV,
-  integrations: [
-    // 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,
-    }),
-    Sentry.replayIntegration(),
-  ],
+import { escapeStringRegex } from 'utils';
 
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  tracesSampleRate: 1.0,
+if (SENTRY_ENABLED) {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: TERRASO_ENV,
+    integrations: [
+      // 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,
+      }),
+      Sentry.replayIntegration(),
+    ],
 
-  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
-  tracePropagationTargets: ['127.0.0.1', /^https:\/\/terraso\.org/],
+    // Set tracesSampleRate to 1.0 to capture 100%
+    // of transactions for performance monitoring.
+    tracesSampleRate: 1.0,
 
-  // Capture Replay for 10% of all sessions,
-  // plus for 100% of sessions with an error
-  replaysSessionSampleRate: 0.1,
-  replaysOnErrorSampleRate: 1.0,
-});
+    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: [
+      new RegExp(`^${escapeStringRegex(REACT_APP_BASE_URL)}`),
+    ],
+
+    // 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(
   <AppWrappers store={createStore()} theme={theme} permissionsRules={rules}>

src/theme.js

@@ -14,6 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
+
 import ErrorIcon from '@mui/icons-material/Report';
 import { createTheme } from '@mui/material/styles';
 

src/timeUtils.js

@@ -1,3 +1,20 @@
+/*
+ * Copyright © 2021-2023 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
 const TIME_ONE_DAY = 86400000;
 
 export const daysSince = dateString => {

src/utils.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright © 2024 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+export const escapeStringRegex = input => {
+  return input.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+};