Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions src/components/Page/Page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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]);

Expand Down Expand Up @@ -94,6 +102,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>
);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a test case for this

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean adding a unit test for the content.__error branch to verify that the error message is rendered?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we get this route on the real site? I feel like we are adding something what never be happened

Copy link
Copy Markdown
Contributor Author

@mr-baraiya mr-baraiya Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This case can occur if dynamic content (MDX import) fails to resolve at runtime — for example:
broken or missing MDX file
network issues during dynamic import
incorrect path or deployment mismatch

Previously, this resulted in a plain string fallback, which breaks the render logic since it expects structured content. This change ensures the component handles such failures safely and avoids runtime crashes by providing a structured fallback

The unit test verifies that this fallback is rendered correctly when such a failure occurs.

} else {
contentRender = (
<div
Expand Down
50 changes: 50 additions & 0 deletions src/components/Page/__tests__/Page.test.jsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
Loading