chore: Improve error page (#66)

* chore: Improve error page

* fix: Fix middlware order

* fix: Remove console.log

app.js

@@ -16,6 +16,7 @@ const breadcrumb = require('./lib/breadcrumb')
 const settings = require('./lib/settings')
 const routes = require('./routes/index')
 const { getSpace } = require('./services/contentful')
+const { catchErrors } = require('./handlers/errorHandlers')
 
 const app = express()
 
@@ -43,22 +44,18 @@ app.use(function (req, res, next) {
 app.use(settings)
 
 // Make data available for our views to consume
-app.use(async function (request, response, next) {
+app.use(catchErrors(async function (request, response, next) {
   // Get enabled locales from Contentful
-  const space = await getSpace()
-  response.locals.locales = space.locales
+  response.locals.locales = [{code: 'en-US', name: 'U.S. English'}]
+  response.locals.currentLocale = response.locals.locales[0]
+  // Inject custom helpers
+  response.locals.helpers = helpers
 
-  const defaultLocale = response.locals.locales
-    .find((locale) => locale.default)
-
-  if (request.query.locale) {
-    response.locals.currentLocale = space.locales
-      .find((locale) => locale.code === request.query.locale)
-  }
-
-  if (!response.locals.currentLocale) {
-    response.locals.currentLocale = defaultLocale
-  }
+  // Make query string available in templates to render links properly
+  const qs = querystring.stringify(request.query)
+  response.locals.queryString = qs ? `?${qs}` : ''
+  response.locals.query = request.query
+  response.locals.currentPath = request.path
 
   // Initialize translations and include them on templates
   initializeTranslations()
@@ -79,17 +76,23 @@ app.use(async function (request, response, next) {
   response.locals.currentApi = apis
     .find((api) => api.id === (request.query.api || 'cda'))
 
-  // Inject custom helpers
-  response.locals.helpers = helpers
+  const space = await getSpace()
+  response.locals.locales = space.locales
 
-  // Make query string available in templates to render links properly
-  const qs = querystring.stringify(request.query)
-  response.locals.queryString = qs ? `?${qs}` : ''
-  response.locals.query = request.query
-  response.locals.currentPath = request.path
+  const defaultLocale = response.locals.locales
+    .find((locale) => locale.default)
+
+  if (request.query.locale) {
+    response.locals.currentLocale = space.locales
+      .find((locale) => locale.code === request.query.locale)
+  }
+
+  if (!response.locals.currentLocale) {
+    response.locals.currentLocale = defaultLocale
+  }
 
   next()
-})
+}))
 
 app.use(breadcrumb())
 
@@ -108,7 +111,7 @@ app.use(function (request, response, next) {
 app.use(function (err, request, response, next) {
   // Set locals, only providing error in development
   response.locals.error = request.app.get('env') === 'development' ? err : {}
-
+  response.locals.error.status = err.status || 500
   // Render the error page
   response.status(err.status || 500)
   response.render('error')

handlers/errorHandlers.js

@@ -7,6 +7,9 @@
 module.exports.catchErrors = (fn) => {
   return function (request, response, next) {
     return fn(request, response, next).catch((e) => {
+      if (e.response) {
+        e.status = e.response.status
+      }
       next(e)
     })
   }

i18n/locales/de-DE.json

@@ -80,5 +80,6 @@
   "beginnerLabel": "Anfänger",
   "intermediateLabel": "Fortgeschrittener",
   "advancedLabel": "Experte",
-  "editInTheWebAppLabel": "In der web app bearbeiten"
+  "editInTheWebAppLabel": "In der web app bearbeiten",
+  "error404Route": "Ein nicht unterstützter HTTP Route"
 }

i18n/locales/en-US.json

@@ -80,5 +80,6 @@
   "beginnerLabel": "Beginner",
   "intermediateLabel": "Intermediate",
   "advancedLabel": "Advanced",
-  "editInTheWebAppLabel": "Edit in the web app"
+  "editInTheWebAppLabel": "Edit in the web app",
+  "error404Route": "a non supported route"
 }

views/error.pug

@@ -9,15 +9,23 @@ block content
       h1 #{translate('somethingWentWrongLabel', currentLocale.code)} (#{error.status})
       h2 #{translate('tryLabel', currentLocale.code)}:
       ul
-        li #{translate('contentModelChangedErrorLabel', currentLocale.code)}
+        case error.status
+          when 404
+            li #{translate('error404Route', currentLocale.code)}
             li #{translate('draftOrPublishedErrorLabel', currentLocale.code)}
-        li #{translate('localeContentErrorLabel', currentLocale.code)}
+          when 400
+            li #{translate('contentModelChangedErrorLabel', currentLocale.code)}
+          when 401
             li #{translate('verifyCredentialsErrorLabel', currentLocale.code)}
+            li #{translate('localeContentErrorLabel', currentLocale.code)}
+
+        if error.stack
         li #{translate('stackTraceErrorLabel', currentLocale.code)}
       if error.response
         h2 #{translate('errorLabel', currentLocale.code)}
           pre.error__stack-trace
             code.shell #{helpers.dump(error.response.data)}
+      if error.stack
         h2 #{translate('stackTraceLabel', currentLocale.code)}
         pre.error__stack-trace
           code.shell #{error.stack}

views/mixins/_breadcrumb.pug

@@ -1,4 +1,5 @@
 mixin breadcrumb
+  if breadcrumb
     nav.breadcrumb
       ul
         each item in breadcrumb