Merge pull request #16845 from Bouncey/feat/opBeat

feat(opbeat): Enable opbeat-react for frontend performance tracking

client/index.js

@@ -1,3 +1,5 @@
+import initOpbeat from 'opbeat-react';
+import { createOpbeatMiddleware } from 'opbeat-react/redux';
 import Rx from 'rx';
 import debug from 'debug';
 import { render } from 'redux-epic';
@@ -17,6 +19,24 @@ import {
   saveToColdStorage
 } from './cold-reload';
 
+const {
+  __OPBEAT__ORG_ID,
+  __OPBEAT__APP_ID,
+  NODE_ENV
+} = process.env;
+
+const enableOpbeat = NODE_ENV !== 'development';
+
+if (enableOpbeat) {
+  if (!__OPBEAT__ORG_ID || !__OPBEAT__APP_ID) {
+    console.error('OpBeat credentials not found in .env');
+  }
+  initOpbeat({
+    orgId: __OPBEAT__ORG_ID,
+    appId: __OPBEAT__APP_ID
+  });
+}
+
 const isDev = Rx.config.longStackSupport = debug.enabled('fcc:*');
 const log = debug('fcc:client');
 const hotReloadTimeout = 2000;
@@ -41,6 +61,7 @@ const epicOptions = {
   history: _history
 };
 
+
 const DOMContainer = document.getElementById('fcc');
 const defaultState = isColdStored() ?
   getColdStorage() :
@@ -64,7 +85,8 @@ createApp({
     defaultState,
     epics,
     epicOptions,
-    enhancers: isDev && devToolsExtension && [ devToolsExtension() ]
+    enhancers: isDev && devToolsExtension && [ devToolsExtension() ],
+    middlewares: enableOpbeat && [ createOpbeatMiddleware() ]
   })
   .doOnNext(({ store }) => {
     if (module.hot && typeof module.hot.accept === 'function') {