應(yīng)用程序日志記錄是我們?cè)诓渴鸬綉?yīng)用程序服務(wù)器上的應(yīng)用程序中都要做的事情，對(duì)嗎？ 對(duì)于大多數(shù)Java開發(fā)人員而言，使用Log4J或Logback之類的框架似乎都是理所當(dāng)然的。 但是，我們編寫的在那些討厭的瀏覽器中運(yùn)行的代碼又如何呢？ 我猜想，除了在調(diào)試過程中偶爾使用console.log（）語句外，我們對(duì)JavaScript日志記錄的考慮不多。 我發(fā)現(xiàn)這種情況非常令人遺憾，因?yàn)槿缃竦内厔?shì)似乎是將我們的應(yīng)用程序邏輯轉(zhuǎn)移到瀏覽器。 有了它，無論我們開發(fā)和測(cè)試客戶端代碼的程度如何，瀏覽器中發(fā)生的有趣事件可能都不會(huì)被注意到，或者會(huì)發(fā)生任何錯(cuò)誤，可能會(huì)證明不必要地難以復(fù)制和修復(fù)。 在此博客文章中，我將演示一個(gè)非?；镜脑O(shè)置，以使用一些非?；綣avaScript和jQuery，以及一個(gè)帶有Slf4J的簡(jiǎn)單Spring控制器，記錄來自服務(wù)器上瀏覽器的消息。

服務(wù)器端代碼

假設(shè)您已經(jīng)啟動(dòng)并運(yùn)行了一個(gè)現(xiàn)有的Spring Web應(yīng)用程序，并且正在使用SLF4J進(jìn)行應(yīng)用程序日志記錄，我們要做的就是添加一個(gè)額外的@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代碼

對(duì)于日志記錄解決方案JavaScript部分，我們將添加一個(gè)名為jdev.js的JS文件。 在其中，我們將定義一個(gè)名為JDEV.logging的模塊，該模塊將包含一個(gè)名為logToServer（）的方法。 在jQuery的幫助下，此方法將向我們的控制器發(fā)送Ajax消息。 只需確保url變量指向在控制器的@RequestMapping中配置的端點(diǎn)即可。

我們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頁(yè)面中包含jQuery和我們的jdev.js文件，而不是使用新的日志記錄方法來調(diào)用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>

如果一切設(shè)置正確，那么您應(yīng)該獲得類似的日志條目：
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"}

包起來

我已經(jīng)展示了一種非常簡(jiǎn)單的設(shè)計(jì)，可以在服務(wù)器端日志中記錄源自瀏覽器端JavaScript代碼的條目。 當(dāng)然，您可以詳細(xì)說明此示例，例如，通過添加隨Ajax調(diào)用一起發(fā)送日志級(jí)別的可能性。

翻譯自: https://www.javacodegeeks.com/2014/11/server-side-logging-from-browser-side-javascript-code.html

總結(jié)

以上是生活随笔為你收集整理的从浏览器端JavaScript代码进行服务器端日志记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。