🔥

src/routes/error/ErrorPage.css

@@ -0,0 +1,47 @@
+* {
+  line-height: 1.2;
+  margin: 0;
+}
+
+html {
+  color: #888;
+  display: table;
+  font-family: sans-serif;
+  height: 100%;
+  text-align: center;
+  width: 100%;
+}
+
+body {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 2em;
+}
+
+h1 {
+  color: #555;
+  font-size: 2em;
+  font-weight: 400;
+}
+
+p {
+  margin: 0 auto;
+  width: 280px;
+}
+
+pre {
+  text-align: left;
+  margin-top: 2rem;
+}
+
+@media only screen and (max-width: 280px) {
+  body,
+  p {
+    width: 95%;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    margin: 0 0 0.3em;
+  }
+}

src/routes/error/ErrorPage.js

@@ -0,0 +1,32 @@
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './ErrorPage.css';
+
+class ErrorPage extends React.Component {
+  static propTypes = {
+    error: PropTypes.object.isRequired,
+  };
+
+  render() {
+    if (process.env.NODE_ENV !== 'production') {
+      const { error } = this.props;
+      return (
+        <div>
+          <h1>{error.name}</h1>
+          <p>{error.message}</p>
+          <pre>{error.stack}</pre>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <h1>Error</h1>
+        <p>Sorry, a critical error occurred on this page.</p>
+      </div>
+    );
+  }
+}
+
+export { ErrorPage as ErrorPageWithoutStyle };
+export default withStyles(s)(ErrorPage);

src/routes/error/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ErrorPage from './ErrorPage';
+
+export default {
+
+  path: '/error',
+
+  action({ error }) {
+    return {
+      title: error.name,
+      description: error.message,
+      component: <ErrorPage error={error} />,
+      status: error.status || 500,
+    };
+  },
+
+};