108 add graceful unhandled exceptions in presentationblazor (#109)

* removed key vault

* IsLocal()

* Graceful error handling

Author: goodtocode

src/Presentation.Blazor/Components/Layout/MainLayout.razor

@@ -1,19 +1,38 @@
 @namespace Goodtocode.SemanticKernel.Presentation.Blazor.Components.Layout
 
 @inherits LayoutComponentBase
+@inject NavigationManager Navigation
 
-<div class="page">
-    <NavMenu />        
+<NavMenu />
+<ErrorBoundary @ref="errorBoundaryRef">
+    <ChildContent>
+        <div class="page">
+            <main>
+                <article class="content">
+                    @Body
+                </article>
+            </main>
+        </div>
+    </ChildContent>
+    <ErrorContent Context="ex">
+        <div class="error-dialog-backdrop">
+            <div class="error-dialog">
+                <div class="alert alert-danger mb-3">
+                    Oops! Something went wrong.<br />
+                    @ex.Message
+                </div>
+                <button class="btn btn-sm btn-primary" @onclick="OnRecoverAndNavigate">Go Home</button>
+            </div>
+        </div>
+    </ErrorContent>
+</ErrorBoundary>
 
-    <main>
-        <article class="content">
-            @Body
-        </article>
-    </main>
-</div>
+@code {
+    private ErrorBoundary? errorBoundaryRef;
 
-<div id="blazor-error-ui" data-nosnippet>
-    An unhandled error has occurred.
-    <a href="." class="reload">Reload</a>
-    <span class="dismiss">🗙</span>
-</div>
+    private void OnRecoverAndNavigate()
+    {
+        errorBoundaryRef?.Recover();
+        Navigation.NavigateTo("/", forceLoad: true);
+    }
+}

src/Presentation.Blazor/Components/Layout/MainLayout.razor.css

@@ -15,23 +15,25 @@ main {
     height: 100vh;
 }
 
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+.error-dialog-backdrop {
     position: fixed;
-    width: 100%;
-    z-index: 1000;
+    top: 10vh;
+    left: 0;
+    width: 100vw;
+    height: 90vh;
+    background: rgba(0,0,0,0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1050;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+.error-dialog {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 32px rgba(0,0,0,0.2);
+    padding: 2rem 2.5rem;
+    min-width: 320px;
+    max-width: 90vw;
+    text-align: center;
+}

src/Presentation.Blazor/ConfigureServices.cs

@@ -9,7 +9,10 @@ namespace Goodtocode.SemanticKernel.Presentation.Blazor;
 
 public static class ConfigureServices
 {
-
+    public static bool IsLocal(this IWebHostEnvironment environment)
+    {
+        return environment.EnvironmentName.Equals("Local", StringComparison.OrdinalIgnoreCase);
+    }
     public static void AddLocalEnvironment(this WebApplicationBuilder builder)
     {
         if (builder.Environment.IsEnvironment("Local"))

src/Presentation.Blazor/Program.cs

@@ -22,7 +22,7 @@
 
 var app = builder.Build();
 
-if (app.Environment.IsDevelopment() || app.Environment.EnvironmentName.Equals("Local", StringComparison.OrdinalIgnoreCase))
+if (app.Environment.IsDevelopment() || app.Environment.IsLocal())
 {
     app.UseDeveloperExceptionPage();
 }

src/Presentation.WebApi/ConfigureServices.cs

@@ -9,6 +9,16 @@ namespace Goodtocode.SemanticKernel.Presentation.WebApi;
 /// </summary>
 public static class ConfigureServices
 {
+    /// <summary>
+    /// Determines if the current environment is "Local".
+    /// </summary>
+    /// <param name="environment">The web host environment.</param>
+    /// <returns>True if the environment is "Local"; otherwise, false.</returns>
+    public static bool IsLocal(this IWebHostEnvironment environment)
+    {
+        return environment.EnvironmentName.Equals("Local", StringComparison.OrdinalIgnoreCase);
+    }
+
     /// <summary>
     /// Add Local Environment Configuration to mirror Development
     /// </summary>
@@ -31,17 +41,6 @@ public static void AddLocalEnvironment(this WebApplicationBuilder builder)
     /// <returns></returns>
     public static IServiceCollection AddWebUIServices(this IServiceCollection services)
     {
-        //var assemblyVersion = Assembly.GetExecutingAssembly().GetName().Version;
-        //var majorVersion = $"v{assemblyVersion?.Major ?? 1}";
-        //services.AddSwaggerGen(c =>
-        //{
-        //    c.SwaggerDoc(majorVersion, new OpenApiInfo
-        //    {
-        //        Title = "Semantic Kernel Quick-start for WebAPI",
-        //        Version = majorVersion
-        //    });
-        //});
-
         services.AddControllersWithViews(setupAction =>
             {
                 setupAction.Filters.Add(

src/Presentation.WebApi/Program.cs

@@ -26,7 +26,6 @@
 builder.Services.AddSemanticKernelOpenAIServices(builder.Configuration);
 builder.Services.AddWebUIServices();
 builder.Services.AddHealthChecks();
-//AddKeyVaultConfigurationSettings(builder);
 BuildApiVerAndApiExplorer(builder);
 
 builder.Services.AddOpenTelemetry().UseAzureMonitor(options =>
@@ -36,7 +35,7 @@
 
 var app = builder.Build();
 
-if (app.Environment.IsDevelopment() || app.Environment.EnvironmentName.Equals("Local", StringComparison.OrdinalIgnoreCase))
+if (app.Environment.IsDevelopment() || app.Environment.IsLocal())
 {
     app.UseSwagger();
     UseSwaggerUiConfigs();
@@ -84,15 +83,4 @@ void BuildApiVerAndApiExplorer(WebApplicationBuilder webApplicationBuilder)
         setup.GroupNameFormat = "'v'VVV";
         setup.SubstituteApiVersionInUrl = true;
     });
-}
-
-void AddKeyVaultConfigurationSettings(WebApplicationBuilder appBuilder)
-{
-    if (!appBuilder.Configuration.GetValue<bool>("KeyVault:UseKeyVault")) return;
-
-    var azureKeyVaultEndpoint = appBuilder.Configuration["KeyVault:Endpoint"];
-    if (azureKeyVaultEndpoint == null) return;
-    var credential = new DefaultAzureCredential();
-    var secretClient = new SecretClient(new Uri(azureKeyVaultEndpoint), credential);
-    appBuilder.Configuration.AddAzureKeyVault(secretClient, new KeyVaultSecretManager());
-}
+}

src/Presentation.WebApi/appsettings.Development.json

@@ -28,10 +28,6 @@
     "Scopes": "api.fullaccess",
     "SignUpSignInPolicyId": "B2C_1_susi"
   },
-  "KeyVault": {
-    "UseKeyVault": false,
-    "Endpoint": "https://{{YOUR_KEYVAULT_NAME}}.vault.azure.net/"
-  },
   "OpenAI": {
     "ChatCompletionModelId": "gpt-4.1-mini",
     "TextGenerationModelId": "gpt-3.5-turbo-instruct",

src/Presentation.WebApi/appsettings.Production.json

@@ -28,10 +28,6 @@
     "Scopes": "api.fullaccess",
     "SignUpSignInPolicyId": "B2C_1_susi"
   },
-  "KeyVault": {
-    "UseKeyVault": false,
-    "Endpoint": "https://{{YOUR_KEYVAULT_NAME}}.vault.azure.net/"
-  },
   "OpenAI": {
     "ChatCompletionModelId": "gpt-4.1",
     "TextGenerationModelId": "gpt-3.5-turbo-instruct",

src/Presentation.WebApi/appsettings.local.json

@@ -28,10 +28,6 @@
     "Scopes": "api.fullaccess",
     "SignUpSignInPolicyId": "B2C_1_susi"
   },
-  "KeyVault": {
-    "UseKeyVault": false,
-    "Endpoint": "https://{{YOUR_KEYVAULT_NAME}}.vault.azure.net/"
-  },
   "OpenAI": {
     "ChatCompletionModelId": "gpt-4.1-nano",
     "TextGenerationModelId": "gpt-3.5-turbo-instruct",