hasura · rikinsk-zz · Apr 3, 2019 · Feb 21, 2019 · Feb 22, 2019 · Feb 22, 2019
@@ -9,7 +9,7 @@ import './progress-bar.scss';
 import { NOTIF_EXPANDED } from './Actions';
 import AceEditor from 'react-ace';
 import 'brace/mode/json';
-import ErrorBoundary from './ErrorBoundary';
+import ErrorBoundary from '../Error/ErrorBoundary';
 import { telemetryNotificationShown } from '../../telemetry/Actions';
 import { showTelemetryNotification } from '../../telemetry/Notifications';
 

@@ -2,7 +2,7 @@
   padding: 0;
 }
 
-.viewcontainer {
+.viewContainer {
   height: 100vh;
   width: 100vw;
   display: table;

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Link } from 'react-router';
+import Helmet from 'react-helmet';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, info: null, error: null };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({ hasError: true, info: info, error: error });
+    // TODO logErrorToMyService(error, info);
+  }
+
+  render() {
+    const errorImage = require('./error-logo.png');
+    const styles = require('./ErrorPage.scss');
+
+    if (this.state.hasError) {
+      return (
+        <div className={styles.viewContainer}>
+          <Helmet title="Error | Hasura" />
+          <div className={'container ' + styles.centerContent}>
+            <div className={'row ' + styles.message}>
+              <div className="col-xs-8">
+                <h1>Error</h1>
+                <br />
+                <div>
+                  Something went wrong. Head back <Link to="/">Home</Link>.
+                </div>
+                <br />
+                <div>
+                  You can report this issue on our <a href="https://github.com/hasura/graphql-engine/issues">Github</a> or chat with us on <a href="http://discord.gg/hasura">Discord</a>
+                </div>
+              </div>
+              <div className="col-xs-4">
+                <img
+                  src={errorImage}
+                  className="img-responsive"
+                  name="hasura"
+                  title="Something went wrong!"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.element,
+};
+
+export default ErrorBoundary;
@@ -0,0 +1,47 @@
+.container {
+  padding: 0;
+}
+
+.viewContainer {
+  height: 100vh;
+  width: 100vw;
+  display: table;
+
+  .centerContent{
+    display: table-cell;
+    vertical-align: middle;
+
+    .message {
+      padding: 50px 20%;
+    }
+
+    .message h1 {
+      font-size: 54px;
+      font-weight: bold;
+    }
+
+    .message p {
+      margin-left: 15px;
+    }
+
+    .message p > a {
+      font-weight: bold;
+    }
+  }
+}
+
+.header {
+  background: #eee;
+
+  h2 {
+    margin: 0;
+    padding: 26px;
+    float: left;
+    line-height: 26px;
+  }
+
+  .nav {
+    padding: 20px;
+    float: left;
+  }
+}
@@ -7,21 +7,24 @@ import Helmet from 'react-helmet';
 
 class PageNotFound extends Component {
   render() {
-    const lostImage = require('./404-logo.png');
-    const styles = require('./PageNotFound.scss');
+    const errorImage = require('./error-logo.png');
+    const styles = require('./ErrorPage.scss');
 
     return (
-      <div className={styles.viewcontainer}>
+      <div className={styles.viewContainer}>
         <Helmet title="404 - Page Not Found | Hasura" />
         <div className={'container ' + styles.centerContent}>
           <div className={'row ' + styles.message}>
             <div className="col-xs-8">
               <h1>404</h1>
-              This page doesn't exist. Head back <Link to="/">Home</Link>.
+              <br />
+              <div>
+                This page doesn't exist. Head back <Link to="/">Home</Link>.
+              </div>
             </div>
             <div className="col-xs-4">
               <img
-                src={lostImage}
+                src={errorImage}
                 className="img-responsive"
                 name="hasura"
                 title="We think you are lost!"

@@ -4,5 +4,5 @@
 
 export App from './App/App';
 export Main from './Main/Main';
-export PageNotFound from './404/PageNotFound';
+export PageNotFound from './Error/PageNotFound';
 export Login from './Login/Login';