Merge pull request #44 from tinystacks/error-handling

better error handling and display

Author: zsimjee

package-lock.json

@@ -29,8 +29,8 @@
     "@next/bundle-analyzer": "^13.1.6",
     "@next/font": "^13.1.6",
     "@reduxjs/toolkit": "^1.9.2",
-    "@tinystacks/ops-core": "^0.3.2",
-    "@tinystacks/ops-model": "^0.4.0",
+    "@tinystacks/ops-core": "^0.4.0",
+    "@tinystacks/ops-model": "^0.5.0",
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
@@ -47,6 +47,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.4.0",
     "lodash.kebabcase": "^4.1.1",
+    "lodash.upperfirst": "^4.3.1",
     "next": "13.2.4",
     "next-compose-plugins": "^2.2.1",
     "next-optimized-images": "^2.6.2",
@@ -71,6 +72,7 @@
     "@types/lodash.isempty": "^4.4.7",
     "@types/lodash.isequal": "^4.4.7",
     "@types/lodash.kebabcase": "^4.1.7",
+    "@types/lodash.upperfirst": "^4.3.7",
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.50.0",

package.json

@@ -1,36 +1,74 @@
 import {
   Alert,
+  Box,
   Container,
   Center,
   Flex,
   AlertIcon,
   AlertTitle,
   AlertDescription,
-  CloseButton
+  CloseButton,
+  Text
 } from '@chakra-ui/react';
+import upperFirst from 'lodash.upperfirst';
+import { ShowableError } from 'ops-frontend/types';
 
 type DismissableErrorBannerProps = {
-  error: {
-    title: string;
-    message: string;
-  },
+  error: ShowableError,
   dismissError: () => void;
 };
 
 export default function DismissableErrorBanner (props: DismissableErrorBannerProps) {
   const {
     error: {
       title,
-      message
+      message,
+      cause,
+      context,
+      fields = {}
     },
     dismissError
   } = props;
 
+  let extraDetail;
+  if (cause || context) {
+    const punctuationCheck = new RegExp('.*[,.?!;:=-]');
+    let causePunctuation; 
+    if (cause) {
+      causePunctuation =  punctuationCheck.test(cause) ? '' :
+        (
+          context ? ':' : '.'
+        );
+    }
+    extraDetail = (
+      <Box display='block' alignContent='start'>
+        <Text>
+          {`${upperFirst(cause)}${causePunctuation}`}
+        </Text>
+        <Text whiteSpace='pre' textAlign='left' fontFamily='monospace'>
+          {
+            context ? context :
+            Object.entries(fields).map(([property, propError]) => {
+              return `${property} - ${propError}`
+            }).join('\n')
+          }
+        </Text>
+      </Box>
+    )
+  }
+
   return (
-    <Alert status='error' alignContent='center' w='auto'>
+    <Alert
+      status='error'
+      w='auto'
+      flexDirection='column'
+      alignItems='center'
+      justifyContent='center'
+      textAlign='center'
+    >
       <Container maxW="7xl">
         <Center>
-          <Flex>
+          <Flex alignContent='space-between'>
             <AlertIcon
               alignSelf='center'
               position='relative'
@@ -49,6 +87,7 @@ export default function DismissableErrorBanner (props: DismissableErrorBannerPro
           </Flex>
         </Center>
       </Container>
+      {extraDetail}
     </Alert>
   );
 }