From ba1a4475e9613f2f9c34c98214fcf6fc32bbb159 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Mon, 18 May 2015 17:38:30 +0300
Subject: [PATCH] #501 Handle 404 errors at Express backend at at Angular
 frontend
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `/{api|modules|lib}/*` returns error page when path doesn’t exist
(from Express).
- `/*` always returns index (from Express), but if `$state` doesn’t
exist, Angular redirects to `/not-found` (no 404 status in that case
though!)
- If `Accept: application/json` header is present without `Accept:
text/html`, return error as json. Hence looking at non existing /api/*
paths with browser would show html error, but querying them with script
would return json.
- Slightly prettier 404 error

Test:
```bash
curl http://localhost:3000/api/notfound -4 -H "Accept: application/json"
```
=> json error.

```bash
curl http://localhost:3000/api/notfound -4 -H "Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0
.8"
```
=> html error (imitates Chrome’s Accept header).

Starting point was @dotch’s PL: https://github.com/meanjs/mean/pull/503

And `req.accepts()` idea came from http://stackoverflow.com/a/9802006
---
 .../core/client/config/core.client.routes.js  | 17 ++++++++-----
 .../core/client/views/404.client.view.html    |  6 +++++
 .../controllers/core.server.controller.js     | 25 +++++++++++++++----
 .../core/server/views/404.server.view.html    |  6 +++--
 4 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 modules/core/client/views/404.client.view.html

diff --git a/modules/core/client/config/core.client.routes.js b/modules/core/client/config/core.client.routes.js
index 7328d0d213..fe5692bd35 100644
--- a/modules/core/client/config/core.client.routes.js
+++ b/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'
+			});
 	}
 ]);
diff --git a/modules/core/client/views/404.client.view.html b/modules/core/client/views/404.client.view.html
new file mode 100644
index 0000000000..6e79d29f44
--- /dev/null
+++ b/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>
diff --git a/modules/core/server/controllers/core.server.controller.js b/modules/core/server/controllers/core.server.controller.js
index 3b427c38f7..efda2451db 100644
--- a/modules/core/server/controllers/core.server.controller.js
+++ b/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,25 @@ exports.renderServerError = function(req, res) {
 };
 
 /**
- * Render the server not found page
+ * Render the server not found responses
  */
 exports.renderNotFound = function(req, res) {
-	res.status(404).render('modules/core/server/views/404', {
-		url: req.originalUrl
-	});
+	res.status(404);
+
+	// Respond with html page
+	if (req.accepts('html')) {
+		res.render('modules/core/server/views/404', {
+			url: req.originalUrl
+		});
+		return;
+	}
+
+	// Respond with json to API calls
+	if (req.accepts('json')) {
+		res.json({ error: 'Path not found' });
+		return;
+	}
+
+	// Default to plain-text
+	res.type('txt').send('Path not found');
 };
diff --git a/modules/core/server/views/404.server.view.html b/modules/core/server/views/404.server.view.html
index 404076174c..94e371926a 100644
--- a/modules/core/server/views/404.server.view.html
+++ b/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 %}