Add error boundaries to the three tabs to get more info ab out errors

src/containers/blocks.jsx

@@ -12,6 +12,7 @@ import Prompt from './prompt.jsx';
 import BlocksComponent from '../components/blocks/blocks.jsx';
 import ExtensionLibrary from './extension-library.jsx';
 import CustomProcedures from './custom-procedures.jsx';
+import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 
 import {connect} from 'react-redux';
 import {updateToolbox} from '../reducers/toolbox';
@@ -415,7 +416,9 @@ const mapDispatchToProps = dispatch => ({
     }
 });
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(Blocks);
+export default errorBoundaryHOC('Blocks')(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(Blocks)
+);

src/containers/costume-tab.jsx

@@ -11,6 +11,7 @@ import BackdropLibrary from './backdrop-library.jsx';
 import CameraModal from './camera-modal.jsx';
 import {connect} from 'react-redux';
 import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
+import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 
 import {
     closeCameraCapture,
@@ -367,7 +368,9 @@ const mapDispatchToProps = dispatch => ({
     }
 });
 
-export default injectIntl(connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(CostumeTab));
+export default errorBoundaryHOC('Costume Tab')(
+    injectIntl(connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(CostumeTab))
+);

src/containers/sound-tab.jsx

@@ -17,6 +17,7 @@ import SoundLibrary from './sound-library.jsx';
 
 import soundLibraryContent from '../lib/libraries/sounds.json';
 import {handleFileUpload, soundUpload} from '../lib/file-uploader.js';
+import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 
 import {connect} from 'react-redux';
 
@@ -260,7 +261,9 @@ const mapDispatchToProps = dispatch => ({
     }
 });
 
-export default injectIntl(connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(SoundTab));
+export default errorBoundaryHOC('Sound Tab')(
+    injectIntl(connect(
+        mapStateToProps,
+        mapDispatchToProps
+    )(SoundTab))
+);

src/lib/error-boundary-hoc.jsx

+import React from 'react';
+import ErrorBoundary from '../containers/error-boundary.jsx';
+
+/*
+ * Higher Order Component to provide error boundary for wrapped component.
+ * A curried function, call like errorHOC(<tracking label>)(<Component>).
+ * @param {string} action - Label for GA tracking of errors.
+ * @returns {function} a function that accepts a component to wrap.
+ */
+const ErrorBoundaryHOC = function (action){
+    /**
+     * The function to be called with a React component to wrap it.
+     * @param {React.Component} WrappedComponent - Component to wrap with an error boundary.
+     * @returns {React.Component} the component wrapped with an error boundary.
+     */
+    return function (WrappedComponent) {
+        const ErrorBoundaryWrapper = props => (
+            <ErrorBoundary action={action}>
+                <WrappedComponent {...props} />
+            </ErrorBoundary>
+        );
+        return ErrorBoundaryWrapper;
+    };
+};
+
+export default ErrorBoundaryHOC;