Use the Home Assistant System Log

Author: j-a-n

docs/configuration.md

@@ -7,7 +7,9 @@ You can set the following configuration parameters for every individual Home Ass
 | enabled_on_views                 | Enable WallPanel on the named views (path) only. See [Enable WallPanel on specific Views](configuration.md#enable-wallpanel-on-specific-views) for details. | []   |
 | debug                            | Enable debug mode?                                                                                     | false     |
 | wait_for_browser_mod_time        | How long to wait for browser_mod to be available (in seconds)? This config attribute can only be set in the main configuration and not in profiles, user-specific or device-specific. | 0.25      |
-| log_level_console                | Log level to use for logging to the browser console (error / warn / info / debug).                     | info      |
+| log_level_console                | Log level to use for logging to the browser console (error / warning / info / debug).                  | info      |
+| log_level_system                 | Log level to use for logging to the HA system log (error / warning / info / debug).                    | warning   |
+| system_target_log_level          | Always use this log level when logging to the HA system log (error / warning / info / debug).          |           |
 | alert_errors                     | Display error messages in an alert box.                                                                | true      |
 | hide_toolbar                     | Hide the upper panel toolbar? Please see [FAQ](faq.md#dashboard-cannot-be-edited) how to edit your dashboard when toolbar is hidden. | false     |
 | hide_toolbar_on_subviews         | Hide the toolbar in subviews too?                                                                      | false     |

docs/troubleshooting.md

@@ -32,16 +32,25 @@ You should see a message like `🖼️ Wallpanel version x.y.z` if WallPanel has
 
 If not, please check if there are any error messages that give an indication of the problem.
 
-To confgure how much information WallPanel logs to the browser console, you can set the configuration option `log_level_console` to `error`, `warn`, `info` or `debug`.
+To confgure how much information WallPanel logs to the browser console, you can set the configuration option `log_level_console` to `error`, `warning`, `info` or `debug`.
 
 !!! example
     ```yaml
     wallpanel:
       log_level_console: debug
     ```
 
-## Home Assistant Log
-Please check the [Home Assistant Log](https://www.home-assistant.io/integrations/system_log/) for errors regarding WallPanel.
+## Home Assistant System Log
+You can configure the log level used for logging to the [Home Assistant System Log](https://www.home-assistant.io/integrations/system_log/).
+By default, the original log level is used for the System Log.
+If you’d like to map all log levels to a single target level, you can set the `system_target_log_level` option.
+
+!!! example
+    ```yaml
+    wallpanel:
+      log_level_system: debug
+      system_target_log_level: error
+    ```
 
 
 ## Debug mode

wallpanel-src.js

@@ -3,13 +3,15 @@
  * Released under the GNU General Public License v3.0
  */
 
-const version = "4.55.1";
+const version = "4.56.0";
 const defaultConfig = {
 	enabled: false,
 	enabled_on_views: [],
 	debug: false,
 	wait_for_browser_mod_time: 0.25,
 	log_level_console: "info",
+	log_level_system: "warning",
+	system_target_log_level: "",
 	alert_errors: true,
 	hide_toolbar: false,
 	keep_toolbar_space: false,
@@ -233,7 +235,9 @@ function stringify(obj) {
 
 const logger = {
 	messages: [],
-	logLevel: "warn",
+	logLevelConsole: "warning",
+	logLevelSystem: "error",
+	systemTargetLogLevel: "",
 	addMessage: function (level, args) {
 		if (!config.debug) {
 			return;
@@ -262,6 +266,22 @@ const logger = {
 			logger.messages.shift();
 		}
 	},
+	systemLog(level, message) {
+		if (!elHass || !elHass.hass) {
+			return;
+		}
+		return elHass.hass.callService(
+			"system_log",
+			"write",
+			{
+				logger: `frontend.wallpanel${browserId ? "." + browserId : ""}`,
+				message: message,
+				level: logger.systemTargetLogLevel || level
+			},
+			undefined,
+			false
+		);
+	},
 	downloadMessages: function () {
 		const data = new Blob([stringify(logger.messages)], { type: "text/plain" });
 		const url = window.URL.createObjectURL(data);
@@ -274,32 +294,46 @@ const logger = {
 	purgeMessages: function () {
 		logger.messages = [];
 	},
-	log: function () {
-		console.log.apply(this, arguments);
-		logger.addMessage("info", arguments);
-	},
 	debug: function () {
-		if (["debug"].includes(logger.logLevel)) {
+		if (["debug"].includes(logger.logLevelConsole)) {
 			console.debug.apply(this, arguments);
 		}
+		if (["debug"].includes(logger.logLevelSystem)) {
+			logger.systemLog("debug", stringify(arguments));
+		}
 		logger.addMessage("debug", arguments);
 	},
 	info: function () {
-		if (["debug", "info"].includes(logger.logLevel)) {
+		if (["debug", "info"].includes(logger.logLevelConsole)) {
 			console.info.apply(this, arguments);
 		}
+		if (["debug", "info"].includes(logger.logLevelSystem)) {
+			logger.systemLog("info", stringify(arguments));
+		}
 		logger.addMessage("info", arguments);
 	},
-	warn: function () {
-		if (["debug", "info", "warn"].includes(logger.logLevel)) {
+	log: function () {
+		logger.info.apply(this, arguments);
+	},
+	warning: function () {
+		if (["debug", "info", "warning"].includes(logger.logLevelConsole)) {
 			console.warn.apply(this, arguments);
 		}
-		logger.addMessage("warn", arguments);
+		if (["debug", "info", "warning"].includes(logger.logLevelSystem)) {
+			logger.systemLog("warning", stringify(arguments));
+		}
+		logger.addMessage("warning", arguments);
+	},
+	warn: function () {
+		logger.warning.apply(this, arguments);
 	},
 	error: function () {
-		if (["debug", "info", "warn", "error"].includes(logger.logLevel)) {
+		if (["debug", "info", "warning", "error"].includes(logger.logLevelConsole)) {
 			console.error.apply(this, arguments);
 		}
+		if (["debug", "info", "warning", "error"].includes(logger.logLevelSystem)) {
+			logger.systemLog("error", stringify(arguments));
+		}
 		logger.addMessage("error", arguments);
 		if (config.alert_errors) {
 			const msg = `Wallpanel error: ${stringify(arguments)}`;
@@ -309,6 +343,9 @@ const logger = {
 				alert(msg);
 			}
 		}
+	},
+	err: function () {
+		logger.error.apply(this, arguments);
 	}
 };
 
@@ -694,10 +731,25 @@ function updateConfig() {
 		config.show_images = false;
 	}
 
+	if (config.log_level_console == "err") {
+		config.log_level_console = "error";
+	} else if (config.log_level_console == "warn") {
+		config.log_level_console = "warning";
+	}
 	if (!oldConfig || !Object.keys(oldConfig).length) {
 		// Keep old log level to get log messages when navigating between different dashboards
-		logger.logLevel = config.log_level_console;
+		logger.logLevelConsole = config.log_level_console;
+		logger.logLevelConsole;
 	}
+
+	if (config.log_level_system == "err") {
+		config.log_level_system = "error";
+	} else if (config.log_level_system == "warn") {
+		config.log_level_system = "warning";
+	}
+	logger.logLevelSystem = config.log_level_system;
+	logger.systemTargetLogLevel = config.system_target_log_level;
+
 	logger.debug("Wallpanel config is now:", config);
 
 	if (wallpanel) {