feat(sentry): Add sentry logging and stun server fallback (#24)

package.json

@@ -29,6 +29,7 @@
     "peerjs": "^0.3.14",
     "prop-types": "^15.6.0",
     "query-string": "^5.0.1",
+    "raven-js": "^3.25.1",
     "react": "^16.2.0",
     "react-bootstrap": "^0.32.1",
     "react-dom": "^16.2.0",

src/client/config/index.js

@@ -8,7 +8,24 @@ const config = {
   localStorage: {
     gumConstraints: 'gum',
     auth: 'auth',
-    code: 'code'
+    code: 'code',
+    ice: 'ice'
+  },
+  analytics: {
+    google: {
+      propertyId: 'UA-117106220-2'
+    }
+  },
+  log: {
+    sentry: {
+      enabled: true,
+      dsn: 'https://e49bb58cac3e47a6b80f1619d8a20391@sentry.io/1205381',
+      captureUnhandledRejections: true,
+      autoBreadcrumbs: true,
+      tags: {
+        component: 'talktome-client'
+      }
+    }
   },
   inviteUrl: 'https://goo.gl/forms/gd3nPeuDWbhghGzY2'
 }

src/client/config/stun.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // https://gist.github.com/mondain/b0ec1cf5f60ae726202e
 const stunServers = [
   'stun:stun.l.google.com:19302',

src/client/redux/sagas/peer.js

@@ -5,10 +5,21 @@ import { forEach, filter, keys } from 'lodash'
 import Peer from 'simple-peer'
 import { store } from '../../index'
 import config from '../../config'
+import { setLocalStorage, getLocalStorage, getUserInfo } from '../../utils/window'
 
 // Peer event handlers
 const peerEventError = (err) => {
-  console.error('Peer event error', err)
+  console.error('Peer event error', err.code, err)
+  window.captureBreadcrumb(getUserInfo())
+  window.captureException(err)
+  if (err.code === 'ERR_ICE_CONNECTION_FAILURE') {
+    const currentIce = getLocalStorage(config.localStorage.ice)
+    setLocalStorage(config.localStorage.ice, {
+      code: err.code,
+      error: err,
+      stunServerKey: currentIce.stunServerKey
+    })
+  }
 }
 
 const peerEventSignal = ({
@@ -52,10 +63,26 @@ const createPeer = ({
 }) => {
   return new Promise((resolve, reject) => {
     const isInitiator = socket.id === initiator
+    const stunServerKeys = ['primary', 'secondary', 'ternary']
+    const localIce = getLocalStorage(config.localStorage.ice)
+    let iceServers
+    if (localIce && localIce.error && localIce.stunServerKey) {
+      console.info('encountered error with ice server previously')
+      const currentIndex = stunServerKeys.indexOf(localIce.stunServerKey)
+      if (currentIndex && currentIndex < stunServerKeys.length - 1) {
+        const newIceKey = stunServerKeys[currentIndex] + 1
+        console.info(`using ${newIceKey} stun`)
+        iceServers = config.stunServers[newIceKey]
+      }
+    } else {
+      console.info('using primary stun')
+      setLocalStorage(config.localStorage.ice, { stunServerKey: 'primary' })
+      iceServers = config.stunServers.primary
+    }
     const peer = new Peer({
       initiator: isInitiator,
       config: {
-        iceServers: config.stunServers.primary
+        iceServers
       },
       // Allow the peer to receive video, even if it's not sending stream:
       // https://github.com/feross/simple-peer/issues/95

src/client/store.js

@@ -7,7 +7,9 @@ import reducers from './redux/ducks/reducers'
 import sagas from './redux/sagas'
 
 export default function configureStore (history) {
-  const sagaMiddleware = createSagaMiddleware()
+  const sagaMiddleware = createSagaMiddleware({
+    onError: window.captureException
+  })
   let middleware = applyMiddleware(
     sagaMiddleware,
     routerMiddleware(history),

src/client/analytics.js → src/client/third-party/google/analytics.js

@@ -1,8 +1,10 @@
+import config from '../../config'
+
 const analytics = () => {
   window.dataLayer = window.dataLayer || []
   function gtag () { window.dataLayer.push(arguments) }
   gtag('js', new Date())
-  gtag('config', 'UA-117106220-2')
+  gtag('config', config.analytics.google.propertyId)
 }
 
 export default analytics

src/client/third-party/sentry/index.js

@@ -0,0 +1,38 @@
+// https://sentry.io
+import config from '../../config'
+import raven from 'raven-js'
+
+const sentryConfig = config.log.sentry
+const sentry = () => {
+  if (sentryConfig.enabled) {
+    console.log('Sentry is enabled')
+    raven.config(sentryConfig.dsn, {
+      environment: process.env.NODE_ENV || 'development',
+      release: process.env.APP_VERSION,
+      captureUnhandledRejections: sentryConfig.captureUnhandledRejections,
+      autoBreadcrumbs: sentryConfig.autoBreadcrumbs,
+      tags: sentryConfig.tags
+    }).install()
+
+    // Global sentry handlers
+    window.captureException = (err, context) => {
+      if (context) {
+        raven.captureException(err, { extra: context })
+      } else {
+        raven.captureException(err)
+      }
+    }
+    window.captureBreadcrumb = breadcrumb => {
+      raven.captureBreadcrumb(breadcrumb)
+    }
+    window.captureMessage = (message, options) => {
+      raven.captureMessage(message, options)
+    }
+  } else {
+    console.log('Sentry is disabled')
+    window.captureException = err => {}
+    window.captureBreadcrumb = breadcrumb => {}
+    window.captureMessage = (message, options) => {}
+  }
+}
+export default sentry

src/client/ui-components/emoji/index.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Emoji = ({ emoji, label }) => (
+  <span
+    role='img'
+    aria-label={label}
+  >
+    {emoji}
+  </span>
+)
+
+Emoji.propTypes = {
+  emoji: PropTypes.any,
+  label: PropTypes.string
+}
+
+export default Emoji

src/client/ui-components/soundcheck/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import ToggleButton from '../toggle-button'
 import { Row, Col, FormControl, FormGroup, Button } from 'react-bootstrap'
+import Emoji from '../emoji'
 import { map, filter, values } from 'lodash'
 import { setLocalStorage } from '../../utils/window'
 import config from '../../config'
@@ -11,7 +12,6 @@ const getDevices = (devices, kind) => filter(devices, (device, deviceId) => devi
 const getVideoInputDevices = devices => getDevices(devices, 'videoinput')
 const getAudioInputDevices = devices => getDevices(devices, 'audioinput')
 const getAudioOutputDevices = devices => getDevices(devices, 'audiooutput')
-const Emoji = ({ emoji, label }) => <span role='img' aria-label={label}>{emoji}</span>
 
 class Soundcheck extends Component {
   constructor (props) {

src/client/utils/window.js

@@ -15,3 +15,15 @@ export const goToUrl = (path, title) => {
   window.location.replace(path)
 }
 export const reload = () => window.location.reload()
+export const getUserInfo = () => ({
+  screen: {
+    width: window.screen ? window.screen.width : null,
+    height: window.screen ? window.screen.height : null
+  },
+  winSize: {
+    innerWidth: window.innerWidth,
+    innerHeight: window.innerHeight
+  },
+  platform: navigator.platform || navigator.oscpu,
+  href: window.location.href
+})

src/client/views/home/index.js

@@ -7,7 +7,8 @@ import { connect } from 'react-redux'
 import Logo from '../../ui-components/logo'
 import { injectGlobal } from 'styled-components'
 import { getThemeCSS } from '../../utils/theme'
-import analytics from '../../analytics'
+import analytics from '../../third-party/google/analytics'
+import sentry from '../../third-party/sentry'
 import './index.css'
 // eslint-disable-next-line
 injectGlobal`
@@ -21,7 +22,9 @@ body {
 
 class Home extends Component {
   componentWillMount () {
+    // load third-party services
     analytics()
+    sentry()
     if (this.props.isAuthValid) {
       goToUrl('/welcome')
     }

src/client/views/welcome/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import JoinOrCreateRoom from '../../ui-components/join-or-create-room'
 import { Row, Col, Grid, Jumbotron } from 'react-bootstrap'
+import Emoji from '../../ui-components/emoji'
 import { getNextUrl } from '../../utils/window'
 import { parseRoomIdFromNextUrl } from '../../utils/room'
 import './index.css'
@@ -14,30 +15,30 @@ class Welcome extends Component {
         <Jumbotron className='welcome'>
           <Row>
             <Col md={7}>
-              <h2>Hello internet-loving-friend! 🙌🏽 </h2>
+              <h2>Hello internet-loving-friend! <Emoji emoji={'🙌🏽'} label='wohoo' /></h2>
               <p>
-              Welcome to Talk to Me. I built this application using the latest technologies,
-              to provide an easy means of communication (audio and video) for the unhappy. 
-              Yes. I'm referring to you. I'm referring to those who can't use VoIP applications 
-              such as Skype or WhatsApp Video. Those who suffer constant connection problems while 
-              using hangouts or webex.
+                Welcome to Talk to Me. I built this application using the latest technologies,
+                to provide an easy means of communication (audio and video) for the unhappy.
+                Yes. I'm referring to you. I'm referring to those who can't use VoIP applications
+                such as Skype or WhatsApp Video. Those who suffer constant connection problems while
+                using hangouts or webex.
               </p>
               <p>
-              This application won't solve all your problems but I hope it will make it your life easier and 
-              maybe a little bit happier.
+                This application won't solve all your problems but I hope it will make it your life easier and
+                maybe a little bit happier.
               </p>
               <p>
-              There are a few rules though.
+                There are a few rules though.
               </p>
               <div>
-              <ol>
-                <li> You don't talk about it. (Just like Fight Club) 🤐
-                  <br />- The moment something good exists out there, evil corporations want to shut it down. So please keep the chatter to a minimum. The less people know about it, the better. But if you know people that you trust who are cool, then feel free to share your invite code with them.
-                </li>
-                <li> Feedback. ✍️
-                 <br />- If you like it, let me know. If you hate it, let me know. If you want something improved, let me know. Let's aim to improve
-                </li>
-              </ol>
+                <ol>
+                  <li> You don't talk about it. (Just like Fight Club) <Emoji emoji={'🤐'} label='no-speak' />
+                    <br />- The moment something good exists out there, evil corporations want to shut it down. So please keep the chatter to a minimum. The less people know about it, the better. But if you know people that you trust who are cool, then feel free to share your invite code with them.
+                  </li>
+                  <li> Feedback. <Emoji emoji={'✍️'} label='write' />
+                  <br />- If you like it, let me know. If you hate it, let me know. If you want something improved, let me know. Let's aim to improve
+                  </li>
+                </ol>
               </div>
               <br />
               <p>

yarn.lock

@@ -7120,6 +7120,10 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
+raven-js@^3.25.1:
+  version "3.25.1"
+  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.25.1.tgz#05df39b41af140e3b2fa34e2c522e2b4f99a98be"
+
 raw-body@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.2.0.tgz#994976cf6a5096a41162840492f0bdc5d6e7fb96"