JS怎样在Spring中实现日志记录_JS在Spring中实现日志记录的详细教程

window.addEventListener('error', function (e) {
  const logData = {
    level: 'ERROR',
    message: e.message,
    url: window.location.href,
    userAgent: navigator.userAgent,
    timestamp: new Date().toISOString()
  };
<p>// 发送到 Spring 后端
fetch('/api/logs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(logData)
});
});</p><p>// 手动记录行为日志
function logAction(action) {
fetch('/api/logs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
level: 'INFO',
message: <code>User action: ${action}</code>,
timestamp: new Date().toISOString()
})
});
}</p>

public class ClientLog {
    private String level;
    private String message;
    private String url;
    private String userAgent;
    private String timestamp;
<pre class='brush:php;toolbar:false;'>// Getters and Setters

@RestController
@RequestMapping("/api")
public class LogController {
<pre class='brush:php;toolbar:false;'>private static final Logger logger = LoggerFactory.getLogger(LogController.class);

@PostMapping("/logs")
public ResponseEntity<String> receiveLog(@RequestBody ClientLog clientLog) {
    // 格式化输出前端日志
    String formatted = String.format("[%s] %s | %s | %s",
            clientLog.getLevel(),
            clientLog.getMessage(),
            clientLog.getUrl(),
            clientLog.getUserAgent());

    // 使用不同级别记录
    switch (clientLog.getLevel().toUpperCase()) {
        case "ERROR":
            logger.error(formatted);
            break;
        case "WARN":
            logger.warn(formatted);
            break;
        default:
            logger.info(formatted);
            break;
    }

    return ResponseEntity.ok("Logged");
}

<configuration>
    <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>logs/client-logs.log</file>
        <encoder>
            <pattern>%d{yyyy-MM-dd HH:mm:ss} - %msg%n</pattern>
        </encoder>
        <rollingPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedRollingPolicy">
            <fileNamePattern>logs/client-logs-%d{yyyy-MM-dd}.%i.log</fileNamePattern>
            <maxFileSize>10MB</maxFileSize>
            <maxHistory>30</maxHistory>
        </rollingPolicy>
    </appender>
<pre class='brush:php;toolbar:false;'><logger name="com.yourpackage.LogController" level="INFO" additivity="false">
    <appender-ref ref="FILE" />
</logger>

<root level="INFO">
    <appender-ref ref="FILE" />
</root>

@CrossOrigin
@PostMapping("/logs")
public ResponseEntity<String> receiveLog(...)