Bugsnag integration

src/js/components/Bubble.js

@@ -137,7 +137,7 @@ class Bubble extends Component {
       return <Spinner />
     }
 
-    const { service, settings, browser } = this.props;
+    const { service, settings, browser } = this.props
 
     return (
       <div className="moco-bx-bubble" onClick={this.open}>

src/js/content.js

@@ -4,6 +4,7 @@ import Bubble from './components/Bubble'
 import { createMatcher, createEnhancer } from 'utils/urlMatcher'
 import remoteServices from './remoteServices'
 import { pipe } from 'lodash/fp'
+import { ErrorBoundary } from 'utils/notifier'
 import '../css/content.scss'
 
 const matcher = createMatcher(remoteServices)
@@ -38,7 +39,9 @@ const mountBubble = (settings) => {
   }
 
   ReactDOM.render(
-    <Bubble service={service} settings={settings} browser={chrome} />,
+    <ErrorBoundary>
+      <Bubble service={service} settings={settings} browser={chrome} />
+    </ErrorBoundary>,
     document.getElementById('moco-bx-root')
   )
 }

src/js/options.js

@@ -1,7 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import Options from './components/Options'
+import { ErrorBoundary } from 'utils/notifier'
 import '../css/options.scss'
 
 const domContainer = document.querySelector('#moco-bx-root')
-ReactDOM.render(<Options />, domContainer)
+ReactDOM.render(
+  <ErrorBoundary>
+    <Options />
+  </ErrorBoundary>,
+  domContainer
+)

src/js/popup.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import App from './components/App'
 import queryString from 'query-string'
 import { parseProps } from 'utils'
+import { ErrorBoundary } from 'utils/notifier'
 import '../css/popup.scss'
 
 const parsedProps = parseProps(['service', 'settings'])(
@@ -10,9 +11,11 @@ const parsedProps = parseProps(['service', 'settings'])(
 )
 
 ReactDOM.render(
-  <App
-    {...parsedProps}
-    browser={chrome}
-  />,
+  <ErrorBoundary>
+    <App
+      {...parsedProps}
+      browser={chrome}
+    />
+  </ErrorBoundary>,
   document.querySelector('#moco-bx-root')
 )

src/js/utils/notifier.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import bugsnag from '@bugsnag/js'
+import bugsnagReact from '@bugsnag/plugin-react'
+
+const { version: appVersion } = chrome.runtime.getManifest()
+
+const bugsnagClient = bugsnag({ apiKey: 'da6caac4af70af3e4683454b40fe5ef5', appVersion })
+bugsnagClient.use(bugsnagReact, React)
+
+const ErrorBoundary = bugsnagClient.getPlugin('react')
+
+export default bugsnagClient
+export { ErrorBoundary }