Merge pull request #566 from simison/error-404-pages

#501 Handle 404 errors at Express backend and at Angular frontend

config/lib/express.js

@@ -178,7 +178,6 @@ module.exports.initModulesServerRoutes = function (app) {
  * Configure error handling
  */
 module.exports.initErrorRoutes = function (app) {
-	// Assume 'not found' in the error msgs is a 404. this is somewhat silly, but valid, you can do whatever you like, set properties, use instanceof etc.
 	app.use(function (err, req, res, next) {
 		// If the error object doesn't exists
 		if (!err) return next();
@@ -189,12 +188,6 @@ module.exports.initErrorRoutes = function (app) {
 		// Redirect to error page
 		res.redirect('/server-error');
 	});
-
-	// Assume 404 since no middleware responded
-	app.use(function (req, res) {
-		// Redirect to not found page
-		res.redirect('/not-found');
-	});
 };
 
 /**

modules/core/client/config/core.client.routes.js

@@ -3,14 +3,19 @@
 // Setting up route
 angular.module('core').config(['$stateProvider', '$urlRouterProvider',
 	function($stateProvider, $urlRouterProvider) {
-		// Redirect to home view when route not found
-		$urlRouterProvider.otherwise('/');
+
+		// Redirect to 404 when route not found
+		$urlRouterProvider.otherwise('not-found');
 
 		// Home state routing
 		$stateProvider.
-		state('home', {
-			url: '/',
-			templateUrl: 'modules/core/views/home.client.view.html'
-		});
+			state('home', {
+				url: '/',
+				templateUrl: 'modules/core/views/home.client.view.html'
+			}).
+			state('not-found', {
+				url: '/not-found',
+				templateUrl: 'modules/core/views/404.client.view.html'
+			});
 	}
 ]);

modules/core/client/views/404.client.view.html

@@ -0,0 +1,6 @@
+<h1>Page Not Found</h1>
+<div class="alert alert-danger" role="alert">
+	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+	<span class="sr-only">Error:</span>
+	Page Not Found
+</div>

modules/core/server/controllers/core.server.controller.js

@@ -1,7 +1,7 @@
 'use strict';
 
 /**
- * Render the main applicaion page
+ * Render the main application page
  */
 exports.renderIndex = function(req, res) {
 	res.render('modules/core/server/views/index', {
@@ -19,10 +19,22 @@ exports.renderServerError = function(req, res) {
 };
 
 /**
- * Render the server not found page
+ * Render the server not found responses
+ * Performs content-negotiation on the Accept HTTP header
  */
 exports.renderNotFound = function(req, res) {
-	res.status(404).render('modules/core/server/views/404', {
-		url: req.originalUrl
-	});
+
+	res.status(404).format({
+			'text/html': function(){
+				res.render('modules/core/server/views/404', {
+					url: req.originalUrl
+				});
+			},
+			'application/json': function(){
+				res.json({ error: 'Path not found' });
+			},
+			'default': function(){
+				res.send('Path not found');
+			}
+		});
 };

modules/core/server/routes/core.server.routes.js

@@ -6,7 +6,9 @@ module.exports = function(app) {
 
 	// Define error pages
 	app.route('/server-error').get(core.renderServerError);
-	app.route('/not-found').get(core.renderNotFound);
+
+	// Return a 404 for all undefined api, module or lib routes
+	app.route('/:url(api|modules|lib)/*').get(core.renderNotFound);
 
 	// Define application route
 	app.route('/*').get(core.renderIndex);

modules/core/server/views/404.server.view.html

@@ -2,7 +2,9 @@
 
 {% block content %}
 <h1>Page Not Found</h1>
-<pre>
+<div class="alert alert-danger" role="alert">
+	<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+	<span class="sr-only">Error:</span>
 	{{url}} is not a valid path.
-</pre>
+</div>
 {% endblock %}