Merge pull request #87 from flexpool/improvement/error-page

Error view, hide stack trace
flexpool · Apr 15, 2021 · 23150a9 · 23150a9
2 parents d3370c7 + 0451bd7
commit 23150a9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/components/layout/Page.tsx b/src/components/layout/Page.tsx
@@ -1,9 +1,20 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { clx } from 'src/utils/clx';
-import styled from 'styled-components';
 import './Page.scss';
 
+import styled from 'styled-components/macro';
+
+const ErrorContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 3rem;
+  margin: auto;
+  min-height: 70vh;
+`;
+
 type ErrorBoundaryProps = {
   children: React.ReactNode;
 };
@@ -36,12 +47,13 @@ class ErrorBoundary extends React.Component<
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
+      console.error('Error', this.state.error);
+      console.error('Error Info', this.state.errorInfo);
       return (
-        <div>
+        <ErrorContainer>
           <h1>Something went wrong.</h1>
-          {JSON.stringify(this.state.error)}
-          {JSON.stringify(this.state.errorInfo)}
-        </div>
+          <p>Apologies for any inconvenience! Please try again later. </p>
+        </ErrorContainer>
       );
     }
 

diff --git a/src/pages/Home/CoinEarnings.tsx b/src/pages/Home/CoinEarnings.tsx
@@ -250,14 +250,14 @@ const CoinEarningsItem: React.FC<{ data?: ApiPoolCoinFull }> = ({ data }) => {
 export const CoinEarnings = () => {
   const coinsFull = useReduxState('poolCoinsFull');
 
+  const data = coinsFull.data || [];
+
   return (
     <Content>
       <Spacer size="xl" />
       <Container>
-        {coinsFull.data.length > 0 ? (
-          coinsFull.data.map((item) => (
-            <CoinEarningsItem key={item.ticker} data={item} />
-          ))
+        {data.length > 0 ? (
+          data.map((item) => <CoinEarningsItem key={item.ticker} data={item} />)
         ) : (
           <CoinEarningsItem />
         )}