Merge pull request #1947 from paulkaplan/fix-ie-errors

Move ErrorBoundary back into the app, fix IE error boundary

src/containers/error-boundary.jsx

@@ -15,6 +15,11 @@ class ErrorBoundary extends React.Component {
     }
 
     componentDidCatch (error, info) {
+        // Error object may be undefined (IE?)
+        error = error || {
+            stack: 'Unknown stack',
+            message: 'Unknown error'
+        };
         // Display fallback UI
         this.setState({hasError: true});
         log.error(`Unhandled Error: ${error.stack}\nComponent stack: ${info.componentStack}`);

src/containers/preview-modal.jsx

@@ -36,7 +36,14 @@ class PreviewModal extends React.Component {
         this.props.onViewProject();
     }
     supportedBrowser () {
-        return !['IE', 'Opera', 'Opera Mini', 'Silk', 'Vivaldi'].includes(platform.name);
+        if (
+            platform.name === 'IE' ||
+            platform.name === 'Opera' ||
+            platform.name === 'Opera Mini' ||
+            platform.name === 'Silk') {
+            return false;
+        }
+        return true;
     }
     render () {
         return (this.supportedBrowser() ?

src/lib/app-state-hoc.jsx

@@ -9,6 +9,7 @@ import {IntlProvider, updateIntl} from 'react-intl-redux';
 import {intlInitialState} from '../reducers/intl.js';
 import {initialState as modeInitialState, setPlayer, setFullScreen} from '../reducers/mode.js';
 import reducer from '../reducers/gui';
+import ErrorBoundary from '../containers/error-boundary.jsx';
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const enhancer = composeEnhancers(
@@ -70,7 +71,9 @@ const AppStateHOC = function (WrappedComponent) {
             return (
                 <Provider store={this.store}>
                     <IntlProvider>
-                        <WrappedComponent {...this.props} />
+                        <ErrorBoundary>
+                            <WrappedComponent {...this.props} />
+                        </ErrorBoundary>
                     </IntlProvider>
                 </Provider>
             );

src/playground/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
- * @param {React.Component} WrappedComponent - component to provide state for
- * @returns {React.Component} component with error boundary
- */
-const ErrorBoundaryHOC = function (WrappedComponent) {
-    const ErrorBoundaryWrapper = props => (
-        <ErrorBoundary>
-            <WrappedComponent {...props} />
-        </ErrorBoundary>
-    );
-    return ErrorBoundaryWrapper;
-};
-
-export default ErrorBoundaryHOC;

src/playground/index.jsx

@@ -5,7 +5,6 @@ import Modal from 'react-modal';
 
 import analytics from '../lib/analytics';
 import GUI from '../containers/gui.jsx';
-import ErrorBoundaryHOC from './error-boundary-hoc.jsx';
 
 import styles from './index.css';
 
@@ -17,12 +16,10 @@ if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
 // Register "base" page view
 analytics.pageview('/');
 
-const App = ErrorBoundaryHOC(GUI);
-
 const appTarget = document.createElement('div');
 appTarget.className = styles.app;
 document.body.appendChild(appTarget);
 
 Modal.setAppElement(appTarget);
 
-ReactDOM.render(<App />, appTarget);
+ReactDOM.render(<GUI />, appTarget);

src/playground/player.jsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 
 import Box from '../components/box/box.jsx';
 import GUI from '../containers/gui.jsx';
-import ErrorBoundaryHOC from './error-boundary-hoc.jsx';
 
 if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
     // Warn before navigating away
@@ -20,9 +19,7 @@ const Player = () => (
     </Box>
 );
 
-const App = ErrorBoundaryHOC(Player);
-
 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);
 
-ReactDOM.render(<App />, appTarget);
+ReactDOM.render(<Player />, appTarget);