diff --git a/backend/__init__.py b/backend/__init__.py index 0fd1e6ca7c..078de88870 100644 --- a/backend/__init__.py +++ b/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, ) diff --git a/frontend/.env.expand b/frontend/.env.expand index c93048f8b9..866ab17ead 100644 --- a/frontend/.env.expand +++ b/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 diff --git a/frontend/package.json b/frontend/package.json index c48ce3bd09..0619ec8cb0 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/App.js b/frontend/src/App.js index 619dd52a44..32a9c8e596 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -3,6 +3,7 @@ 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'; @@ -10,6 +11,7 @@ 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 ( - <> + }> {isLoading ? ( ) : ( @@ -135,7 +137,7 @@ let App = (props) => { )} - + ); }; diff --git a/frontend/src/config/index.js b/frontend/src/config/index.js index 3ce077df83..a5297102d7 100644 --- a/frontend/src/config/index.js +++ b/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 diff --git a/frontend/src/index.js b/frontend/src/index.js index edc0fd2a2e..0ae770a947 100644 --- a/frontend/src/index.js +++ b/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: { diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 7d26a032a5..28561e8e41 100644 --- a/frontend/src/locales/en.json +++ b/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.", diff --git a/frontend/src/views/fallback.js b/frontend/src/views/fallback.js new file mode 100644 index 0000000000..1ea5642e22 --- /dev/null +++ b/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 ( + <> +
+

+ +

+
+

+ +

+

+ + + + +

+
+
+ + ); +}; diff --git a/frontend/src/views/messages.js b/frontend/src/views/messages.js index 248f9ad0d6..6d621d56cb 100644 --- a/frontend/src/views/messages.js +++ b/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', diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 70fc656519..09aaafd609 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1656,6 +1656,81 @@ prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" +"@sentry/browser@5.23.0": + 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/core@5.23.0": + 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/hub@5.23.0": + 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/minimal@5.23.0": + 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/types@5.23.0": + version "5.23.0" + resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.23.0.tgz#935701637c2d5b1c123ac292bc253bddf451b076" + integrity sha512-PbN5MVWxrq05sZ707lc8lleV0xSsI6jWr9h9snvbAuMjcauE0lmdWmjoWKY3PAz2s1mGYFh55kIo8SmQuVwbYg== + +"@sentry/utils@5.23.0": + 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"