feat: internal server error page

internal/api/api.go

@@ -279,54 +279,34 @@ func (api *API) SetupRoutes() {
 
 		bindErr := c.BindUri(&providerName)
 
-		if bindErr != nil {
-			log.Error().Err(bindErr).Msg("Failed to bind URI")
-			c.JSON(400, gin.H{
-				"status":  400,
-				"message": "Bad Request",
-			})
+		if handleApiError(c, "Failed to bind URI", bindErr) {
 			return
 		}
 
 		code := c.Query("code")
 
 		if code == "" {
-			c.JSON(400, gin.H{
-				"status":  400,
-				"message": "Bad Request",
-			})
+			log.Error().Msg("No code provided")
+			c.Redirect(http.StatusPermanentRedirect, "/error")
 			return
 		}
 
 		provider := api.Providers.GetProvider(providerName.Provider)
 
 		if provider == nil {
-			c.JSON(404, gin.H{
-				"status":  404,
-				"message": "Not Found",
-			})
+			c.Redirect(http.StatusPermanentRedirect, "/not-found")
 			return
 		}
 
 		token, tokenErr := provider.ExchangeToken(code)
 
-		if tokenErr != nil {
-			log.Error().Err(tokenErr).Msg("Failed to exchange token")
-			c.JSON(500, gin.H{
-				"status":  500,
-				"message": "Internal Server Error",
-			})
+		if handleApiError(c, "Failed to exchange token", tokenErr) {
 			return
 		}
 
 		email, emailErr := api.Providers.GetUser(providerName.Provider)
 
-		if emailErr != nil {
-			log.Error().Err(emailErr).Msg("Failed to get user")
-			c.JSON(500, gin.H{
-				"status":  500,
-				"message": "Internal Server Error",
-			})
+		if handleApiError(c, "Failed to get user", emailErr) {
 			return
 		}
 
@@ -335,12 +315,7 @@ func (api *API) SetupRoutes() {
 			unauthorizedQuery, unauthorizedQueryErr := query.Values(types.UnauthorizedQuery{
 				Email: email,
 			})
-			if unauthorizedQueryErr != nil {
-				log.Error().Err(unauthorizedQueryErr).Msg("Failed to build query")
-				c.JSON(501, gin.H{
-					"status":  501,
-					"message": "Internal Server Error",
-				})
+			if handleApiError(c, "Failed to build query", unauthorizedQueryErr) {
 				return
 			}
 			c.Redirect(http.StatusPermanentRedirect, fmt.Sprintf("%s/unauthorized?%s", api.Config.AppURL, unauthorizedQuery.Encode()))
@@ -365,12 +340,7 @@ func (api *API) SetupRoutes() {
 			RedirectURI: redirectURI,
 		})
 
-		if redirectQueryErr != nil {
-			log.Error().Err(redirectQueryErr).Msg("Failed to build query")
-			c.JSON(501, gin.H{
-				"status":  501,
-				"message": "Internal Server Error",
-			})
+		if handleApiError(c, "Failed to build query", redirectQueryErr) {
 			return
 		}
 
@@ -406,3 +376,12 @@ func zerolog() gin.HandlerFunc {
 		}
 	}
 }
+
+func handleApiError(c *gin.Context, msg string, err error) bool {
+	if err != nil {
+		log.Error().Err(err).Msg(msg)
+		c.Redirect(http.StatusPermanentRedirect, "/error")
+		return true
+	}
+	return false
+}

site/src/main.tsx

@@ -14,6 +14,7 @@ import { LogoutPage } from "./pages/logout-page.tsx";
 import { ContinuePage } from "./pages/continue-page.tsx";
 import { NotFoundPage } from "./pages/not-found-page.tsx";
 import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
+import { InternalServerError } from "./pages/internal-server-error.tsx";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,6 +37,7 @@ createRoot(document.getElementById("root")!).render(
               <Route path="/logout" element={<LogoutPage />} />
               <Route path="/continue" element={<ContinuePage />} />
               <Route path="/unauthorized" element={<UnauthorizedPage />} />
+              <Route path="/error" element={<InternalServerError />} />
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </BrowserRouter>

site/src/pages/internal-server-error.tsx

@@ -0,0 +1,21 @@
+import { Button, Paper, Text } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+
+export const InternalServerError = () => {
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          Internal Server Error
+        </Text>
+        <Text>
+          An error occured on the server and it currently cannot serve your
+          request.
+        </Text>
+        <Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
+          Try again
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};