add sentry integration to frontend + adjust backend sample_rate

backend/__init__.py

@@ -20,7 +20,7 @@ def sentry_init():
     sentry_sdk.init(
         dsn=EnvironmentConfig.SENTRY_BACKEND_DSN,
         integrations=[FlaskIntegration()],
-        traces_sample_rate=1.0,
+        traces_sample_rate=0.1,
     )
 
 

frontend/.env.expand

@@ -33,3 +33,4 @@ REACT_APP_TM_ORG_NAME=$TM_ORG_NAME
 REACT_APP_OSM_REGISTER_URL=$OSM_REGISTER_URL
 REACT_APP_ID_EDITOR_URL=$ID_EDITOR_URL
 REACT_APP_POTLATCH2_EDITOR_URL=$POTLATCH2_EDITOR_URL
+REACT_APP_SENTRY_FRONTEND_DSN=$TM_SENTRY_FRONTEND_DSN

frontend/package.json

@@ -16,6 +16,8 @@
     "@mapbox/mapbox-gl-language": "^0.10.1",
     "@mapbox/togeojson": "^0.16.0",
     "@reach/router": "^1.3.4",
+    "@sentry/react": "^5.23.0",
+    "@sentry/tracing": "^5.23.0",
     "@turf/area": "^6.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/bbox-polygon": "^6.0.1",

frontend/src/App.js

@@ -3,13 +3,15 @@ import { Router, Redirect, globalHistory } from '@reach/router';
 import { QueryParamProvider } from 'use-query-params';
 import { useMeta } from 'react-meta-elements';
 import { connect } from 'react-redux';
+import * as Sentry from '@sentry/react';
 
 import './assets/styles/index.scss';
 import { ORG_NAME, MATOMO_ID } from './config';
 import { Header } from './components/header';
 import { Footer } from './components/footer';
 import { Preloader } from './components/preloader';
 import { Home } from './views/home';
+import { FallbackComponent } from './views/fallback';
 import { AboutPage } from './views/about';
 import { LearnPage } from './views/learn';
 import { QuickstartPage } from './views/quickstart';
@@ -58,7 +60,7 @@ let App = (props) => {
   const { isLoading } = props;
 
   return (
-    <>
+    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
       {isLoading ? (
         <Preloader />
       ) : (
@@ -135,7 +137,7 @@ let App = (props) => {
           </Router>
         </div>
       )}
-    </>
+    </Sentry.ErrorBoundary>
   );
 };
 

frontend/src/config/index.js

@@ -40,9 +40,14 @@ export const IMAGE_UPLOAD_SERVICE = process.env.REACT_APP_IMAGE_UPLOAD_API_URL |
 export const HOMEPAGE_VIDEO_URL = process.env.REACT_APP_HOMEPAGE_VIDEO_URL || '';
 
 // OSM API and Editor URLs
-export const OSM_SERVER_URL = process.env.REACT_APP_OSM_SERVER_URL || 'https://www.openstreetmap.org';
-export const ID_EDITOR_URL = process.env.REACT_APP_ID_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=id&';
-export const POTLATCH2_EDITOR_URL = process.env.REACT_APP_POTLATCH2_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=potlatch2'
+export const OSM_SERVER_URL =
+  process.env.REACT_APP_OSM_SERVER_URL || 'https://www.openstreetmap.org';
+export const ID_EDITOR_URL =
+  process.env.REACT_APP_ID_EDITOR_URL || 'https://www.openstreetmap.org/edit?editor=id&';
+export const POTLATCH2_EDITOR_URL =
+  process.env.REACT_APP_POTLATCH2_EDITOR_URL ||
+  'https://www.openstreetmap.org/edit?editor=potlatch2';
+export const SENTRY_FRONTEND_DSN = process.env.REACT_APP_SENTRY_FRONTEND_DSN;
 
 export const MAX_FILESIZE = parseInt(process.env.REACT_APP_MAX_FILESIZE) || 1000000; // bytes
 

frontend/src/index.js

@@ -2,13 +2,24 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import WebFont from 'webfontloader';
+import * as Sentry from '@sentry/react';
+import { Integrations } from '@sentry/tracing';
 
 import App from './App';
 import { store } from './store';
 import { getUserDetails } from './store/actions/auth';
 import { ConnectedIntl } from './utils/internationalization';
 import * as serviceWorker from './serviceWorker';
-import { ENABLE_SERVICEWORKER } from './config';
+import { ENABLE_SERVICEWORKER, SENTRY_FRONTEND_DSN } from './config';
+
+console.log(process.env.npm_package_version);
+if (SENTRY_FRONTEND_DSN) {
+  Sentry.init({
+    dsn: SENTRY_FRONTEND_DSN,
+    integrations: [new Integrations.BrowserTracing()],
+    tracesSampleRate: 0.1,
+  });
+}
 
 WebFont.load({
   google: {

frontend/src/locales/en.json

@@ -808,6 +808,9 @@
   "users.detail.heatmapLegendLess": "less",
   "users.detail.delay_popup": "These statistics need heavy calculations and changes are showing up with a delay of around one hour.",
   "users.detail.teams": "Teams",
+  "error.page.title": "An error ocurred",
+  "error.page.description": "Something did not work well...",
+  "error.page.link": "Return",
   "notFound.page.title": "Page not found",
   "notFound.project.title": "Project {id} not found",
   "notFound.lead": "Check the URL or report this error.",

frontend/src/views/fallback.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { navigate } from '@reach/router';
+import { FormattedMessage } from 'react-intl';
+
+import messages from './messages';
+import { Button } from '../components/button';
+
+export const FallbackComponent = (props) => {
+  return (
+    <>
+      <div className="cf w-100 pv5 base-font">
+        <h3 className="f2 fw5 barlow-condensed tc">
+          <FormattedMessage {...messages.errorFallback} />
+        </h3>
+        <div className="tc pv4">
+          <p>
+            <FormattedMessage {...messages.errorFallbackMessage} />
+          </p>
+          <p className="pt2">
+            <a href="/contact">
+              <Button className="dib tc bg-red white mh1">
+                <FormattedMessage {...messages.contactUs} />
+              </Button>
+            </a>
+            <Button className="dib tc bg-red white mh1" onClick={() => navigate(-1)}>
+              <FormattedMessage {...messages.return} />
+            </Button>
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/views/messages.js

@@ -4,6 +4,18 @@ import { defineMessages } from 'react-intl';
  * Internationalized messages for use on views.
  */
 export default defineMessages({
+  errorFallback: {
+    id: 'error.page.title',
+    defaultMessage: 'An error ocurred',
+  },
+  errorFallbackMessage: {
+    id: 'error.page.description',
+    defaultMessage: 'Something did not work well...',
+  },
+  return: {
+    id: 'error.page.link',
+    defaultMessage: 'Return',
+  },
   pageNotFound: {
     id: 'notFound.page.title',
     defaultMessage: 'Page not found',

frontend/yarn.lock

@@ -1656,6 +1656,81 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@sentry/[email protected]":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.23.0.tgz#fc3a7a435a4524aa949f91d442435efda153fc0a"
+  integrity sha512-lBBHb/NFDOy1K5E/noDkgaibTtxp8F8gmAaVhhpGvOjlcBp1wzNJhWRePYKWgjJ7yFudxGi4Qbferdhm9RwzbA==
+  dependencies:
+    "@sentry/core" "5.23.0"
+    "@sentry/types" "5.23.0"
+    "@sentry/utils" "5.23.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.23.0.tgz#4d12ee4f5593e66fa5ffde0f9e9164a5468e5cec"
+  integrity sha512-K8Wp/g1opaauKJh2w5Z1Vw/YdudHQgH6Ng5fBazHZxA7zB9R8EbVKDsjy8XEcyHsWB7fTSlYX/7coqmZNOADdg==
+  dependencies:
+    "@sentry/hub" "5.23.0"
+    "@sentry/minimal" "5.23.0"
+    "@sentry/types" "5.23.0"
+    "@sentry/utils" "5.23.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.23.0.tgz#7350c2971fafdb9f883f0629fd1b35d2288cd6e1"
+  integrity sha512-P0sevLI9qAQc1J+AcHzNXwj83aG3GKiABVQJp0rgCUMtrXqLawa+j8pOHg8p7QWroHM7TKDMKeny9WemXBgzBQ==
+  dependencies:
+    "@sentry/types" "5.23.0"
+    "@sentry/utils" "5.23.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.23.0.tgz#93df781a98f0b334425f68b1fa0f4e1a86d8fa45"
+  integrity sha512-/w/B7ShMVu/tLI0/A5X+w6GfdZIQdFQihWyIK1vXaYS5NS6biGI3K6DcACuMrD/h4BsqlfgdXSOHHrmCJcyCXQ==
+  dependencies:
+    "@sentry/hub" "5.23.0"
+    "@sentry/types" "5.23.0"
+    tslib "^1.9.3"
+
+"@sentry/react@^5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-5.23.0.tgz#ab2c3a20a89476bc69c9937032ffe5f4969152be"
+  integrity sha512-GZ4fqtxMq1McRf7dA/jDh9KmParr2WiPib1fQOhcBl/WY5zKgiv92XkMIzOsjGjEhjdw31vbjEos4bgWWW8ztA==
+  dependencies:
+    "@sentry/browser" "5.23.0"
+    "@sentry/minimal" "5.23.0"
+    "@sentry/types" "5.23.0"
+    "@sentry/utils" "5.23.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-5.23.0.tgz#6627a6c659abce968e45e897ebc038873cc83fb2"
+  integrity sha512-cexFQCuGcFukqyaP8p8Uf/aCuMkzJeiU4Trx7vYHf16L95aSn5TGELK0SZOugEb2Gi9D9Z6NHfuK16nWjwPSRQ==
+  dependencies:
+    "@sentry/hub" "5.23.0"
+    "@sentry/minimal" "5.23.0"
+    "@sentry/types" "5.23.0"
+    "@sentry/utils" "5.23.0"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.23.0.tgz#935701637c2d5b1c123ac292bc253bddf451b076"
+  integrity sha512-PbN5MVWxrq05sZ707lc8lleV0xSsI6jWr9h9snvbAuMjcauE0lmdWmjoWKY3PAz2s1mGYFh55kIo8SmQuVwbYg==
+
+"@sentry/[email protected]":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.23.0.tgz#5e15f684b5a8f9c86e4ba15d81101eac7d6c240b"
+  integrity sha512-D5gQDM0wEjKxhE+YNvCuCHo/6JuaORF2/3aOhoJBR+dy9EACRspg7kp3+9KF44xd2HVEXkSVCJkv8/+sHePYRQ==
+  dependencies:
+    "@sentry/types" "5.23.0"
+    tslib "^1.9.3"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -12439,6 +12514,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
+tslib@^1.9.3:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"