[Feat] Error & Loading Interceptors

Backend/Controllers/BuggyController.cs

@@ -0,0 +1,39 @@
+using Backend.Data;
+using Backend.Entities;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Backend.Controllers;
+
+// This is a mock controller for testing purposes
+public class BuggyController(DataContext context) : BaseApiController
+{
+  [Authorize]
+  [HttpGet("auth")]
+  public ActionResult<string> GetAuth()
+  {
+    return "secret text";
+  }
+
+  [HttpGet("not-found")]
+  public ActionResult<User> GetNotFound()
+  {
+    var thing = context.Users.Find(-1); // produce not found user
+    if (thing == null) return NotFound();
+    return thing;
+  }
+
+  [HttpGet("server-error")]
+  public ActionResult<User> GetServerError() // 5xx = server error
+  {
+    var thing = context.Users.Find(-1) ?? throw new Exception("A bad thing has happened"); // generate null reference error
+
+    return thing;
+  }
+
+  [HttpGet("bad-request")]
+  public ActionResult<string> GetBadRequest() // 4xx = user error
+  {
+    return BadRequest("This was not a good request");
+  }
+}

Backend/Errors/ApiException.cs

@@ -0,0 +1,8 @@
+namespace Backend.Errors;
+
+public class ApiException(int statusCode, string message, string? details)
+{
+  public int StatusCode { get; set; } = statusCode;
+  public string Message { get; set; } = message;
+  public string? Details { get; set; } = details;
+}

Backend/Middleware/ExceptionMiddleware.cs

@@ -0,0 +1,36 @@
+using System.Net;
+using System.Text.Json;
+using Backend.Errors;
+
+namespace Backend.Middleware;
+
+public class ExceptionMiddleware(RequestDelegate next, ILogger<ExceptionMiddleware> logger, IHostEnvironment env)
+{
+  // have to call InvokeAsync since its expected when we call the next method
+  public async Task InvokeAsync(HttpContext context)
+  {
+    try
+    {
+      await next(context);
+    }
+    catch (Exception ex)
+    {
+      logger.LogError(ex, ex.Message);
+      context.Response.ContentType = "application/json";
+      context.Response.StatusCode = (int)HttpStatusCode.InternalServerError;
+
+      var response = env.IsDevelopment()
+        ? new ApiException(context.Response.StatusCode, ex.Message, ex.StackTrace)
+        : new ApiException(context.Response.StatusCode, ex.Message, "Internal server error");
+
+      var options = new JsonSerializerOptions
+      {
+        PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+      };
+
+      var json = JsonSerializer.Serialize(response, options);
+
+      await context.Response.WriteAsync(json);
+    }
+  }
+}

Backend/Program.cs

@@ -1,4 +1,5 @@
 using Backend.Extensions;
+using Backend.Middleware;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -9,6 +10,7 @@
 var app = builder.Build();
 
 // Configure the HTTP request pipeline (Middleware)
+app.UseMiddleware<ExceptionMiddleware>();
 app.UseCors(x => x.AllowAnyHeader().AllowAnyMethod().WithOrigins("http://localhost:4200", "https://localhost:4200"));
 
 app.UseAuthentication();

Frontend/angular.json

@@ -39,7 +39,10 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.scss"],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/ngx-spinner/animations/ball-pulse.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -61,7 +64,13 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
             }
           },
           "defaultConfiguration": "production"