better errors

Author: dwwoelfel

package.json

@@ -13,6 +13,7 @@
     "firebase-functions": "^3.2.0",
     "graphql": "^14.4.2",
     "grommet": "^2.7.6",
+    "grommet-icons": "^4.3.0",
     "highlightjs-graphql": "^1.0.1",
     "idx": "^2.5.6",
     "node-fetch": "^2.6.0",

src/App.js

@@ -12,6 +12,7 @@ import idx from 'idx';
 import {NotificationContainer} from './Notifications';
 import OneGraphLogo from './oneGraphLogo';
 import {Grommet, Grid, Box, Heading, Text, Anchor} from 'grommet';
+import {StatusCritical} from 'grommet-icons';
 import ScrollMemory from 'react-router-scroll-memory';
 import {matchPath} from 'react-router-dom';
 import UserContext from './UserContext';
@@ -42,6 +43,16 @@ const postsRootQuery = graphql`
   }
 `;
 
+const ErrorBox = ({error}) => {
+  const relayError = idx(error, _ => _.source.errors[0].message);
+  return (
+    <Box gap="xsmall" justify="center" align="center" direction="row">
+      <StatusCritical color="status-error" />{' '}
+      <Text size="medium">{relayError || error.message}</Text>
+    </Box>
+  );
+};
+
 const PostsRoot = ({
   error,
   props,
@@ -50,16 +61,14 @@ const PostsRoot = ({
   props: ?App_ViewerQueryResponse,
 }) => {
   if (error) {
-    // TODO: better errors
-    return <div>Error!</div>;
+    return <ErrorBox error={error} />;
   }
   if (!props) {
     return null;
   }
   const respository = props.gitHub ? props.gitHub.repository : null;
   if (!respository) {
-    // TODO: better errors
-    return <div>repository not found</div>;
+    return <ErrorBox error={new Error('Repository not found.')} />;
   } else {
     return <Posts repository={respository} />;
   }
@@ -93,16 +102,15 @@ const PostRoot = ({
   props: ?App_ViewerQueryResponse,
 }) => {
   if (error) {
-    return <div>Error!</div>;
+    return <ErrorBox error={error} />;
   }
   if (!props) {
     return null;
   }
   const post = idx(props, _ => _.gitHub.repository.issue);
   const labels = idx(post, _ => _.labels.nodes) || [];
   if (!post || !labels.map(l => l.name).includes('publish')) {
-    // TODO: better errors
-    return <div>Post not found</div>;
+    return <ErrorBox error={new Error('Missing post.')} />;
   } else {
     return <Post post={post} />;
   }

yarn.lock

@@ -6111,7 +6111,7 @@ graphql@^14.4.2:
   dependencies:
     iterall "^1.2.2"
 
-grommet-icons@^4.2.0:
+grommet-icons@^4.2.0, grommet-icons@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.3.0.tgz#a06d58da537e4e4d3b76cfd0314cc3cde6ce208f"
   integrity sha512-0E5rjP8jAA4gfij1zyRdXvfgThgzWO59Y/u2RWyFK/s3AKwDYpHNi1+YdJYPXXe2mjHjAj0tfsXaGswtv48DPA==