从浏览器端JavaScript代码进行服务器端日志记录

应用程序日志记录是我们在部署到应用程序服务器上的应用程序中都要做的事情，对吗？对于大多数Java开发人员而言，使用Log4J或Logback之类的框架似乎都是理所当然的。但是，我们编写的在那些讨厌的浏览器中运行的代码又如何呢？我猜想，除了在调试过程中偶尔使用console.log（）语句外，我们对JavaScript日志记录的考虑不多。我发现这种情况非常令人遗憾，因为如今的趋势似乎是将我们的应用程序逻辑转移到浏览器。有了它，无论我们开发和测试客户端代码的程度如何，浏览器中发生的有趣事件可能都不会被注意到，或者会发生任何错误，可能会证明不必要地难以复制和修复。在此博客文章中，我将演示一个非常基本的设置，以使用一些非常基本JavaScript和jQuery，以及一个带有Slf4J的简单Spring控制器，记录来自服务器上浏览器的消息。

服务器端代码

假设您已经启动并运行了一个现有的Spring Web应用程序，并且正在使用SLF4J进行应用程序日志记录，我们要做的就是添加一个额外的@Controller来记录所有传入消息。

我们的JSLogger控制器

package it.jdev.demo;import java.lang.invoke.MethodHandles;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseStatus;@Controller
@RequestMapping(value = "/js-log")
public class JSLogger {private static final Logger LOGGER = LoggerFactory.getLogger(MethodHandles.Lookup.class);@RequestMapping(method = RequestMethod.POST)@ResponseStatus(HttpStatus.NO_CONTENT)public void logError(final HttpServletRequest request, @RequestBody(required = true) final String logMessage) {final String ipAddress = request.getRemoteAddr();final String hostname = request.getRemoteHost();LOGGER.warn("Received client-side logmessage (" + ipAddress + "/" + hostname + "): " + logMessage);}}

JavaScript代码

对于日志记录解决方案JavaScript部分，我们将添加一个名为jdev.js的JS文件。在其中，我们将定义一个名为JDEV.logging的模块，该模块将包含一个名为logToServer（）的方法。在jQuery的帮助下，此方法将向我们的控制器发送Ajax消息。只需确保url变量指向在控制器的@RequestMapping中配置的端点即可。

我们JavaScript记录模块

var JDEV = JDEV || {};JDEV.namespace = function(ns_string) {var parts = ns_string.split('.');var parent = JDEV;// strip redundant leading globalif (parts[0] === "JDEV") {parts = parts.slice(1);}for (var i = 0; i < parts.length; i += 1) {// create a property if it doesn't existif (typeof parent[parts[i]] === "undefined") {parent[parts[i]] = {};}parent = parent[parts[i]];}return parent;
};JDEV.namespace('logging');
JDEV.logging = (function() {var logToServer = function(logMessage) {var logEventObject = {"message" : logMessage,"location" : location.href,"browser" : navigator.userAgent,};var logMsg = JSON.stringify(logEventObject);var url = "js-log";$.ajax({type : "POST",url : url,data : logMsg,contentType : "application/json",cache : "false",});}return {logToServer : logToServer,}})();

剩下要做的就是在我们的html页面中包含jQuery和我们的jdev.js文件，而不是使用新的日志记录方法来调用console.log（）：

接线JS代码

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript" src="js/jdev.js"></script><script type="text/javascript">$(document).ready(function() {JDEV.logging.logToServer("Hi from the browser...");});</script>
</body>
</html>

如果一切设置正确，那么您应该获得类似的日志条目：
WARN : Received client-side logmessage (127.0.0.1/localhost): {"message":"Hi from the browser...","location":"http://localhost:8080/demo/","browser":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.104 Safari/537.36"}