Provide custom onError handler for http-proxy-middleware

Created by: cloudmu

This will change the http-proxy-middle logLevel option from 'silent' to 'error' in development mode.

Errors are bound to occur when proxying API requests to an API server during development, for various reasons such as forgetting to start the API server or using an incorrect port. With 'silent' option, no error message will be shown in the command line console at all, which can be confusing. With 'error' option, the console will show a very concise and informative error message, which helps to quickly pinpoint to the issues.

For example, following is an example of the error message (caused by not starting the API server) in the command line console:

scripts/start.js

@@ -170,6 +170,23 @@ function openBrowser(port, protocol) {
   opn(protocol + '://localhost:' + port + '/');
 }
 
+// We need to provide a custom onError function for httpProxyMiddleware.
+// It allows us to log custom error messages on the console.
+function onProxyError(proxy) {
+  return function(err, req, res){
+    var host = req.headers && req.headers.host;
+    console.log(
+      chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
+      ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
+    );
+    console.log(
+      'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' + 
+      chalk.cyan(err.code) + ').'
+    );
+    console.log();
+  }
+}
+
 function addMiddleware(devServer) {
   // `proxy` lets you to specify a fallback server during development.
   // Every unrecognized request will be forwarded to it.
@@ -209,6 +226,7 @@ function addMiddleware(devServer) {
       httpProxyMiddleware(pathname => mayProxy.test(pathname), {
         target: proxy,
         logLevel: 'silent',
+        onError: onProxyError(proxy),
         secure: false,
         changeOrigin: true
       })