應用程序日志記錄是我們在部署到應用程序服務器上的應用程序中都要做的事情，對嗎？ 對于大多數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"}

包起來

我已經展示了一種非常簡單的設計，可以在服務器端日志中記錄源自瀏覽器端JavaScript代碼的條目。 當然，您可以詳細說明此示例，例如，通過添加隨Ajax調用一起發送日志級別的可能性。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。