diff --git a/package.json b/package.json index 6cae113ac..919a5200e 100644 --- a/package.json +++ b/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", diff --git a/src/config/constants.js b/src/config/constants.js index b4cc43b4e..646be2399 100644 --- a/src/config/constants.js +++ b/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'; diff --git a/src/config/sentry.js b/src/config/sentry.js new file mode 100644 index 000000000..6780612c0 --- /dev/null +++ b/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(); diff --git a/src/env.json b/src/env.json index 0b0358615..7083a8a64 100644 --- a/src/env.json +++ b/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 } diff --git a/src/index.js b/src/index.js index cf3632de4..972f9af67 100644 --- a/src/index.js +++ b/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'); diff --git a/yarn.lock b/yarn.lock index 33dbeee69..e2f031659 100644 --- a/yarn.lock +++ b/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