From a3342e2f6b5f182fbb6634e26eb34ddbbdb05ad3 Mon Sep 17 00:00:00 2001
From: Fi-zzy <332114773+Fi-zzy@users.noreply.github.com>
Date: Mon, 26 Oct 2026 08:33:39 +0100
Subject: [PATCH] fix(frontend): recover marketplace route render errors

---
 frontend/app/trades/page.test.tsx | 29 +++++++++++++++++++++++++++++
 frontend/app/trades/page.tsx      |  5 ++++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 frontend/app/trades/page.test.tsx

diff --git a/frontend/app/trades/page.test.tsx b/frontend/app/trades/page.test.tsx
new file mode 100644
index 0000000..946ce27
--- /dev/null
+++ b/frontend/app/trades/page.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import TradesPage from "./page";
+
+jest.mock("../../components/MarketplaceListings", () => ({
+  __esModule: true,
+  default: () => { throw new Error("temporary marketplace render failure"); },
+}));
+
+jest.mock("next-intl/server", () => ({
+  getTranslations: jest.fn(),
+}));
+
+describe("TradesPage recovery", () => {
+  beforeEach(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("catches a MarketplaceListings render error and offers a retry", async () => {
+    render(await TradesPage());
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /try again/i })).toBeInTheDocument();
+  });
+});
diff --git a/frontend/app/trades/page.tsx b/frontend/app/trades/page.tsx
index 2a673b9..6191663 100644
--- a/frontend/app/trades/page.tsx
+++ b/frontend/app/trades/page.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from "next-intl/server";
+import ErrorBoundary from "../../components/ErrorBoundary";
 import MarketplaceListings from "../../components/MarketplaceListings";
 import type { Metadata } from "next";
 
@@ -18,7 +19,9 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function TradesPage() {
   return (
     <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-      <MarketplaceListings fetchOnMount />
+      <ErrorBoundary context={{ section: "MarketplaceListings.page" }}>
+        <MarketplaceListings fetchOnMount />
+      </ErrorBoundary>
     </div>
   );
 }