feat(error): add server error handling (#990)

- Implement server error route
- Add server error handler
- Update error messages in locales
- Create server error component in frontend
- Fix formatting in Unauthorized.vue

Author: hiveer

frontend/public/images/icons/alert.svg

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="error_page_bg h-[calc(100vh-80px)] min-h-[500px] flex items-center justify-center m-auto">
+    <div class="flex flex-col items-center">
+      <div
+        class="flex flex-col gap-[24px] items-center text-center mt-[24px] px-[16px] text-gray-700">
+        <div
+          class="rounded-lg border border-gray-200 bg-white shadow-xs p-[14px]">
+          <svg-icon name="alert"></svg-icon>
+        </div>
+        <p class="font-semibold text-6xl leading-[72px] sm:text-4xl sm:leading-[36px]">
+          {{ $t('errors_page.serverError.title', { errorCode }) }}
+        </p>
+        <p class="text-xl font-[300]">
+          {{ errorMessage }}
+        </p>
+
+        <!-- action button -->
+        <div class="flex gap-[12px] mt-[24px]">
+          <a href="/">
+            <button
+              class="text-lg flex px-[22px] py-[16px] items-center justify-center gap-[8px] rounded-sm border border-gray-400 bg-white shadow-sm">
+              {{ $t('errors_page.login_failed.back_to_homepage') }}
+            </button>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const url = new URL(window.location.href)
+  const params = new URLSearchParams(url.search)
+  const errorCode = params.get('error_code')
+  const errorMessage = params.get('error_message')
+</script>

frontend/src/components/error/ServerError.vue

@@ -12,19 +12,19 @@
 
         <h1 id="error-Header" class="text-6xl font-medium mb-6 text-gray-900">
           {{ $t('errors_page.unauthorized.title') }}
-        </h1>    
+        </h1>
 
         <p id="error-Description" class="text-xl font-light mb-12 text-gray-600">
           {{ $t('errors_page.unauthorized.desc') }}
         </p>
 
         <div id="error-button" class="flex gap-5">
-          <a href="javascript:history.back();" 
+          <a href="javascript:history.back();"
              class="btn btn-secondary bg-white px-6 py-4 font-medium text-gray-700 border border-gray-300 hover:bg-gray-50">
             {{ $t('errors_page.not_found.back') }}
           </a>
 
-          <a href="/" 
+          <a href="/"
              class="btn btn-primary bg-brand-600 px-6 py-4 font-medium text-white hover:bg-brand-700">
             {{ $t('errors_page.not_found.home') }}
           </a>
@@ -34,7 +34,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-
-</script>

frontend/src/components/error/Unauthorized.vue

@@ -3,7 +3,7 @@ export const errors_page = {
     title: 'Page not found',
     desc: 'Sorry, OpenCSG could not find this web page. This web page may have been removed due to a product update, or your URL is incorrect.',
     back: 'Back',
-    home: 'To homepage',  
+    home: 'To homepage',
   },
   unauthorized: {
     title: 'Unauthorized',
@@ -15,4 +15,7 @@ export const errors_page = {
     back_to_homepage: 'To homepage',
     relogin: 'Relogin',
   },
+  serverError: {
+    title: 'Server Error {errorCode}'
+  }
 }

frontend/src/locales/en_js/error.js

@@ -15,4 +15,7 @@ export const errors_page = {
     back_to_homepage: '回到首页',
     relogin: '重新登录',
   },
+  serverError: {
+    title: '服务器错误 {errorCode}'
+  }
 }

frontend/src/locales/zh_js/error.js

@@ -51,6 +51,7 @@ import CollectionsDetail from "./components/collections/CollectionsDetail.vue"
 import NotFound from "./components/error/NotFound.vue"
 import Unauthorized from "./components/error/Unauthorized.vue"
 import LoginFailed from "./components/error/LoginFailed.vue"
+import ServerError from "./components/error/ServerError.vue"
 import FlashMessage from "./components/shared/FlashMessage.vue"
 import ResourceConsoleIndex from "./components/resource_console/ResourceConsoleIndex.vue"
 import PromptsHub from "./components/prompts/PromptsHub.vue"
@@ -108,6 +109,7 @@ const app = createApp({
     NotFound,
     Unauthorized,
     LoginFailed,
+    ServerError,
     FlashMessage,
     ResourceConsoleIndex,
     PromptsHub,

frontend/src/main.js

@@ -0,0 +1,3 @@
+{{ define "content" }}
+  <server-error />
+{{ end }}

frontend/src/views/errors/server_error.html

@@ -8,6 +8,7 @@ type ErrorHandler interface {
 	NotFound(ctx *gin.Context)
 	Unauthorized(ctx *gin.Context)
 	LoginFailed(ctx *gin.Context)
+	ServerError(ctx *gin.Context)
 }
 
 type ErrorHandlerImpl struct {
@@ -28,3 +29,7 @@ func (e *ErrorHandlerImpl) Unauthorized(ctx *gin.Context) {
 func (e *ErrorHandlerImpl) LoginFailed(ctx *gin.Context) {
 	RenderBaseInstance.RenderTemplate(ctx, "errors_login_failed", nil)
 }
+
+func (e *ErrorHandlerImpl) ServerError(ctx *gin.Context) {
+	RenderBaseInstance.RenderTemplate(ctx, "errors_server_error", nil)
+}

internal/handlers/render/error.go

@@ -8,4 +8,5 @@ func registerErrorRoutes(engine *gin.Engine, handlersRegistry *HandlersRegistry)
 	engine.GET("/errors/not-found", handlersRegistry.RenderHandler.ErrorHandler.NotFound)
 	engine.GET("/errors/unauthorized", handlersRegistry.RenderHandler.ErrorHandler.Unauthorized)
 	engine.GET("/errors/login-failed", handlersRegistry.RenderHandler.ErrorHandler.LoginFailed)
+	engine.GET("/errors/server-error", handlersRegistry.RenderHandler.ErrorHandler.ServerError)
 }

internal/routes/error.go

@@ -121,6 +121,7 @@ func createRender() multitemplate.Renderer {
 		"errors_404":          "errors/404.html",
 		"errors_401":          "errors/unauthorized.html",
 		"errors_login_failed": "errors/login_failed.html",
+		"errors_server_error": "errors/server_error.html",
 
 		"index":                          "home/index.html",
 		"models_index":                   "models/index.html",