From d7967d322ef888a18efed6ca77fec41c4317814c Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Sat, 10 Feb 2024 19:52:29 +0500
Subject: [PATCH] web: reload page on reset from error boundary

---
 apps/web/src/components/error-boundary/index.tsx |  5 ++++-
 apps/web/src/components/error-text/index.tsx     | 12 ++++++++++--
 apps/web/src/index.tsx                           |  5 ++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/error-boundary/index.tsx b/apps/web/src/components/error-boundary/index.tsx
index dc3248aca..bc6f8d55b 100644
--- a/apps/web/src/components/error-boundary/index.tsx
+++ b/apps/web/src/components/error-boundary/index.tsx
@@ -148,7 +148,10 @@ function getErrorHelp(props: FallbackProps) {
       : error instanceof Error
       ? error.toString()
       : JSON.stringify(error);
-  if (errorText.includes("file is not a database")) {
+  if (
+    errorText.includes("file is not a database") ||
+    errorText.includes("unsupported file format")
+  ) {
     return {
       explanation: `This error usually means the database file is either corrupt or it could not be decrypted.`,
       action:
diff --git a/apps/web/src/components/error-text/index.tsx b/apps/web/src/components/error-text/index.tsx
index c68e5c275..a9f92e022 100644
--- a/apps/web/src/components/error-text/index.tsx
+++ b/apps/web/src/components/error-text/index.tsx
@@ -31,7 +31,7 @@ export function ErrorText(props: ErrorTextProps) {
       bg="var(--background-error)"
       p={1}
       mt={2}
-      sx={{ borderRadius: "default", ...sx }}
+      sx={{ borderRadius: "default", ...sx, maxHeight: 300, overflowY: "auto" }}
       {...restProps}
     >
       <ErrorIcon size={15} color="var(--icon-error)" />
@@ -41,7 +41,15 @@ export function ErrorText(props: ErrorTextProps) {
         ml={1}
         sx={{ whiteSpace: "pre-wrap" }}
       >
-        {error instanceof Error ? <>{error.stack}</> : error}
+        {error instanceof Error ? (
+          <>
+            {error.name}: {error.message}
+            <br />
+            {error.stack}
+          </>
+        ) : (
+          error
+        )}
       </Text>
     </Flex>
   );
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index dd7a201ae..766a0adf1 100644
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -56,7 +56,10 @@ async function renderApp() {
     );
   } catch (e) {
     root.render(
-      <ErrorComponent error={e} resetErrorBoundary={() => renderApp()} />
+      <ErrorComponent
+        error={e}
+        resetErrorBoundary={() => window.location.reload()}
+      />
     );
   }
 }