Sentry: initialize on app start, and add utility for logging to it

src/GlobalErrorHandler.js

@@ -1,16 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import * as Sentry from '@sentry/browser'
+import PropTypes from 'prop-types'
 import GenericError from './components/Error/GenericError'
 import DAONotFoundError from './components/Error/DAONotFoundError'
-import { network } from './environment'
 import { DAONotFound } from './errors'
-import { getSentryDsn, getPackageVersion } from './local-settings'
+import { isSentryEnabled } from './sentry'
 import ErrorScreen from './components/Error/ErrorScreen'
 
-const SENTRY_DSN = getSentryDsn()
-const PACKAGE_VERSION = getPackageVersion()
-
 class GlobalErrorHandler extends React.Component {
   static propTypes = {
     children: PropTypes.node,
@@ -37,11 +33,6 @@ class GlobalErrorHandler extends React.Component {
     window.removeEventListener('hashchange', this.handleHashchange)
   }
   handleReportClick = () => {
-    Sentry.init({
-      dsn: SENTRY_DSN,
-      release: PACKAGE_VERSION,
-      environment: network.type,
-    })
     const eventId = Sentry.captureException(this.state.error)
     Sentry.showReportDialog({ eventId })
   }
@@ -60,7 +51,7 @@ class GlobalErrorHandler extends React.Component {
           <GenericError
             detailsTitle={error.message}
             detailsContent={errorStack}
-            reportCallback={SENTRY_DSN ? this.handleReportClick : null}
+            reportCallback={isSentryEnabled ? this.handleReportClick : null}
           />
         )}
       </ErrorScreen>

src/index.js

@@ -15,21 +15,24 @@ import {
 } from './local-settings'
 import { RoutingProvider } from './routing'
 import { ConsoleVisibleProvider } from './apps/Console/useConsole'
+import initializeSentryIfEnabled from './sentry'
 import { HelpScoutProvider } from './components/HelpScoutBeacon/useHelpScout'
 import { ClientBlockNumberProvider } from './components/AccountModule/useClientBlockNumber'
 
+// Initialize Sentry as early as possible, if enabled
+initializeSentryIfEnabled()
+
 const packageVersion = getPackageVersion()
 const lastPackageVersion = getLastPackageVersion()
 
 const [currentMajorVersion, currentMinorVersion] = packageVersion.split('.')
 const [lastMajorVersion, lastMinorVersion] = lastPackageVersion.split('.')
 
-// Setting a package version also clears all local storage data.
+// Purge localstorage when upgrading between different minor versions.
 if (
   lastMajorVersion !== currentMajorVersion ||
   lastMinorVersion !== currentMinorVersion
 ) {
-  // Purge localstorage when upgrading between different minor versions.
   window.localStorage.clear()
 
   // Attempt to clean up indexedDB storage as well.

src/routing.js

@@ -8,9 +8,10 @@ import React, {
   useRef,
 } from 'react'
 import { createHashHistory as createHistory } from 'history'
+import { logWithSentry } from './sentry'
 import { staticApps } from './static-apps'
 import { isAddress, isValidEnsName } from './web3-utils'
-import { addStartingSlash, log } from './utils'
+import { addStartingSlash } from './utils'
 
 export const ARAGONID_ENS_DOMAIN = 'aragonid.eth'
 
@@ -120,7 +121,7 @@ export function getPath({ mode, preferences } = {}) {
     let { orgAddress } = mode
 
     if (!orgAddress) {
-      log(
+      logWithSentry(
         "Routing(path): 'orgAddress' is a required component for 'org' mode. " +
           `Defaulted to '${fallbackPath}'.`
       )
@@ -145,7 +146,7 @@ export function getPath({ mode, preferences } = {}) {
 
     let { instancePath = '' } = mode
     if (instancePath && !instanceId) {
-      log(
+      logWithSentry(
         "Routing(path): 'instancePath' can only be provided if an " +
           `'instanceId' is provided in 'org' mode. Ignored '${instancePath}'.`
       )
@@ -157,7 +158,7 @@ export function getPath({ mode, preferences } = {}) {
     )
   }
 
-  log(
+  logWithSentry(
     `Routing(path): invalid mode '${mode.name}' set. Defaulted to '${fallbackPath}'.`
   )
 
@@ -189,7 +190,7 @@ export function parsePreferences(search = '') {
 export function getPreferencesSearch({ section, subsection, data = {} } = {}) {
   if (!section) {
     if (subsection) {
-      log(
+      logWithSentry(
         "Routing(preferences): 'subsection' can only be provided if 'section' " +
           `is provided. Ignored '${subsection}'.`
       )

src/sentry.js

@@ -0,0 +1,26 @@
+import * as Sentry from '@sentry/browser'
+import { network } from './environment'
+import { getPackageVersion, getSentryDsn } from './local-settings'
+import { log } from './utils'
+
+const packageVersion = getPackageVersion()
+const sentryDsn = getSentryDsn()
+
+export const isSentryEnabled = !!sentryDsn
+
+export function logWithSentry(message, level = 'warning') {
+  log(message)
+  if (sentryDsn) {
+    Sentry.captureMessage(message, level)
+  }
+}
+
+export default function initializeSentryIfEnabled() {
+  if (sentryDsn) {
+    Sentry.init({
+      dsn: sentryDsn,
+      release: packageVersion,
+      environment: network.shortName,
+    })
+  }
+}

src/utils.js

@@ -109,7 +109,10 @@ export function appendTrailingSlash(str) {
 }
 
 export function log(...params) {
-  if (process.env.NODE_ENV !== 'production') {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    process.env.NODE_ENV !== 'test'
+  ) {
     console.log(...params)
   }
 }