Keycloak error page

applications/webapp/src/index.tsx

@@ -18,6 +18,7 @@ import reportWebVitals from "./reportWebVitals";
 import { client } from "./graphql/client";
 import { ApolloProvider } from "@apollo/client";
 import { initKeycloak, refreshToken } from "./Authentication/Keycloak";
+import KeycloakError from "./keycloakError";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
@@ -33,18 +34,23 @@ const renderRoot = () => {
   );
 };
 
+const renderKeycloakErrorPage = () => {
+  return root.render(
+    <React.StrictMode>
+      <KeycloakError />
+    </React.StrictMode>,
+  );
+};
+
 initKeycloak()
   .then(() => {
     renderRoot();
 
     const intervalTime = 300000;
     setInterval(refreshToken, intervalTime);
   })
-  .catch((error) => {
-    throw new Error(
-      `[index.initKeycloak()] An error occurred during keycloak initialization:`,
-      error,
-    );
+  .catch(() => {
+    renderKeycloakErrorPage();
   });
 
 reportWebVitals();

applications/webapp/src/keycloakError.test.tsx

@@ -0,0 +1,21 @@
+/**
+ * Humanitech Supply Trail
+ *
+ * Copyright (c) Humanitech, Peter Rogov and Contributors
+ *
+ * Website: https://humanitech.net
+ * Repository: https://github.com/humanitech-net/supply-trail
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import KeycloakError from "./keycloakError";
+
+describe("Keycloak Error Page", () => {
+  test("renders Keycloak Error Component", () => {
+    render(<KeycloakError />);
+  });
+});

applications/webapp/src/keycloakError.tsx

@@ -0,0 +1,35 @@
+/**
+ * Humanitech Supply Trail
+ *
+ * Copyright (c) Humanitech, Peter Rogov and Contributors
+ *
+ * Website: https://humanitech.net
+ * Repository: https://github.com/humanitech-net/supply-trail
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { Container, Typography } from "@mui/material";
+
+export default function KeycloakError() {
+  const style = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+  };
+
+  return (
+    <Container maxWidth={false} disableGutters sx={style}>
+      <Typography variant="h4" fontWeight={"bold"}>
+        Internal Server Error
+      </Typography>
+      <Typography variant="subtitle2">
+        An error occurred during keycloak initialization
+      </Typography>
+    </Container>
+  );
+}