ASP.NET Core MVC应用独立窗口展示全量日志的实现方案问询

1. 配置日志持久化（以Serilog文件日志为例） #

• 安装NuGet包：Serilog.AspNetCore 和 Serilog.Sinks.File
• 修改Program.cs，替换默认日志提供器为Serilog：

var builder = WebApplication.CreateBuilder(args);

// 配置Serilog日志
Log.Logger = new LoggerConfiguration()
    .MinimumLevel.Information()
    .WriteTo.File(
        path: Path.Combine(AppContext.BaseDirectory, "Logs", "app-.log"),
        rollingInterval: RollingInterval.Day, // 按天生成日志文件
        retainedFileCountLimit: 30, // 保留30天历史日志
        outputTemplate: "{Timestamp:yyyy-MM-dd HH:mm:ss.fff zzz} [{Level:u3}] {Message:lj}{NewLine}{Exception}"
    )
    .CreateLogger();

builder.Host.UseSerilog();

// 其他服务配置...
var app = builder.Build();
// ...

2. 创建日志查看控制器 #

在Controllers文件夹下新建LogViewerController.cs：

using Microsoft.AspNetCore.Mvc;
using System.IO;

public class LogViewerController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    // 读取日志文件内容的接口
    public IActionResult GetLogContent(string logFile = null)
    {
        var logDir = Path.Combine(AppContext.BaseDirectory, "Logs");
        if (!Directory.Exists(logDir))
        {
            return Content("日志目录不存在");
        }

        // 按时间倒序获取日志文件，默认取最新的一个
        var logFiles = Directory.GetFiles(logDir, "app-*.log")
            .OrderByDescending(f => f)
            .ToList();

        if (!logFiles.Any())
        {
            return Content("暂无日志文件");
        }

        string targetFile = logFile ?? logFiles.First();
        try
        {
            // 小文件直接读取全部，大文件建议分片读取
            var content = System.IO.File.ReadAllText(targetFile);
            return Content(content, "text/plain");
        }
        catch (Exception ex)
        {
            return Content($"读取日志失败：{ex.Message}");
        }
    }
}

3. 创建日志查看视图 #

在Views/LogViewer文件夹下新建Index.cshtml：

@{
    ViewData["Title"] = "应用日志查看器";
}

<h3>应用日志</h3>
<div class="log-container" style="height: 600px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; font-family: monospace;">
    <pre id="logContent">加载中...</pre>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            loadLatestLog();
            // 可选：每5秒自动刷新日志
            setInterval(loadLatestLog, 5000);
        });

        function loadLatestLog() {
            $.get('/LogViewer/GetLogContent', function(data) {
                $('#logContent').text(data);
                // 自动滚动到日志底部
                $('.log-container').scrollTop($('.log-container')[0].scrollHeight);
            });
        }
    </script>
}

4. 添加打开独立窗口的触发按钮 #

在需要的页面（比如布局页Layout.cshtml或业务页面）添加按钮：

<button onclick="openLogWindow()">打开日志查看器</button>

<script>
    function openLogWindow() {
        // 打开指定大小的独立窗口
        window.open('/LogViewer/Index', 'LogViewer', 'width=1000,height=700,top=100,left=100');
    }
</script>

5. 可选优化方向 #

• 大文件处理：实现日志分片读取，避免一次性加载全部内容
• 日志筛选：添加按日志级别、时间范围筛选的功能
• 日志高亮：对Error/Warn等不同级别日志添加颜色区分
• 日志切换：在日志页面添加下拉框，支持选择不同日期的日志文件

内容的提问来源于stack exchange，提问作者Rajnikant