adds: corrections based on circleCI and SSR requirements

src/backend/web/app.js

@@ -71,8 +71,9 @@ app.use('/', router);
 /**
  * Error Handler, Pass to front-end
  */
+/* eslint-disable no-unused-vars */
 app.use((err, req, res, next) => {
-  logger.logger.error(err);
+  logger.logger.error({ error: err });
   const status = err.status || 500;
   res
     .status(status)
@@ -84,7 +85,7 @@ app.use((err, req, res, next) => {
  * Leverage .status because adding the `404` status in redirect causes "Not Found. Redirecting to /404?search=" to display.
  */
 app.use((req, res) => {
-  logger.logger.warn(req.url);
+  logger.logger.warn(`Attempted to access the following unknown URL: ${req.url}`);
   res.status(404).redirect(`/error?status=404`);
 });
 

src/backend/web/authentication.js

@@ -123,20 +123,27 @@ function protectWithRedirect(req, res, next) {
 }
 
 function throwCustomError(message, status) {
-  let err = Error(message);
+  const err = Error(message);
   err.status = status;
 
   throw err;
 }
 
 // If user is not authenticated, return an appropriate 400 error type
-function forbidden(req, res) {
-  throwCustomError('', 403);
+/* eslint-disable no-unused-vars */
+function forbidden(req, res, next) {
+  if (req.accepts('json')) {
+    res.status(403).json({
+      message: 'Forbidden',
+    });
+  }
+
+  throwCustomError('Forbidden: Access is not allowed for the requested page!', 403);
 }
 
 // If we aren't redirecting, we're going to forbid this request
-function protectWithoutRedirect(req, res) {
-  forbidden(req, res);
+function protectWithoutRedirect(req, res, next) {
+  forbidden(req, res, next);
 }
 
 /**
@@ -156,7 +163,7 @@ function checkUser(requireAdmin, redirect, req, res, next) {
       }
       // Not an admin, so fail this now using best response type
       else {
-        forbidden(req, res);
+        forbidden(req, res, next);
       }
     } else {
       // We don't need an admin, and this is a regular authenticated user, let it pass

src/frontend/src/components/DynamicBackgroundContainer.jsx

@@ -25,24 +25,27 @@ export default function DynamicBackgroundContainer(props) {
 
   useEffect(() => {
     async function getBackgroundImgSrc() {
-      // Uses https://unsplash.com/collections/1538150/milkyway collection
-      /* Other Options:
+      try {
+        // Uses https://unsplash.com/collections/1538150/milkyway collection
+        /* Other Options:
         - https://unsplash.com/collections/291422/night-lights
         */
 
-      // Ensure we are using an image which fits correctly to user's viewspace
-      const dimensions = `${window.innerWidth}x${window.innerHeight}`;
-      console.log(dimensions);
-      const response = await fetch(`https://source.unsplash.com/collection/894/${dimensions}`);
+        // Ensure we are using an image which fits correctly to user's viewspace
+        const dimensions = `${window.innerWidth}x${window.innerHeight}`;
+        const response = await fetch(`https://source.unsplash.com/collection/894/${dimensions}`);
 
-      if (response.status !== 200) {
+        if (response.status !== 200) {
+          throw new Error(response.statusText);
+        }
+
+        setBackgroundImgSrc(response.url);
+      } catch (error) {
         setBackgroundImgSrc('../../images/hero-banner.png');
+        console.error(error);
+      } finally {
         setTransitionBackground(false);
-        throw new Error(response.statusText);
       }
-
-      setBackgroundImgSrc(response.url);
-      setTransitionBackground(false);
     }
 
     getBackgroundImgSrc();

src/frontend/src/pages/error.jsx

@@ -9,7 +9,6 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import DynamicBackgroundContainer from '../components/DynamicBackgroundContainer';
-import url from 'url';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -63,7 +62,6 @@ const useStyles = makeStyles((theme) => ({
     fontSize: '2rem',
     padding: theme.spacing(4),
     color: theme.palette.grey[300],
-    // backgroundColor: theme.palette.error.light,
     borderRadius: theme.spacing(1),
   },
   link: {
@@ -101,18 +99,26 @@ const useStyles = makeStyles((theme) => ({
 function CreateInnerErrorContent(props) {
   const classes = useStyles();
 
-  const errorMessages = {
-    '400': 'We did not understand the request!',
-    '401': 'You are not authorized to view this page!',
-    '403': 'Access is not allowed for the requested page!',
-    '404': 'We could not find what you were looking for!',
-    '405': 'Method is not allowed!',
-  };
+  const errorMessages = new Proxy(
+    {
+      '400': 'We did not understand the request!',
+      '401': 'You are not authorized to view this page!',
+      '403': 'Access is not allowed for the requested page!',
+      '404': 'We could not find what you were looking for!',
+      '405': 'Method is not allowed!',
+    },
+    {
+      get: function (object, property) {
+        return object.hasOwnProperty(property) ? object[property] : 'Something went wrong!';
+      },
+    }
+  );
 
-  if (props.status != '500' && !props.message) {
+  // If server doesn't send us a custom message, use ones defined above.
+  if (props.status && !props.message) {
     return (
       <Typography variant="body1" className={classes.h2}>
-        {errorMessages[props.status]}{' '}
+        {errorMessages[props.status]}
       </Typography>
     );
   }
@@ -123,14 +129,12 @@ function CreateInnerErrorContent(props) {
   );
 }
 
-const ErrorPage = (props) => {
+const ErrorPage = ({ location }) => {
   const classes = useStyles();
-  const params = new URLSearchParams(document.location.search);
+  const params = new URLSearchParams(location.search);
   const status = params.get('status');
   const message = params.get('message');
 
-  console.log(message);
-
   return (
     <PageBase title={status}>
       <Grid container spacing={0} direction="column" alignItems="center" justify="center">