Add option to control browser log level (#579)

* Add `clientLogLevel` option and `--client-log-level` flag.

This option can be `error`, `warning`, `info` or `none`. It defaults to `info`.
It controls the log messages shown in the browser.

* Prevent disconnected client message from appearing every two seconds

bin/webpack-dev-server.js

@@ -63,6 +63,12 @@ yargs.options({
 		group: DISPLAY_GROUP,
 		describe: "Quiet"
 	},
+	"client-log-level": {
+		type: "string",
+		group: DISPLAY_GROUP,
+		default: "info",
+		describe: "Log level in the browser (info, warning, error or none)"
+	},
 	"https": {
 		type: "boolean",
 		group: SSL_GROUP,
@@ -179,6 +185,9 @@ function processOptions(wpOpt) {
 	if(!options.hotOnly)
 		options.hotOnly = argv["hot-only"];
 
+	if(!options.clientLogLevel)
+		options.clientLogLevel = argv["client-log-level"];
+
 	if(argv["content-base"]) {
 		options.contentBase = argv["content-base"];
 		if(/^[0-9]$/.test(options.contentBase))

client/index.js

@@ -30,44 +30,58 @@ if(typeof __resourceQuery === "string" && __resourceQuery) {
 var sock = null;
 var hot = false;
 var initial = true;
+var connected = false;
 var currentHash = "";
+var logLevel = "info";
+
+function log(level, msg) {
+	if(logLevel === "info" && level === "info")
+		return console.log(msg);
+	if(["info", "warning"].indexOf(logLevel) >= 0 && level === "warning")
+		return console.warn(msg);
+	if(["info", "warning", "error"].indexOf(logLevel) >= 0 && level === "error")
+		return console.error(msg);
+}
 
 var onSocketMsg = {
 	hot: function() {
 		hot = true;
-		console.log("[WDS] Hot Module Replacement enabled.");
+		log("info", "[WDS] Hot Module Replacement enabled.");
 	},
 	invalid: function() {
-		console.log("[WDS] App updated. Recompiling...");
+		log("info", "[WDS] App updated. Recompiling...");
 	},
 	hash: function(hash) {
 		currentHash = hash;
 	},
 	"still-ok": function() {
-		console.log("[WDS] Nothing changed.")
+		log("info", "[WDS] Nothing changed.")
+	},
+	"log-level": function(level) {
+		logLevel = level;
 	},
 	ok: function() {
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	warnings: function(warnings) {
-		console.log("[WDS] Warnings while compiling.");
+		log("info", "[WDS] Warnings while compiling.");
 		for(var i = 0; i < warnings.length; i++)
 			console.warn(stripAnsi(warnings[i]));
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	errors: function(errors) {
-		console.log("[WDS] Errors while compiling.");
+		log("info", "[WDS] Errors while compiling.");
 		for(var i = 0; i < errors.length; i++)
 			console.error(stripAnsi(errors[i]));
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	"proxy-error": function(errors) {
-		console.log("[WDS] Proxy error.");
+		log("info", "[WDS] Proxy error.");
 		for(var i = 0; i < errors.length; i++)
-			console.error(stripAnsi(errors[i]));
+			log("error", stripAnsi(errors[i]));
 		if(initial) return initial = false;
 	}
 };
@@ -82,7 +96,10 @@ var newConnection = function() {
 	}));
 
 	sock.onclose = function() {
-		console.error("[WDS] Disconnected!");
+		if(connected)
+			log("error", "[WDS] Disconnected!");
+
+		connected = false;
 
 		// Try to reconnect.
 		sock = null;
@@ -92,6 +109,7 @@ var newConnection = function() {
 	};
 
 	sock.onmessage = function(e) {
+		connected = true;
 		// This assumes that all data sent via the websocket is JSON.
 		var msg = JSON.parse(e.data);
 		onSocketMsg[msg.type](msg.data);
@@ -102,15 +120,15 @@ newConnection();
 
 function reloadApp() {
 	if(hot) {
-		console.log("[WDS] App hot update...");
+		log("info", "[WDS] App hot update...");
 		var hotEmitter = require("webpack/hot/emitter");
 		hotEmitter.emit("webpackHotUpdate", currentHash);
 		if(typeof window !== "undefined") {
 			// broadcast update to window
 			window.postMessage("webpackHotUpdate" + currentHash, "*");
 		}
 	} else {
-		console.log("[WDS] App updated. Reloading...");
+		log("info", "[WDS] App updated. Reloading...");
 		window.location.reload();
 	}
 }

lib/Server.js

@@ -21,6 +21,7 @@ function Server(compiler, options) {
 
 	this.hot = options.hot || options.hotOnly;
 	this.headers = options.headers;
+	this.clientLogLevel = options.clientLogLevel;
 	this.sockets = [];
 
 	// Listening for events
@@ -325,6 +326,9 @@ Server.prototype.listen = function() {
 		}.bind(this));
 
 		if(this.hot) this.sockWrite([conn], "hot");
+
+		if(this.clientLogLevel)
+			this.sockWrite([conn], "log-level", this.clientLogLevel);
 		if(!this._stats) return;
 		this._sendStats([conn], this._stats.toJson(), true);
 	}.bind(this));