diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index 12eef6e913de6118f4ebe4df8ff90178996208a3..9e924629eaf182bc8d379abbace113144d36c431 100644 --- a/src/containers/blocks.jsx +++ b/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) +); diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index 0a360ba33720d75acf8ea0f577596b39b4df8ea4..8f203e63352c6709ec0b171071a6a38417e74e3c 100644 --- a/src/containers/costume-tab.jsx +++ b/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)) +); diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx index ab4c9062bdebc5fa1b5055919a0df50bc1c3f3a3..e39a2b6d15f99e642dde3d02bcccead248c32ebf 100644 --- a/src/containers/sound-tab.jsx +++ b/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)) +); diff --git a/src/lib/error-boundary-hoc.jsx b/src/lib/error-boundary-hoc.jsx new file mode 100644 index 0000000000000000000000000000000000000000..bdb6c8f6794b4ed60d101fa96633ad3836ed8d6b --- /dev/null +++ b/src/lib/error-boundary-hoc.jsx @@ -0,0 +1,26 @@ +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;