From 4bac018ff1c2fc61834f1f9725ad9448d38e80a5 Mon Sep 17 00:00:00 2001
From: Yonas <yonasseyoum24@gmail.com>
Date: Tue, 7 Nov 2023 13:17:01 +0300
Subject: [PATCH 1/3] create keycloak error handling component

---
 applications/webapp/src/keycloakError.tsx | 35 +++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 applications/webapp/src/keycloakError.tsx

diff --git a/applications/webapp/src/keycloakError.tsx b/applications/webapp/src/keycloakError.tsx
new file mode 100644
index 0000000..da649b4
--- /dev/null
+++ b/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>
+  );
+}

From bdf93d75db5b81782459c507de85f1af89c9233d Mon Sep 17 00:00:00 2001
From: Yonas <yonasseyoum24@gmail.com>
Date: Tue, 7 Nov 2023 13:26:29 +0300
Subject: [PATCH 2/3] add unit test

---
 .../webapp/src/keycloakError.test.tsx         | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 applications/webapp/src/keycloakError.test.tsx

diff --git a/applications/webapp/src/keycloakError.test.tsx b/applications/webapp/src/keycloakError.test.tsx
new file mode 100644
index 0000000..88edf59
--- /dev/null
+++ b/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 />);
+  });
+});

From e99cdc8edc709e6764acb72efb2079db1649e9d0 Mon Sep 17 00:00:00 2001
From: Yonas <yonasseyoum24@gmail.com>
Date: Tue, 7 Nov 2023 13:26:49 +0300
Subject: [PATCH 3/3] update index.tsx

---
 applications/webapp/src/index.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/applications/webapp/src/index.tsx b/applications/webapp/src/index.tsx
index 98dba6c..b579481 100644
--- a/applications/webapp/src/index.tsx
+++ b/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,6 +34,14 @@ const renderRoot = () => {
   );
 };
 
+const renderKeycloakErrorPage = () => {
+  return root.render(
+    <React.StrictMode>
+      <KeycloakError />
+    </React.StrictMode>,
+  );
+};
+
 initKeycloak()
   .then(() => {
     renderRoot();
@@ -40,11 +49,8 @@ initKeycloak()
     const intervalTime = 300000;
     setInterval(refreshToken, intervalTime);
   })
-  .catch((error) => {
-    throw new Error(
-      `[index.initKeycloak()] An error occurred during keycloak initialization:`,
-      error,
-    );
+  .catch(() => {
+    renderKeycloakErrorPage();
   });
 
 reportWebVitals();