web: reload page on reset from error boundary

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:

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>
   );

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()}
+      />
     );
   }
 }