fix page error boundary

apps/client/src/App.tsx

@@ -14,7 +14,6 @@ import AccountPreferences from "@/pages/settings/account/account-preferences.tsx
 import SpaceHome from "@/pages/space/space-home.tsx";
 import PageRedirect from "@/pages/page/page-redirect.tsx";
 import Layout from "@/components/layouts/global/layout.tsx";
-import { ErrorBoundary } from "react-error-boundary";
 import InviteSignup from "@/pages/auth/invite-signup.tsx";
 import ForgotPassword from "@/pages/auth/forgot-password.tsx";
 import PasswordReset from "./pages/auth/password-reset";
@@ -84,13 +83,7 @@ export default function App() {
           <Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
           <Route
             path={"/s/:spaceSlug/p/:pageSlug"}
-            element={
+            element={<Page />}
-              <ErrorBoundary
-                fallback={<>{t("Failed to load page. An error occurred.")}</>}
-              >
-                <Page />
-              </ErrorBoundary>
-            }
           />
 
           <Route path={"/settings"}>

apps/client/src/pages/page/page.tsx

@@ -14,9 +14,10 @@ import {
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
-import { IconFileOff } from "@tabler/icons-react";
+import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
 import { Button } from "@mantine/core";
 import { Link } from "react-router-dom";
+import { ErrorBoundary } from "react-error-boundary";
 
 const MemoizedFullEditor = React.memo(FullEditor);
 const MemoizedPageHeader = React.memo(PageHeader);
@@ -26,6 +27,29 @@ export default function Page() {
   const { t } = useTranslation();
   const { pageSlug } = useParams();
 
+  return (
+    <ErrorBoundary
+      resetKeys={[pageSlug]}
+      fallbackRender={({ resetErrorBoundary }) => (
+        <EmptyState
+          icon={IconAlertTriangle}
+          title={t("Failed to load page. An error occurred.")}
+          action={
+            <Button variant="default" size="sm" mt="xs" onClick={resetErrorBoundary}>
+              {t("Try again")}
+            </Button>
+          }
+        />
+      )}
+    >
+      <PageContent pageSlug={pageSlug} />
+    </ErrorBoundary>
+  );
+}
+
+function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
+  const { t } = useTranslation();
+
   const {
     data: page,
     isLoading,