hasura · rikinsk-zz · Jun 17, 2019 · Jun 6, 2019 · Jun 6, 2019 · Jun 6, 2019
@@ -7,26 +7,38 @@ import {
 } from '../Services/Metadata/Actions';
 import Spinner from '../Common/Spinner/Spinner';
 
-import { Link } from 'react-router';
-import Helmet from 'react-helmet';
+import PageNotFound, { NotFoundError } from './PageNotFound';
+import RuntimeError from './RuntimeError';
 
 class ErrorBoundary extends React.Component {
+  initialState = {
+    hasError: false,
+    info: null,
+    error: null,
+    type: '500',
+  };
+
   constructor(props) {
     super(props);
 
-    this.state = { hasError: false, info: null, error: null };
+    this.state = this.initialState;
   }
 
   resetState = () => {
-    this.setState({ hasError: false, info: null, error: null });
+    this.setState({ ...this.initialState });
   };
 
   componentDidCatch(error, info) {
-    this.setState({ hasError: true, info: info, error: error });
+    const { dispatch } = this.props;
 
-    // TODO logErrorToMyService(error, info);
+    // for invalid path segment errors
+    if (error instanceof NotFoundError) {
+      this.setState({
+        type: '404',
+      });
+    }
 
-    const { dispatch } = this.props;
+    this.setState({ hasError: true, info: info, error: error });
 
     dispatch(loadInconsistentObjects(true)).then(() => {
       if (this.props.metadata.inconsistentObjects.length > 0) {
@@ -41,56 +53,22 @@ class ErrorBoundary extends React.Component {
   }
 
   render() {
-    const errorImage = require('./error-logo.png');
-    const styles = require('./ErrorPage.scss');
     const { metadata } = this.props;
+    const { hasError, type } = this.state;
 
-    if (this.state.hasError && metadata.ongoingRequest) {
+    if (hasError && metadata.ongoingRequest) {
       return (
         <div>
-          {' '}
-          <Spinner />{' '}
+          <Spinner />
         </div>
       );
     }
 
-    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="/" onClick={this.resetState}>
-                    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>
+    if (hasError) {
+      return type === '404' ? (
+        <PageNotFound resetCallback={this.resetState} />
+      ) : (
+        <RuntimeError resetCallback={this.resetState} />
       );
     }
 

@@ -5,11 +5,15 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import Helmet from 'react-helmet';
 
+export class NotFoundError extends Error {}
+
 class PageNotFound extends Component {
   render() {
     const errorImage = require('./error-logo.png');
     const styles = require('./ErrorPage.scss');
 
+    const { resetCallback } = this.props;
+
     return (
       <div className={styles.viewContainer}>
         <Helmet title="404 - Page Not Found | Hasura" />
@@ -19,7 +23,11 @@ class PageNotFound extends Component {
               <h1>404</h1>
               <br />
               <div>
-                This page doesn't exist. Head back <Link to="/">Home</Link>.
+                This page doesn't exist. Head back{' '}
+                <Link to="/" onClick={resetCallback}>
+                  Home
+                </Link>
+                .
               </div>
             </div>
             <div className="col-xs-4">
@@ -39,6 +47,7 @@ class PageNotFound extends Component {
 
 PageNotFound.propTypes = {
   dispatch: PropTypes.func.isRequired,
+  resetCallback: PropTypes.func.isRequired,
 };
 
 export default connect()(PageNotFound);
@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { Link } from 'react-router';
+import Helmet from 'react-helmet';
+
+class RuntimeError extends Component {
+  render() {
+    const errorImage = require('./error-logo.png');
+    const styles = require('./ErrorPage.scss');
+
+    const { resetCallback } = this.props;
+
+    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="/" onClick={resetCallback}>
+                  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>
+    );
+  }
+}
+
+RuntimeError.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  resetCallback: PropTypes.func.isRequired,
+};
+
+export default connect()(RuntimeError);