fix page error boundary

This commit is contained in:
Philipinho
2026-02-16 04:06:41 +00:00
parent 2ebdc2baea
commit 00b5328676
2 changed files with 26 additions and 9 deletions
+1 -8
View File
@@ -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={
<ErrorBoundary
fallback={<>{t("Failed to load page. An error occurred.")}</>}
>
<Page />
</ErrorBoundary>
}
element={<Page />}
/>
<Route path={"/settings"}>
+25 -1
View File
@@ -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,