From f5871056454a50304bb498fd1a3ea21244a935f9 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 3 May 2018 10:25:52 -0400
Subject: [PATCH] Add error boundaries to the three tabs to get more info ab
out errors
---
src/containers/blocks.jsx | 11 +++++++----
src/containers/costume-tab.jsx | 11 +++++++----
src/containers/sound-tab.jsx | 11 +++++++----
src/lib/error-boundary-hoc.jsx | 26 ++++++++++++++++++++++++++
4 files changed, 47 insertions(+), 12 deletions(-)
create mode 100644 src/lib/error-boundary-hoc.jsx
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index 12eef6e91..9e924629e 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 0a360ba33..8f203e633 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 ab4c9062b..e39a2b6d1 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 000000000..bdb6c8f67
--- /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;
--
GitLab