Add a widget to present errors nicely.

src/components/ErrorBoundary.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import PrettyError from '../widgets/PrettyError';
+
 class ErrorBoundary extends React.Component {
   state: {
     error?: Error;
@@ -17,17 +19,7 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.error) {
       return (
-        <div>
+        <PrettyError error={this.state.error} />
-          <h2>Something went wrong!</h2>
-          <pre>
-            {this.state.error.message}
-          </pre>
-
-          <h3>Stack trace:</h3>
-          <pre>
-            {this.state.error.stack}
-          </pre>
-        </div>
       );
     }
     return this.props.children;

src/widgets/PrettyError.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { pure } from 'recompose';
+
+export const PrettyError = pure((props: any) => (
+  <div>
+    <h2>Something went wrong!</h2>
+    <pre>
+      {props.error.message}
+    </pre>
+
+    <h3>Stack trace:</h3>
+    <pre>
+      {props.error.stack}
+    </pre>
+  </div>
+));
+
+export default PrettyError;