Add React 16 didCatch/ErrorBoundary component

2 files changed, 67 insertions, 0 deletions

diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js
new file mode 100644
index 000000000..def01c74f
--- /dev/null
+++ b/src/components/util/ErrorBoundary/index.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Button from '../../ui/Button'; 
+
+import styles from './styles';
+
+const messages = defineMessages({
+  headline: {
+    id: 'app.errorHandler.headline',
+    defaultMessage: '!!!Something went wrong.',
+  },
+  action: {
+    id: 'app.errorHandler.action',
+    defaultMessage: '!!!Reload',
+  },
+});
+
+export default @injectSheet(styles) class ErrorBoundary extends Component {
+  state = {
+    hasError: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentDidCatch(error, info) {
+    this.setState({ hasError: true });
+  }
+
+  render() {
+    const { classes } = this.props; 
+    const { intl } = this.context;
+
+    if (this.state.hasError) {
+      return (
+        <div className={classes.component}>
+          <h1 className={classes.title}>
+            {intl.formatMessage(messages.headline)}
+          </h1>
+          <Button 
+            label={intl.formatMessage(messages.action)}
+            buttonType="inverted"
+            onClick={() => location.reload()}
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/src/components/util/ErrorBoundary/styles.js b/src/components/util/ErrorBoundary/styles.js
new file mode 100644
index 000000000..8d62767f6
--- /dev/null
+++ b/src/components/util/ErrorBoundary/styles.js
@@ -0,0 +1,13 @@
+export default (theme) => ({
+  component: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  title: {
+    fontSize: 20,
+    color: theme.colorText,
+  }
+});