Added error boundaries to CodeEditor and layout component

src/components/CodeEditor/CodeEditor.js

@@ -17,6 +17,7 @@ import Remarkable from 'remarkable';
 import {LiveProvider, LiveEditor} from '@gaearon/react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
+import ErrorBoundary from '../ErrorBoundary';
 
 const compile = code =>
   Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
@@ -285,4 +286,4 @@ class CodeEditor extends Component {
   };
 }
 
-export default CodeEditor;
+export default ErrorBoundary(CodeEditor);

src/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import React, {Component} from 'react';
+
+function ErrorBoundary(WrappedComponent) {
+    return class extends Component{
+        constructor(props, context) {
+            super(props, context);
+
+            this.state = {
+                error: null,
+            };
+        }
+
+        componentDidCatch(error) {
+            this.setState({ error });
+        }
+
+        render() {
+            console.log(this.state);
+            if (this.state.error) {
+                alert('Error, try to whitelist the site in AdBlocker/Cookie Whitelist');
+                return;
+            }
+            return <WrappedComponent {...this.props} />;
+        }
+    }
+}
+
+export default ErrorBoundary;

src/components/ErrorBoundary/index.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+import ErrorBoundary from './ErrorBoundary';
+
+export default ErrorBoundary;

src/layouts/index.js

@@ -25,6 +25,7 @@ import '../prism-styles';
 import 'glamor/reset';
 import 'css/reset.css';
 import 'css/algolia.css';
+import ErrorBoundary from '../components/ErrorBoundary';
 
 class Template extends Component {
   componentDidMount() {
@@ -82,4 +83,4 @@ class Template extends Component {
   }
 }
 
-export default Template;
+export default ErrorBoundary(Template);