如何查看ABP框架下Blazor Web应用的日志与堆栈跟踪？

1. 浏览器开发者工具 #

• 打开浏览器开发者工具（快捷键F12或Ctrl+Shift+I），切换到Console标签页：Blazor客户端运行时抛出的未处理异常、警告及日志信息会直接输出在此处，多数内部错误的堆栈跟踪也能在这里找到。
• 切换到Network标签页，过滤Fetch/XHR请求：查看ABP相关接口的响应状态，若返回500、400等错误码，点击请求查看Response或Preview标签，可获取服务器返回的错误详情。

2. 启用Blazor客户端日志输出 #

在Blazor WebAssembly项目的Program.cs中添加日志配置，将客户端日志打印到浏览器控制台：

builder.Logging.AddBrowserConsole();
builder.Logging.SetMinimumLevel(LogLevel.Debug);

配置后，客户端的调试日志、异常信息会直接输出到控制台，便于排查框架运行细节。

3. 全局异常捕获与展示 #

在App.razor中使用ErrorBoundary组件包裹路由内容，自定义错误展示逻辑以捕获未处理的客户端异常：

<ErrorBoundary>
    <ChildContent>
        <Router AppAssembly="@typeof(App).Assembly">
            <Found Context="routeData">
                <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
                <FocusOnNavigate RouteData="@routeData" Selector="h1" />
            </Found>
            <NotFound>
                <PageTitle>Not found</PageTitle>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p role="alert">Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </ChildContent>
    <ErrorContent Context="exception">
        <div class="alert alert-danger">
            <p>未处理异常详情：</p>
            <pre>@exception.ToString()</pre>
        </div>
    </ErrorContent>
</ErrorBoundary>

当客户端组件抛出异常时，页面会直接显示完整的堆栈跟踪信息。

4. ABP框架客户端日志配置 #

在客户端appsettings.json文件中调整日志级别，开启ABP模块的调试日志：

{
  "Logging": {
    "LogLevel": {
      "Default": "Debug",
      "Microsoft": "Warning",
      "Volo.Abp": "Debug"
    }
  }
}

此配置会让ABP框架在控制台输出更多内部运行日志，帮助定位框架层面的客户端错误。

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