From b0cae39814409572cda6d21c17ac111d28ee6720 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sat, 30 Dec 2017 15:42:49 +0000
Subject: [PATCH] Add a widget to present errors nicely.

---
 src/components/ErrorBoundary.tsx | 14 +++-----------
 src/widgets/PrettyError.tsx      | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 11 deletions(-)
 create mode 100644 src/widgets/PrettyError.tsx

diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index e13ebe5..a37ca93 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/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>
-          <h2>Something went wrong!</h2>
-          <pre>
-            {this.state.error.message}
-          </pre>
-
-          <h3>Stack trace:</h3>
-          <pre>
-            {this.state.error.stack}
-          </pre>
-        </div>
+        <PrettyError error={this.state.error} />
       );
     }
     return this.props.children;
diff --git a/src/widgets/PrettyError.tsx b/src/widgets/PrettyError.tsx
new file mode 100644
index 0000000..c62ccc0
--- /dev/null
+++ b/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;