ci: set up sentry

package.json

@@ -12,6 +12,8 @@
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "5.0.0-beta.5",
     "@material-ui/lab": "4.0.0-alpha.60",
+    "@sentry/react": "7.2.0",
+    "@sentry/tracing": "7.2.0",
     "@uppy/core": "2.1.6",
     "@uppy/dashboard": "2.1.4",
     "@uppy/drag-drop": "2.0.6",

src/config/constants.js

@@ -11,12 +11,14 @@ const {
   GA_MEASUREMENT_ID: ENV_GA_MEASUREMENT_ID,
   HIDDEN_ITEM_TAG_ID: ENV_HIDDEN_ITEM_TAG_ID,
   GRAASP_EXPLORE_HOST: ENV_GRAASP_EXPLORE_HOST,
+  REACT_APP_SENTRY_DSN: ENV_SENTRY_DSN,
 } = env;
 
 export const APP_NAME = 'Graasp';
 
 export const ENV = {
   DEVELOPMENT: 'development',
+  PRODUCTION: 'production',
   TEST: 'test',
 };
 
@@ -26,6 +28,8 @@ export const NODE_ENV =
   process.env.NODE_ENV ||
   ENV.DEVELOPMENT;
 
+export const SENTRY_DSN = ENV_SENTRY_DSN || process.env.REACT_APP_SENTRY_DSN;
+
 export const API_HOST =
   ENV_API_HOST || process.env.REACT_APP_API_HOST || 'http://localhost:3111';
 

src/config/sentry.js

@@ -0,0 +1,24 @@
+import { NODE_ENV, ENV } from './constants';
+
+const generateSentryConfig = () => {
+  let SENTRY_ENVIRONMENT = ENV.DEVELOPMENT;
+  let SENTRY_TRACE_SAMPLE_RATE = 1.0;
+  switch (NODE_ENV) {
+    case ENV.PRODUCTION:
+      SENTRY_ENVIRONMENT = ENV.PRODUCTION;
+      SENTRY_TRACE_SAMPLE_RATE = 0.1;
+      break;
+    case ENV.TEST:
+      SENTRY_TRACE_SAMPLE_RATE = 0.0;
+      break;
+    case ENV.DEVELOPMENT:
+      SENTRY_TRACE_SAMPLE_RATE = 0.0;
+      break;
+    default:
+  }
+
+  return { SENTRY_ENVIRONMENT, SENTRY_TRACE_SAMPLE_RATE };
+};
+
+export const { SENTRY_ENVIRONMENT, SENTRY_TRACE_SAMPLE_RATE } =
+  generateSentryConfig();

src/env.json

@@ -6,5 +6,6 @@
   "GRAASP_PERFORM_HOST": false,
   "GRAASP_EXPLORE_HOST": false,
   "GA_MEASUREMENT_ID": false,
-  "HIDDEN_ITEM_TAG_ID": false
+  "HIDDEN_ITEM_TAG_ID": false,
+  "REACT_APP_SENTRY_DSN": false
 }

src/index.js

@@ -1,14 +1,34 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactGA from 'react-ga4';
+import * as Sentry from '@sentry/react';
+import { BrowserTracing } from '@sentry/tracing';
 import './index.css';
 import Root from './components/Root';
 import * as serviceWorker from './serviceWorker';
 
 import '@graasp/ui/dist/bundle.css';
-import { ENV, GA_MEASUREMENT_ID, NODE_ENV } from './config/constants';
+import {
+  ENV,
+  GA_MEASUREMENT_ID,
+  NODE_ENV,
+  SENTRY_DSN,
+} from './config/constants';
 import { hasAcceptedCookies } from './utils/cookies';
 
+import { SENTRY_ENVIRONMENT, SENTRY_TRACE_SAMPLE_RATE } from './config/sentry';
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  integrations: [new BrowserTracing()],
+  environment: SENTRY_ENVIRONMENT,
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: SENTRY_TRACE_SAMPLE_RATE,
+});
+
 if (GA_MEASUREMENT_ID && hasAcceptedCookies() && NODE_ENV !== ENV.TEST) {
   ReactGA.initialize(GA_MEASUREMENT_ID);
   ReactGA.send('pageview');

yarn.lock

@@ -2683,6 +2683,85 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/browser@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/browser@npm:7.2.0"
+  dependencies:
+    "@sentry/core": 7.2.0
+    "@sentry/types": 7.2.0
+    "@sentry/utils": 7.2.0
+    tslib: ^1.9.3
+  checksum: 2be1f6e963805aa26158fdeee0f9a1e3ff3fd7f84b3809a84e3224672138850c2606b94fcad4d516ab020ca98c94bdda44a87fe5db076dfae98ac9f0ea26abd5
+  languageName: node
+  linkType: hard
+
+"@sentry/core@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/core@npm:7.2.0"
+  dependencies:
+    "@sentry/hub": 7.2.0
+    "@sentry/types": 7.2.0
+    "@sentry/utils": 7.2.0
+    tslib: ^1.9.3
+  checksum: 7c01d59b823c594f04110a8367d6ee5a9decb5f8f83f79cfaf01bfc97afca460d3ab0bca71ee4a55e297833056e4fed5e18c1ad874fc3d1cb95a857f980578bf
+  languageName: node
+  linkType: hard
+
+"@sentry/hub@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/hub@npm:7.2.0"
+  dependencies:
+    "@sentry/types": 7.2.0
+    "@sentry/utils": 7.2.0
+    tslib: ^1.9.3
+  checksum: f13c0eef750dd51a062e9b949f0d038be51841b55f7c78824734285d0ac472041d8e210fcac3447b396a62c752a5ae12907b9677a819a82b143302f1e0c0a045
+  languageName: node
+  linkType: hard
+
+"@sentry/react@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/react@npm:7.2.0"
+  dependencies:
+    "@sentry/browser": 7.2.0
+    "@sentry/types": 7.2.0
+    "@sentry/utils": 7.2.0
+    hoist-non-react-statics: ^3.3.2
+    tslib: ^1.9.3
+  peerDependencies:
+    react: 15.x || 16.x || 17.x || 18.x
+  checksum: 5f4e46b7d3a0d52c0ed2bc443fb4708fba2b592dc0b2846a0939803bb4b077a1c723040598755624b308591c89308882772e5e2f082d83f19de811a6053a4b8d
+  languageName: node
+  linkType: hard
+
+"@sentry/tracing@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/tracing@npm:7.2.0"
+  dependencies:
+    "@sentry/hub": 7.2.0
+    "@sentry/types": 7.2.0
+    "@sentry/utils": 7.2.0
+    tslib: ^1.9.3
+  checksum: 52ce478acb8c1cb499b89bf3b2cc0cdb880a5e203e3a3915c019a78a3227b13bbb349069df49e487407237e9d0bae37ee99a557e9f10d31e09e0d27f173fb528
+  languageName: node
+  linkType: hard
+
+"@sentry/types@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/types@npm:7.2.0"
+  checksum: 2569d8a43b84bea79c04652799553ec3bcb9f78a6ebdb68e48b237ae646f48360c30fec05564ca62049c99ea6e6483494beda2fc806e1cbc1505ac00fc711bc0
+  languageName: node
+  linkType: hard
+
+"@sentry/utils@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@sentry/utils@npm:7.2.0"
+  dependencies:
+    "@sentry/types": 7.2.0
+    tslib: ^1.9.3
+  checksum: 9cb51a95b747e7501d11a672f1ce81bea6d14108db8e8734104ce0db20624571ca686fb452105d4007914f8e41e253ac712a6552aeae56ccfc478aa777f30111
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -10251,6 +10330,8 @@ __metadata:
     "@material-ui/core": 4.12.3
     "@material-ui/icons": 5.0.0-beta.5
     "@material-ui/lab": 4.0.0-alpha.60
+    "@sentry/react": 7.2.0
+    "@sentry/tracing": 7.2.0
     "@testing-library/jest-dom": ^5.16.3
     "@testing-library/react": ^12.1.4
     "@testing-library/user-event": ^13.5.0
@@ -20046,7 +20127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1, tslib@npm:^1.9.0":
+"tslib@npm:^1.8.1, tslib@npm:^1.9.0, tslib@npm:^1.9.3":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd