Error pages

clients/admin_next/src/views/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import BlankSlate from "../components/BlankSlate";
+
+declare var Rollbar: any;
+
+class ErrorBoundary extends React.Component {
+  state = {
+    hasError: false
+  }
+
+  componentDidCatch(error: Error) {
+    debugger
+    this.setState({ hasError: true });
+    Rollbar.error(error);
+  }
+
+  renderError = () => (
+    <BlankSlate>
+      <h3>Ooops! something went wrong.</h3>
+      <p>We've been notified and are working on a fix.</p>
+    </BlankSlate>
+  )
+
+  render() {
+    if(this.state.hasError) {
+      return this.renderError();
+    } else {
+      return this.props.children;
+    }
+  }
+}
+
+export default ErrorBoundary;

clients/admin_next/src/views/NotFound.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import BlankSlate from "../components/BlankSlate";
+
+class NotFound extends React.Component {
+  render() {
+    return(
+      <BlankSlate>
+        <h3>There's nothing here!</h3>
+        <p>Please make sure the url is correct.</p>
+      </BlankSlate>
+    )
+  }
+}
+
+export default NotFound;

clients/admin_next/src/views/routes.tsx

@@ -4,37 +4,44 @@ import { Switch, Route } from "react-router-dom";
 import Home from "./Home";
 import User from "./User";
 import Settings from "./Settings";
-import App from "./App";
 import {TeamList, TeamShow, TeamNew } from "./Teams";
 import { DivisionList, DivisionShow, DivisionSeed, DivisionEdit, DivisionNew } from "./Divisions";
 import Fields from "./Fields";
 import Schedule from "./Schedule";
 import { GameList, GameShow } from "./Games";
+import App from "./App";
+
+import NotFound from "./NotFound";
+import ErrorBoundary from "./ErrorBoundary";
 
 const Routes = () => (
-  <Switch>
-    <Route exact path="/" component={Home}/>
+  <ErrorBoundary>
+    <Switch>
+      <Route exact path="/" component={Home}/>
+
+      <Route path="/user" component={User}/>
+      <Route path="/settings" component={Settings}/>
 
-    <Route path="/user" component={User}/>
-    <Route path="/settings" component={Settings}/>
-    <Route path="/app" component={App}/>
+      <Route exact path="/teams" component={TeamList}/>
+      <Route path="/teams/new" component={TeamNew}/>
+      <Route path="/teams/:teamId" component={TeamShow}/>
 
-    <Route exact path="/teams" component={TeamList}/>
-    <Route path="/teams/new" component={TeamNew}/>
-    <Route path="/teams/:teamId" component={TeamShow}/>
+      <Route exact path="/divisions" component={DivisionList}/>
+      <Route path="/divisions/new" component={DivisionNew}/>
+      <Route path="/divisions/:divisionId/seed" component={DivisionSeed}/>
+      <Route path="/divisions/:divisionId/edit" component={DivisionEdit}/>
+      <Route path="/divisions/:divisionId" component={DivisionShow}/>
 
-    <Route exact path="/divisions" component={DivisionList}/>
-    <Route path="/divisions/new" component={DivisionNew}/>
-    <Route path="/divisions/:divisionId/seed" component={DivisionSeed}/>
-    <Route path="/divisions/:divisionId/edit" component={DivisionEdit}/>
-    <Route path="/divisions/:divisionId" component={DivisionShow}/>
+      <Route path="/fields" component={Fields}/>
+      <Route path="/schedule" component={Schedule}/>
 
-    <Route path="/fields" component={Fields}/>
-    <Route path="/schedule" component={Schedule}/>
+      <Route exact path="/games" component={GameList}/>
+      <Route path="/games/:gameId" component={GameShow}/>
+      <Route path="/app" component={App}/>
 
-    <Route exact path="/games" component={GameList}/>
-    <Route path="/games/:gameId" component={GameShow}/>
-  </Switch>
+      <Route component={NotFound}/>
+    </Switch>
+  </ErrorBoundary>
 );
 
 export default Routes;