Add internal server error page

handler/error/error.go

@@ -13,8 +13,18 @@ func init() {
 	log = logger.Logger()
 }
 
-func ALL(w http.ResponseWriter, r *http.Request) {
+func NotFound(w http.ResponseWriter, r *http.Request) {
-	component := errorView.Main("Not Found")
+	component := errorView.NotFound("Not Found")
+	err := component.Render(r.Context(), w)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		log.Error(err.Error())
+		return
+	}
+}
+
+func InternalServerError(w http.ResponseWriter, r *http.Request) {
+	component := errorView.InternalServerError("Internal Server Error")
 	err := component.Render(r.Context(), w)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)

handler/upload/initialisation/initialisation.go

@@ -28,13 +28,13 @@ func POST(w http.ResponseWriter, r *http.Request) {
 
 	body, err := io.ReadAll(r.Body)
 	if err != nil {
-		handleError(w, err, http.StatusInternalServerError)
+		w.WriteHeader(http.StatusInternalServerError)
 		return
 	}
 
 	var fileInfo types.FileInfo
 	if err := json.Unmarshal(body, &fileInfo); err != nil {
-		handleError(w, err, http.StatusInternalServerError)
+		w.WriteHeader(http.StatusInternalServerError)
 		return
 	}
 
@@ -43,7 +43,7 @@ func POST(w http.ResponseWriter, r *http.Request) {
 		if errors.Is(err, gorm.ErrRecordNotFound) {
 			upload, err := handleNewUpload(userSession, fileInfo)
 			if err != nil {
-				handleError(w, err, http.StatusInternalServerError)
+				w.WriteHeader(http.StatusInternalServerError)
 				return
 			}
 			respondJSON(w, upload)

middleware/middleware.go

@@ -25,15 +25,21 @@ type wrapper struct {
 }
 
 func (w *wrapper) WriteHeader(code int) {
-	if code == http.StatusNotFound {
+	switch code {
+	case http.StatusNotFound:
 		w.Header().Set("Content-Type", "text/html")
-		errorHandler.ALL(w.ResponseWriter, w.request)
+		errorHandler.NotFound(w.ResponseWriter, w.request)
 		return
-	}
+	case http.StatusInternalServerError:
+		w.Header().Set("Content-Type", "text/html")
+		errorHandler.InternalServerError(w.ResponseWriter, w.request)
+		return
+	default:
 		w.ResponseWriter.WriteHeader(code)
 		w.statusCode = code
 		return
 	}
+}
 
 func Handler(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(writer http.ResponseWriter, request *http.Request) {

routes/routes.go

@@ -193,6 +193,11 @@ func SetupRoutes() *http.ServeMux {
 		http.ServeFile(w, r, "public/favicon.ico")
 	})
 
+	//TODO add error message catching to the middleware so we can show the error message at the error page
+	handler.HandleFunc("/test", func(w http.ResponseWriter, r *http.Request) {
+		http.Error(w, "anjay", http.StatusInternalServerError)
+	})
+
 	fileServer := http.FileServer(http.Dir("./public"))
 	handler.Handle("/public/", http.StripPrefix("/public", fileServer))
 

view/error/error.templ

@@ -2,17 +2,17 @@ package errorView
 
 import "github.com/fossyy/filekeeper/view/layout"
 
-templ content(title string){
+templ NotFound(title string){
     @layout.Base(title){
         <div class="flex flex-col items-center justify-center w-full min-h-[calc(100vh-1rem)] py-10 text-center gap-4 md:gap-8">
            <div class="space-y-2">
               <h1 class="text-4xl font-bold tracking-tighter sm:text-5xl">404 Not Found</h1>
-              <p class="max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
+              <p class="max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  The page you are looking for does not exist. It might have been moved or deleted.
               </p>
            </div>
            <a
-              class="inline-flex h-10 items-center rounded-md border border-gray-200 border-gray-200 bg-white px-8 text-sm font-medium shadow-sm gap-2 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 dark:border-gray-800 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-gray-300"
+              class="inline-flex h-10 items-center rounded-md border border-gray-200 border-gray-200 bg-white px-8 text-sm font-medium shadow-sm gap-2 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950"
               href="/"
               >
               <svg
@@ -34,6 +34,26 @@ templ content(title string){
     }
 }
 
-templ Main(title string) {
+templ InternalServerError(title string){
-	@content(title)
+    @layout.Base(title){
+    <main class="container mx-auto px-4 py-12 md:px-6 md:py-16 lg:py-10">
+        <div class="flex h-screen w-full flex-col items-center justify-center bg-white">
+        <image class="w-32 md:w-64 lg:w-128" src="/public/InternalServerErrorIcon.svg" alt="brand image" />
+          <div class="mx-auto max-w-md space-y-4 text-center">
+            <h1 class="text-4xl font-bold tracking-tight text-gray-900">Oops! Something went wrong.</h1>
+            <p class="text-gray-500">
+              We're sorry, but an internal server error has occurred. Please try again later.
+            </p>
+            <div class="grid gap-2">
+              <a
+                class="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-6 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50"
+                href="/"
+              >
+                Go back to homepage
+              </a>
+            </div>
+          </div>
+        </div>
+     </main>
+    }
 }