Better sentry logs + opt-out from tracking xhr/ui clicks/..

src/components/SelectExchange.js

@@ -106,13 +106,15 @@ class SelectExchange extends Component<
       </Text>
     ) : (
       <Fragment>
-        <Track
-          onUpdate
-          event="SelectExchange"
-          exchangeName={value && value.id}
-          fromCurrency={from.ticker}
-          toCurrency={to.ticker}
-        />
+        {exchanges ? (
+          <Track
+            onUpdate
+            event="SelectExchange"
+            exchangeName={value && value.id}
+            fromCurrency={from.ticker}
+            toCurrency={to.ticker}
+          />
+        ) : null}
         <Select
           value={value}
           options={options}

src/logger/logger.js

@@ -86,6 +86,20 @@ const logger = winston.createLogger({
   transports,
 })
 
+const captureBreadcrumb = (breadcrumb: any) => {
+  if (!process.env.STORYBOOK_ENV) {
+    try {
+      if (typeof window !== 'undefined') {
+        require('sentry/browser').captureBreadcrumb(breadcrumb)
+      } else {
+        require('sentry/node').captureBreadcrumb(breadcrumb)
+      }
+    } catch (e) {
+      logger.log('warn', "Can't captureBreadcrumb", e)
+    }
+  }
+}
+
 const logCmds = !__DEV__ || DEBUG_COMMANDS
 const logDb = !__DEV__ || DEBUG_DB
 const logRedux = !__DEV__ || DEBUG_ACTION
@@ -100,6 +114,8 @@ export default {
     pname = processShortName
   },
 
+  getProcessShortName: () => pname,
+
   onCmd: (type: string, id: string, spentTime: number, data?: any) => {
     if (logCmds) {
       switch (type) {
@@ -111,9 +127,17 @@ export default {
           break
         case 'cmd.COMPLETE':
           logger.log('info', `✔ CMD ${id} finished in ${spentTime.toFixed(0)}ms`, { type })
+          captureBreadcrumb({
+            category: 'command',
+            message: `✔ ${id}`,
+          })
           break
         case 'cmd.ERROR':
           logger.log('warn', `✖ CMD ${id} error`, { type, data })
+          captureBreadcrumb({
+            category: 'command',
+            message: `✖ ${id}`,
+          })
           break
         default:
       }
@@ -176,12 +200,19 @@ export default {
     status: number,
     responseTime: number,
   }) => {
-    const log = `✔📡  HTTP ${status} ${method} ${anonymizer.url(
-      url,
-    )} – finished in ${responseTime.toFixed(0)}ms`
+    const anonymURL = anonymizer.url(url)
+
+    const log = `✔📡  HTTP ${status} ${method} ${anonymURL} – finished in ${responseTime.toFixed(
+      0,
+    )}ms`
     if (logNetwork) {
       logger.log('info', log, { type: 'network-response' })
     }
+    captureBreadcrumb({
+      category: 'network',
+      message: 'network success',
+      data: { url: anonymURL, status, method, responseTime },
+    })
   },
 
   networkError: ({
@@ -197,12 +228,18 @@ export default {
     error: string,
     responseTime: number,
   }) => {
-    const log = `✖📡  HTTP ${status} ${method} ${anonymizer.url(
-      url,
-    )} – ${error} – failed after ${responseTime.toFixed(0)}ms`
+    const anonymURL = anonymizer.url(url)
+    const log = `✖📡  HTTP ${status} ${method} ${anonymURL} – ${error} – failed after ${responseTime.toFixed(
+      0,
+    )}ms`
     if (logNetwork) {
       logger.log('info', log, { type: 'network-error', status, method })
     }
+    captureBreadcrumb({
+      category: 'network',
+      message: 'network error',
+      data: { url: anonymURL, status, method, responseTime },
+    })
   },
 
   networkDown: ({
@@ -220,6 +257,10 @@ export default {
     if (logNetwork) {
       logger.log('info', log, { type: 'network-down' })
     }
+    captureBreadcrumb({
+      category: 'network',
+      message: 'network down',
+    })
   },
 
   analyticsStart: (id: string) => {
@@ -238,12 +279,23 @@ export default {
     if (logAnalytics) {
       logger.log('info', `△ track ${event}`, { type: 'anaytics-track', properties })
     }
+    captureBreadcrumb({
+      category: 'track',
+      message: event,
+      data: properties,
+    })
   },
 
   analyticsPage: (category: string, name: ?string, properties: ?Object) => {
+    const message = name ? `${category} ${name}` : category
     if (logAnalytics) {
-      logger.log('info', `△ page ${category} ${name || ''}`, { type: 'anaytics-page', properties })
+      logger.log('info', `△ page ${message}`, { type: 'anaytics-page', properties })
     }
+    captureBreadcrumb({
+      category: 'page',
+      message,
+      data: properties,
+    })
   },
 
   // General functions in case the hooks don't apply

src/sentry/browser.js

@@ -11,3 +11,7 @@ export default (shouldSendCallback: () => boolean) => {
 export const captureException = (e: Error) => {
   Raven.captureException(e)
 }
+
+export const captureBreadcrumb = (o: *) => {
+  Raven.captureBreadcrumb(o)
+}

src/sentry/install.js

@@ -1,4 +1,5 @@
 // @flow
+import logger from 'logger'
 import anonymizer from 'helpers/anonymizer'
 /* eslint-disable no-continue */
 
@@ -10,15 +11,28 @@ export default (Raven: any, shouldSendCallback: () => boolean, userId: string) =
     captureUnhandledRejections: true,
     allowSecretKey: true,
     release: __APP_VERSION__,
-    tags: { git_commit: __GIT_REVISION__ },
+    tags: {
+      git_commit: __GIT_REVISION__,
+    },
     environment: __DEV__ ? 'development' : 'production',
     shouldSendCallback,
+    autoBreadcrumbs: {
+      xhr: false, // it is track anonymously from logger
+      console: false, // we don't track because not anonymized
+      dom: false, // user interactions like clicks. it's too cryptic to be exploitable.
+      location: false, // we don't really need location change because we use trackpage
+      sentry: true,
+    },
+    extra: {
+      process: logger.getProcessShortName(),
+    },
     dataCallback: (data: mixed) => {
       // We are mutating the data to anonymize everything.
 
       if (typeof data !== 'object' || !data) return data
 
       delete data.server_name // hides the user machine name
+
       if (typeof data.request === 'object' && data.request) {
         const { request } = data
         if (typeof request.url === 'string') {
@@ -26,22 +40,6 @@ export default (Raven: any, shouldSendCallback: () => boolean, userId: string) =
         }
       }
 
-      if (data.breadcrumbs && typeof data.breadcrumbs === 'object') {
-        const { breadcrumbs } = data
-        if (Array.isArray(breadcrumbs.values)) {
-          const { values } = breadcrumbs
-          for (const b of values) {
-            if (!b || typeof b !== 'object') continue
-            if (b.category === 'xhr' && b.data && typeof b.data === 'object') {
-              const { data } = b
-              if (typeof data.url === 'string') {
-                data.url = anonymizer.url(data.url)
-              }
-            }
-          }
-        }
-      }
-
       anonymizer.filepathRecursiveReplacer(data)
 
       console.log('Sentry=>', data) // eslint-disable-line

src/sentry/node.js

@@ -10,3 +10,7 @@ export default (shouldSendCallback: () => boolean, userId: string) => {
 export const captureException = (e: Error) => {
   Raven.captureException(e)
 }
+
+export const captureBreadcrumb = (o: *) => {
+  Raven.captureBreadcrumb(o)
+}