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}
>
@@ -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}
+
+ {error.stack}
+ >
+ ) : (
+ error
+ )}
);
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(
- renderApp()} />
+ window.location.reload()}
+ />
);
}
}