Add Sentry config and ErrorBoundary Component

.env.example

@@ -6,6 +6,7 @@ REACT_APP_GOOGLE_ANALYTICS=
 REACT_APP_INFURA_TOKEN=
 REACT_APP_IPFS_GATEWAY=https://ipfs.io/ipfs
 PUBLIC_URL=/app/
+REACT_APP_SENTRY_DSN=
 
 # For production environments
 REACT_APP_BLOCKNATIVE_KEY=

.travis.yml

@@ -10,27 +10,38 @@ matrix:
   include:
     - env:
         - REACT_APP_NETWORK='mainnet'
-        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_MAINNET}
         - STAGING_BUCKET_NAME=${STAGING_MAINNET_BUCKET_NAME}
+        - REACT_APP_SENTRY_DSN=${SENTRY_DSN_MAINNET}
+        - SENTRY_PROJECT=${SENTRY_PROJECT_MAINNET}
+        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_MAINNET}
         - REACT_APP_GNOSIS_APPS_URL=${REACT_APP_GNOSIS_APPS_URL_PROD}
       if: (branch = master AND NOT type = pull_request) OR tag IS present
     - env:
         - REACT_APP_NETWORK='rinkeby'
+        - REACT_APP_SENTRY_DSN=${SENTRY_DSN_RINKEBY}
+        - SENTRY_PROJECT=${SENTRY_PROJECT_RINKEBY}
         - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_RINKEBY}
         - REACT_APP_GNOSIS_APPS_URL=${REACT_APP_GNOSIS_APPS_URL_STAGING}
     - env:
         - REACT_APP_NETWORK='xdai'
-        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_XDAI}
         - STAGING_BUCKET_NAME=${STAGING_XDAI_BUCKET_NAME}
+        - REACT_APP_SENTRY_DSN=${SENTRY_DSN_XDAI}
+        - SENTRY_PROJECT=${SENTRY_PROJECT_XDAI}
+        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_XDAI}
       if: (branch = master AND NOT type = pull_request) OR tag IS present
     - env:
         - REACT_APP_NETWORK='volta'
-        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_VOLTA}
         - STAGING_BUCKET_NAME=${STAGING_VOLTA_BUCKET_NAME}
+        - REACT_APP_SENTRY_DSN=${SENTRY_DSN_VOLTA}
+        - SENTRY_PROJECT=${SENTRY_PROJECT_VOLTA}
+        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_VOLTA}
+      if: (branch = master AND NOT type = pull_request) OR tag IS present
     - env:
         - REACT_APP_NETWORK='energy_web_chain'
-        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_EWC}
         - STAGING_BUCKET_NAME=${STAGING_EWC_BUCKET_NAME}      
+        - REACT_APP_SENTRY_DSN=${SENTRY_DSN_EWC}
+        - SENTRY_PROJECT=${SENTRY_PROJECT_EWC}
+        - REACT_APP_GOOGLE_ANALYTICS=${REACT_APP_GOOGLE_ANALYTICS_ID_EWC}
       if: ((branch = master OR branch = release/v2.14.0) AND NOT type = pull_request) OR tag IS present
 
 cache:
@@ -48,7 +59,12 @@ script:
   - yarn prettier:check
   - yarn test:coverage
   - yarn build
-  #- bash ./config/travis/build.sh
+  - if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]] || [ -n "$TRAVIS_TAG" ]; then
+      echo "Upload sentry source maps"
+      yarn sentry-upload-sourcemaps;
+    else
+      echo "Skip source map upload";
+    fi;
 after_success:
   # Pull Request - Deploy it to a review environment
   # Travis doesn't do deploy step with pull requests builds

package.json

@@ -42,7 +42,8 @@
     "test:coverage": "yarn test --coverage --watchAll=false",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "sentry-upload-sourcemaps": "sentry-cli --auth-token $SENTRY_AUTH_TOKEN releases -o $SENTRY_ORG -p $SENTRY_PROJECT files $npm_package_version upload-sourcemaps ./build/static/js/"
   },
   "husky": {
     "hooks": {
@@ -167,13 +168,15 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#70e57bdd1e0fd5dfdf5768076577c1e000b5fe28",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#8d8508e",    
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid": "5.26.0",
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.56",
     "@openzeppelin/contracts": "3.1.0",
+    "@sentry/react": "^5.27.1",
+    "@sentry/tracing": "^5.27.1",
     "@truffle/contract": "4.2.26",
     "async-sema": "^3.1.0",
     "axios": "0.20.0",
@@ -232,6 +235,7 @@
     "web3-utils": "^1.2.11"
   },
   "devDependencies": {
+    "@sentry/cli": "^1.58.0",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",

src/components/GlobalErrorBoundary/index.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Text, Link, Icon, FixedIcon, Title } from '@gnosis.pm/safe-react-components'
+
+import { IS_PRODUCTION } from 'src/utils/constants'
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+`
+
+const Content = styled.div`
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  > * {
+    margin-top: 10px;
+  }
+`
+
+const LinkWrapper = styled.div`
+  display: inline-flex;
+  margin-bottom: 10px;
+
+  > :first-of-type {
+    margin-right: 5px;
+  }
+`
+
+const LinkContent = styled.div`
+  display: flex;
+  align-items: center;
+
+  > span {
+    margin-right: 5px;
+  }
+`
+
+type Props = {
+  error: Error
+  componentStack: string
+  resetError: () => void
+}
+
+const GlobalErrorBoundaryFallback = ({ error, componentStack }: Props): React.ReactElement => {
+  return (
+    <Wrapper>
+      <Content>
+        <Title size="md">Something went wrong, please try again.</Title>
+        <FixedIcon type="networkError" />
+        {IS_PRODUCTION && (
+          <div>
+            <Text size="xl" as="span">
+              In case the problem persists, please reach out to us via{' '}
+            </Text>
+            <LinkWrapper>
+              <a target="_blank" href="email: mailto:safe@gnosis.io" rel="noopener noreferrer">
+                <Text color="primary" size="lg" as="span">
+                  Email
+                </Text>
+              </a>
+              <Icon type="externalLink" color="primary" size="sm" />
+            </LinkWrapper>
+            or{' '}
+            <LinkWrapper>
+              <a target="_blank" href="https://discordapp.com/invite/FPMRAwK" rel="noopener noreferrer">
+                <Text color="primary" size="lg" as="span">
+                  Discord
+                </Text>
+              </a>
+              <Icon type="externalLink" color="primary" size="sm" />
+            </LinkWrapper>
+          </div>
+        )}
+        {!IS_PRODUCTION && (
+          <>
+            <Text size="xl" color="error">
+              {error.toString()}
+            </Text>
+            <Text size="md" color="error">
+              {componentStack}
+            </Text>
+          </>
+        )}
+        <Link size="lg" color="primary" href="/app/">
+          <LinkContent>
+            <Icon size="md" type="home" color="primary" />
+            Go to Home
+          </LinkContent>
+        </Link>
+      </Content>
+    </Wrapper>
+  )
+}
+
+export default GlobalErrorBoundaryFallback

src/components/Root/index.tsx

@@ -4,10 +4,11 @@ import { ConnectedRouter } from 'connected-react-router'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { ThemeProvider } from 'styled-components'
+import * as Sentry from '@sentry/react'
 
 import Loader from 'src/components/Loader'
 import App from 'src/components/App'
-
+import GlobalErrorBoundary from 'src/components/GlobalErrorBoundary'
 import AppRoutes from 'src/routes'
 import { history, store } from 'src/store'
 import theme from 'src/theme/mui'
@@ -20,7 +21,11 @@ const Root = (): React.ReactElement => (
   <ThemeProvider theme={styledTheme}>
     <Provider store={store}>
       <MuiThemeProvider theme={theme}>
-        <ConnectedRouter history={history}>{<App>{wrapInSuspense(<AppRoutes />, <Loader />)}</App>}</ConnectedRouter>
+        <ConnectedRouter history={history}>
+          <Sentry.ErrorBoundary fallback={GlobalErrorBoundary}>
+            <App>{wrapInSuspense(<AppRoutes />, <Loader />)}</App>
+          </Sentry.ErrorBoundary>
+        </ConnectedRouter>
       </MuiThemeProvider>
     </Provider>
   </ThemeProvider>

src/index.tsx

@@ -1,13 +1,16 @@
 import { BigNumber } from 'bignumber.js'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import * as Sentry from '@sentry/react'
+import { Integrations } from '@sentry/tracing'
 
 import Root from 'src/components/Root'
 import loadCurrentSessionFromStorage from 'src/logic/currentSession/store/actions/loadCurrentSessionFromStorage'
 import loadActiveTokens from 'src/logic/tokens/store/actions/loadActiveTokens'
 import loadDefaultSafe from 'src/logic/safe/store/actions/loadDefaultSafe'
 import loadSafesFromStorage from 'src/logic/safe/store/actions/loadSafesFromStorage'
 import { store } from 'src/store'
+import { SENTRY_DSN } from './utils/constants'
 
 BigNumber.set({ EXPONENTIAL_AT: [-7, 255] })
 
@@ -16,6 +19,13 @@ store.dispatch(loadSafesFromStorage())
 store.dispatch(loadDefaultSafe())
 store.dispatch(loadCurrentSessionFromStorage())
 
+Sentry.init({
+  dsn: SENTRY_DSN,
+  release: `safe-react@${process.env.REACT_APP_APP_VERSION}`,
+  integrations: [new Integrations.BrowserTracing()],
+  sampleRate: 1,
+})
+
 const root = document.getElementById('root')
 
 if (root !== null) {

src/routes/safe/container/index.tsx

@@ -101,7 +101,7 @@ const Container = (): React.ReactElement => {
           path={`${matchSafeWithAddress?.path}/address-book`}
           render={() => wrapInSuspense(<AddressBookTable />, null)}
         />
-        <Redirect to={`${matchSafeWithAddress?.path}/balances`} />
+        <Redirect to={`${matchSafeWithAddress?.url}/balances`} />
       </Switch>
       {modal.isOpen && <GenericModal {...modal} onClose={closeGenericModal} />}
     </>

src/utils/constants.ts

@@ -1,8 +1,10 @@
 export const APP_ENV = process.env.REACT_APP_ENV
 export const NODE_ENV = process.env.NODE_ENV
+export const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 export const NETWORK = process.env.REACT_APP_NETWORK?.toUpperCase() || 'RINKEBY'
 export const INTERCOM_ID = APP_ENV === 'production' ? process.env.REACT_APP_INTERCOM_ID : 'plssl1fl'
 export const GOOGLE_ANALYTICS_ID = process.env.REACT_APP_GOOGLE_ANALYTICS || ''
+export const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN || ''
 export const PORTIS_ID = process.env.REACT_APP_PORTIS_ID ?? '852b763d-f28b-4463-80cb-846d7ec5806b'
 export const FORTMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY ?? 'pk_test_CAD437AA29BE0A40'
 export const BLOCKNATIVE_KEY = process.env.REACT_APP_BLOCKNATIVE_KEY ?? '7fbb9cee-7e97-4436-8770-8b29a9a8814c'