feat(IErrorLogger): support DetailedErrors config (#4579)

* doc: 增加弹窗示例

* refactor: 优化代码

* refactor: 增加异常提示信息栏

* doc: 增加示例文档

* refactor: 增加 DetailedErrors 配置项检查

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/MockError.razor

@@ -0,0 +1,10 @@
+<Button Icon="fa-solid fa-font-awesome" Text="Click" OnClick="OnClick" />
+
+@code {
+    private static void OnClick()
+    {
+        // NET6.0 采用 ErrorLogger 统一处理
+        var a = 0;
+        _ = 1 / a;
+    }
+}

src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor

@@ -6,3 +6,9 @@
         @Body
     </main>
 </BootstrapBlazorRoot>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>

src/BootstrapBlazor.Server/Components/Samples/GlobalException.razor

@@ -59,9 +59,7 @@
 
 <DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
     <section ignore>@((MarkupString)Localizer["ExceptionTestIntroduce"].Value)</section>
-    <ErrorLogger>
-        <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["ButtonText"]" OnClick="OnClick" />
-    </ErrorLogger>
+    <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["ButtonText"]" OnClick="OnClick" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Swal">
@@ -70,4 +68,8 @@
     </ErrorLogger>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["DialogTitle"]" Introduction="@Localizer["DialogIntro"]" Name="Dialog">
+    <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["DialogText"]" OnClick="OnShowDialog" />
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/GlobalException.razor.cs

@@ -14,6 +14,9 @@ public partial class GlobalException
     [NotNull]
     private SwalService? SwalService { get; set; }
 
+    [Inject, NotNull]
+    private DialogService? DialogService { get; set; }
+
     private static void OnClick()
     {
         // NET6.0 采用 ErrorLogger 统一处理
@@ -30,6 +33,12 @@ private Task OnErrorHandleAsync(ILogger logger, Exception ex) => SwalService.Sho
         FooterTemplate = BootstrapDynamicComponent.CreateComponent<SwalFooter>().Render()
     });
 
+    private Task OnShowDialog() => DialogService.Show(new DialogOption()
+    {
+        Title = Localizer["DialogTitle"],
+        Component = BootstrapDynamicComponent.CreateComponent<MockError>()
+    });
+
     /// <summary>
     /// 获得属性方法
     /// </summary>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -1741,7 +1741,10 @@
     "ExceptionTestIntroduce": "In this example code, an error code that divides by zero is written. Because <code>try/catch</code> is used to capture the exception, the error message is displayed in the console below",
     "ButtonText": "test",
     "Block2Title": "OnErrorHandleAsync",
-    "Block2Intro": "Set custom exception handling logic by setting <code>OnErrorHandleAsync</code> callback method"
+    "Block2Intro": "Set custom exception handling logic by setting <code>OnErrorHandleAsync</code> callback method",
+    "DialogTitle": "In Dialog",
+    "DialogIntro": "Click the button to pop up a pop-up window. The button in the pop-up window triggers an exception and the error is displayed in the pop-up window",
+    "DialogText": "Popup"
   },
   "BootstrapBlazor.Server.Components.Pages.GlobalOption": {
     "Title": "Global exception",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1741,7 +1741,10 @@
     "ExceptionTestIntroduce": "本例代码中写了一个除以零的错误代码，并且未使用 <code>try/catch</code> 对异常进行捕获，系统并不会崩溃导致不可用，<ul class='ul-demo'><li><code>Debug</code> 模式下会显示错误的 <b>描述信息</b> 与 <b>堆栈信息</b></li><li><code>Release</code> 模式下默认使用 <code>Toast</code> 进行弹窗提示</li></ul>",
     "ButtonText": "测试",
     "Block2Title": "自定义错误处理",
-    "Block2Intro": "通过设置 <code>OnErrorHandleAsync</code> 回调方法，设置自定义异常处理逻辑"
+    "Block2Intro": "通过设置 <code>OnErrorHandleAsync</code> 回调方法，设置自定义异常处理逻辑",
+    "DialogTitle": "弹窗中异常捕获",
+    "DialogIntro": "点击按钮弹出弹窗，弹窗内按钮触发异常，错误显示在弹窗内",
+    "DialogText": "弹窗"
   },
   "BootstrapBlazor.Server.Components.Pages.GlobalOption": {
     "Title": "全局配置",

src/BootstrapBlazor/Components/ErrorLogger/BootstrapBlazorErrorBoundary.cs

@@ -80,6 +80,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             var ex = CurrentException ?? _exception;
             if (ex != null)
             {
+                _exception = null;
                 builder.AddContent(0, ExceptionContent(ex));
             }
         }
@@ -99,11 +100,21 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             var index = 0;
             builder.OpenElement(index++, "div");
             builder.AddAttribute(index++, "class", "error-stack");
-            builder.AddContent(index++, ex.FormatMarkupString(Configuration.GetEnvironmentInformation()));
+            builder.AddContent(index++, GetErrorContentMarkupString(ex));
             builder.CloseElement();
         }
     };
 
+    private bool? _errorDetails;
+
+    private MarkupString GetErrorContentMarkupString(Exception ex)
+    {
+        _errorDetails ??= Configuration.GetValue("DetailedErrors", false);
+        return _errorDetails is true
+            ? ex.FormatMarkupString(Configuration.GetEnvironmentInformation())
+            : new MarkupString(ex.Message);
+    }
+
     /// <summary>
     /// 渲染异常信息方法
     /// </summary>

src/BootstrapBlazor/Components/ErrorLogger/ErrorLogger.cs

@@ -99,13 +99,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     /// </summary>
     /// <param name="exception"></param>
     /// <returns></returns>
-    public async Task HandlerExceptionAsync(Exception exception)
-    {
-        if (EnableErrorLogger)
-        {
-            await _errorBoundary.RenderException(exception, _cache.LastOrDefault());
-        }
-    }
+    public Task HandlerExceptionAsync(Exception exception) => _errorBoundary.RenderException(exception, _cache.LastOrDefault());
 
     private readonly List<IHandlerException> _cache = [];
 

test/UnitTest/Components/ErrorLoggerTest.cs

@@ -4,6 +4,7 @@
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.Configuration;
 
 namespace UnitTest.Components;
 
@@ -39,6 +40,31 @@ public void OnErrorAsync_Ok()
         button.TriggerEvent("onclick", EventArgs.Empty);
     }
 
+    [Fact]
+    public async Task DetailedErrors_False()
+    {
+        var config = Context.Services.GetRequiredService<IConfiguration>();
+        config["DetailedErrors"] = "false";
+
+        var cut = Context.RenderComponent<BootstrapBlazorRoot>(pb =>
+        {
+            pb.AddChildContent<ErrorLogger>(pb =>
+            {
+                pb.Add(e => e.ShowToast, false);
+                pb.AddChildContent<Button>(pb =>
+                {
+                    pb.Add(b => b.OnClick, () =>
+                    {
+                        var a = 0;
+                        _ = 1 / a;
+                    });
+                });
+            });
+        });
+        var button = cut.Find("button");
+        await cut.InvokeAsync(() => button.Click());
+    }
+
     [Fact]
     public async Task OnErrorHandleAsync_Ok()
     {
@@ -96,7 +122,6 @@ public void OnErrorHandleAsync_Tab()
         cut.Contains("errorLogger-click");
         var button = cut.Find("button");
         button.TriggerEvent("onclick", EventArgs.Empty);
-
         cut.Contains("<div class=\"tabs-body-content\"><div class=\"error-stack\">TimeStamp:");
     }