fix(Page): handle failed dynamic content loading safely (#8006)

Author: mr-baraiya

src/components/Page/Page.jsx

@@ -30,7 +30,9 @@ export default function Page(props) {
   );
   const content = isDynamicContent
     ? dynamicContent
-    : props.content.default || props.content;
+    : props.content && props.content.default !== undefined
+      ? props.content.default
+      : props.content;
 
   const [contentLoaded, setContentLoaded] = useState(!isDynamicContent);
 
@@ -41,7 +43,13 @@ export default function Page(props) {
           setContent(() => mod.default || mod);
           setContentLoaded(true);
         })
-        .catch(() => setContent("Error loading content."));
+        .catch(() => {
+          setContent({
+            __error: true,
+            message: "Failed to load page content.",
+          });
+          setContentLoaded(true);
+        });
     }
   }, [props.content]);
 
@@ -95,6 +103,10 @@ export default function Page(props) {
 
   if (typeof content === "function") {
     contentRender = content({}).props.children;
+  } else if (content && content.__error) {
+    contentRender = (
+      <div className="text-red-600 font-bold">{content.message}</div>
+    );
   } else {
     contentRender = (
       <div

src/components/Page/__tests__/Page.test.jsx

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import Page from "../Page.jsx";
+
+jest.mock("../../Contributors/Contributors.jsx", () => {
+  const MockContributors = () => <div />;
+  return MockContributors;
+});
+
+jest.mock("../../PageLinks/PageLinks.jsx", () => {
+  const MockPageLinks = () => <div />;
+  return MockPageLinks;
+});
+
+jest.mock("react-router-dom", () => {
+  const actual = jest.requireActual("react-router-dom");
+  return {
+    ...actual,
+    useLocation: () => ({ pathname: "/test", hash: "" }),
+  };
+});
+
+Object.defineProperty(window, "scrollTo", {
+  value: jest.fn(),
+  writable: true,
+});
+
+describe("Page component", () => {
+  it("renders error message when content.__error exists", async () => {
+    const content = {
+      __error: true,
+      message: "Failed to load page content.",
+    };
+
+    render(
+      <MemoryRouter>
+        <Page content={content} title="Test" path="/test" />
+      </MemoryRouter>,
+    );
+
+    const errorElement = await screen.findByText(
+      /failed to load page content/i,
+    );
+    expect(errorElement).toBeTruthy();
+  });
+});